ES6 模块化module

Posted 2021-03-07 afanadmin

导入

// ES6 模块化;
// 导入 和 导出
// 例如:a.js 需要 b.js 的逻辑

// 导入:

import {a,b} from ‘./b.js‘;
console.log(a,b);

import {a as c,b as d} from ‘./b.js‘;
console.log(c,d);

import {e} from ‘./b.js‘;
console.log(e);

import myobj from ‘./b.js‘;
console.log(myobj);

import myobj1,{a as g,b as g1} from ‘./b.js‘;
console.log(myobj1,g,g1);

import * as obj from ‘./b.js‘;
console.log(obj);//它是一个obj

/* 
    import {a,b} from ‘路径‘;
        {a,b}必须同名 因为是{}大括号和解构赋值一样
    import {a as c,b as d} from ‘路径‘;
        可以使用as起另名;
    import myobj from ‘./b.js‘;
        接收export default导出的方法可以自定义名字;
    import myobj1,{a as g,b as g1} from ‘./b.js‘;
        他们也可以同时接收导入内容
    import * as obj from ‘./b.js‘;
        通配符方式接收
*/

导出

// 导出:
export let a = 10;
export let b = 20;
let d = 30;
export {d as e};

let obj = {
    name:"张三",
    age:20
}
// export default obj;

export {obj as default};//新写法...

/* 
    export : 导出
        此关键字可以多些,那么他也就是可以导出多个
    export {d as e};
        可以使用as导出别名

    export default obj;
        次关键字只能一次,那么也就是 使用此方法 只能导出一次;
    
*/

script标签

<!-- 注:type属性值必须是module -->
<script type="module" src=‘./a.js‘></script>

按需加载

<script type="module">
    // import obj from ‘./a.js‘;//这里是页面加载完就直接加载了
    
    // 按需加载模块化js文件
    /* document.onclick = function (){
        // 返还 promise 对象;
        import("./a.js").then(res=>{
            // console.log(res);
        });
    } */
    document.onclick = async function (){
        // 返还 promise 对象;
        // import("./a.js").then(res=>{
        //     // console.log(res);
        // });
        let res = await import("./a.js");
        console.log(res);
    }
</script>