zoukankan      html  css  js  c++  java
  • ES6模块的使用示例

    1、整体文件结构:

    2、profile.js

    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 2019;
    
    function test1(){
        console.log("this is test1");
    }
    
    function test2(){
        console.log("this is test2");
    }
    
    export default{
        firstName,
        lastName,
        year,
        test1,
        test2
    }

    3、profile2.js

    var firstName = 'Michael2';
    var lastName = 'Jackson2';
    var year = 20192;
    
    function test1(){
        console.log("this is test12");
    }
    
    function test2(){
        console.log("this is test22");
    }
    
    export default{
        firstName,
        lastName,
        year,
        test1,
        test2
    }

    4、test.js

    import profile from './profile.js';
    
    console.log(profile.firstName);
    console.log(profile.lastName);
    console.log(profile.year);
    profile.test1();
    profile.test2();
    console.log('-----------------------------------------------');
    
    var i = 2;
    
    if (i == 1) {
        import('./profile.js')
            .then(({ default: profile }) => {
                console.log(profile.firstName);
                console.log(profile.lastName);
                console.log(profile.year);
                profile.test1();
                profile.test2();
            })
            .catch(error => {
                console.log(error);
            })
    } else {
        import('./profile2.js')
            .then(({ default: profile }) => {
                console.log(profile.firstName);
                console.log(profile.lastName);
                console.log(profile.year);
                profile.test1();
                profile.test2();
            })
            .catch(error => {
                console.log(error);
            })
    }

    5、test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script type="module" src="profile.js"></script>
        <script type="module" src="test.js"></script>
    </body>
    </html>

    6、运行结果截图:

  • 相关阅读:
    truncate、delete和drop的异同点
    改机器名处理
    全文目录
    利用TypePerf.exe
    wait_stats状态初始化
    Android模拟器 SD卡的权限详解
    Android Animation学习笔记
    Android学习笔记
    Android Activity和Intent机制学习笔记
    Android学习笔记33:Intent介绍及Intent在Activity中的使用方法
  • 原文地址:https://www.cnblogs.com/lkc9/p/10855888.html
Copyright © 2011-2022 走看看