es6的模块化

html页面里，可以通过script标签引入模块：如下

//1.js
export const a = "我是xxx";
console.log("哈哈哈");
export let b = "我喜欢yyy";

html页面
<script type='module'>
        import {a,b} from './js/1.js';
        console.log(a,b);     //我是xxx   我喜欢yyy
</script>

页面的导入和导出有很多变式写法：

const a = 1;
const b = 2;
const c = 3;
export {
    a,
    b as bbb,
    c
}

<script type='module'>
        import {a,bbb,c as ccc} from './js/1.js';
        console.log(a,bbb,ccc);
    </script>
要对应，用关键字as 可以为复杂的名字起别名

还可以用*来得到所有数据
<script type='module'>
        import  * as list from './js/1.js';
        console.log(list.a);
        console.log(list.bbb);
        console.log(list.c);
    </script>

如果默认导出的话，可以不用大括号接收：例如

export default function(){        //注意！export default 只能被导出一次！！！
    console.log("啊啊啊");
}
let name = "xxx";
let age = 23;
export {name,age}


 <script type='module'>
        import abc,{name , age} from './js/1.js';
        console.log(name,age);
        abc();
    </script>

import 有提升效果，会自动提升到顶部，首先执行，如果导出的内容有定时器修改值，那么外面内容也会修改

但是import是静态引入，不可以在if之类的块作用域里面，要是想动态引入，需要用到import();

<script type='module'>
        let a=2;
        if(a==2){
            import('./js/1.js').then(res =>{
                console.log(res);
            })
        }else{
            import('https://code.jquery.com/jquery-3.3.1.min.js').then(res =>{console.log(res)});
        }
    </script>

在这里需要说明一下，import（）采用的是promise语法，.then(res =>{...});处理引入模块后数据；

猜你喜欢