es6笔记之十-模块化

作者: AizawaSayo | 来源:发表于2019-03-28 19:39 被阅读0次

es6笔记之十-模块化
第4章 ES6模块化
第4章 ES6模块化
前端面试之ES6 语法
十二、模块化
如何在项目中使用webapck
前端模块化：ES6，CommonJS
当import/export、require/module.ex
ES6模块化
JS-模块化

js不支持模块化
ruby require
python import

在ES6之前，社区制定一套模块规范:
Commonjs：主要服务端 nodeJs require('http')
AMD：requireJs, curlJs
CMD：seaJs

ES6出来后，统一了服务端和客户端模块规范:
import {xx} ddd
自己对未来的构想，比如用某几个方法Math.pow()，Math.abs()，可如下引入：
import {pow, abs} from 'Math'

模块化：
注意：需要放到服务器环境localhost:8080才能使用。
a). 如何定义模块？
export xxx

export const a =12;
还可以先定义变量再打包模块，如下
const a=12;
const b=5;
const c=101;
//演示定义模块时给模块取别名
export {
    a as aaa,//引入时引入在{}内的名字是aaa
    b as banana,
    c as cup
}
export default b=101；//只有这样定义，import b时才不用包{}
export default 12;//也可以不用变量

b). 如何使用?
import

使用模块:
<script type="module">
import './modules/1.js'; //只是引入了文件，而不是1.js里定义的模块
import {a} from './modules/1.js';//真正引入了模块
import {a, b, c} from './modules/1.js';     

演示当定义模块时命名的 a， b引入时被定义别名后使用
import {a as apple, b as banana, c} from './modules/2.js'//定义别名后使用
console.log(apple,banana,c)//使用定义在后面的别名

引入2.js中所有模块并赋给modTwo对象
import * as modTwo from './modules/2.js';
console.log(modTwo);//mode{}

同时引入default模块和定义的模块，default没有定义变量名可默认在引入时定义一个名称引入
import a,{cc,dd} from './modules/3.js';
console.log(a, cc, dd);
</script>

import: 特点
a). import 可以是相对路径，也可以是绝对路径

import 'https://code.jquery.com/jquery-3.3.1.js';

b). import模块只会导入一次，无论你引入多少次
c). import './modules/1.js'; 如果这么用，相当于引入文件，直接执行但我们实际上是文件里定义的模块
d). import有提升效果，会自动提升到顶部首先执行

//页面内容
<script type="module">
console.log(a+b);//105
import mod,{show, sum, a, b} from './modules/4.js';
</script>

//modules/5.js
export const a =101;
export const b = 4;

//modules/4.js
import {a,b} from './5.js'

const sum = ()=>{
    console.log(a+b);
    return a+b;
}

const show = () =>{
    console.log('执行了show');
    return 1;
}

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    showName(){
        return `我的名字是${this.name}`;
    }
}

export {
    a,
    b,
    sum,
    show
}

export default {
    Person
}

e). 导出去的模块内容，如果里面有定时器更改，外面也会改动，和Common规范的缓存不同

//页面内容
<script type="module">
import {a,b} from './modules/6.js';
console.log(a);//12

setTimeout(()=>{
    console.log(a);//1111
},3000);
</script>
//modules/5.js
let a = 12;
let b = 5;

setTimeout(()=>{
    a=1111;
},2000);

export {
    a,
    b
}

import() 类似node里面的require，可以动态引入，但默认import语法不能写到if之类里面，不然会报错
可以用then()方法，它的返回值是个promise对象

import('./modules/1.js').then(res=>{
    console.log(res.a+res.b);//17
});
//动态引入示例
<script type="module">
        function config(s){
            switch(s){
                case 1:
                    return './modules/1.js';
                    break;
                case 2:
                    return './modules/2.js';
                    break;
            }
        }
        import(config(1)).then(res=>{
            $(function(){
                $('body').css({
                    background:'gray'
                })
            })
        });
</script>

优点: 1. 按需加载 2. 可以写if中 3. 路径也可以动态

Promise.all([])

Promise.all([
    import('./modules/1.js'),
    import('./modules/2.js')
]).then(([mod1,mod2])=>{
    console.log(mod1);
    console.log(mod2);
})

ES2017加 async await:

async function main(){
    const mod1 = await import('./modules/1.js');
    const mod2 = await import('./modules/2.js');
    console.log(mod1, mod2);
    const [m1,m2] = await Promise.all([
        import('./modules/1.js'),
        import('./modules/2.js')
    ]);
    console.log(m1,m2);
}
main();

'use strict' 以后默认就是严格模式