模块化开发(二)

模块化开发(一)

ES6模块化 详解

ES6 的模块自动采用严格模式，无论你有没有在模块头部加上"use strict"。
顶层的this指向undefined，即不该该在顶层代码使用this。

严格模式主要有如下限制：

1. 变量必须声明后再使用
2. 函数的参数不能有同名属性，不然报错
3. 不能使用with语句
4. 不能对只读属性赋值，不然报错
5. 不能使用前缀 0 表示八进制数，不然报错
6. 不能删除不可删除的属性，不然报错
7. 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
8. eval不会在它的外层做用域引入变量
9. eval和arguments不能被从新赋值
10. arguments不会自动反映函数参数的变化
11. 不能使用arguments.callee
12. 不能使用arguments.caller
13. 禁止this指向全局对象
14. 不能使用fn.caller和fn.arguments获取函数调用的堆栈
15. 增长了保留字（好比protected、static和interface）
    上面这些限制，模块都必须遵照。

export命令

• export除了输出变量，还能够输出函数或类（class）,还能够经过 as 更改输出名。

let age = 18;
let obj ={name:  "Owen"};
let multiply = (x, y) => x * y;
export {
    age,
    obj as monicker, //改变量名
    multiply
}

• 导出的对象必须是对外的接口

let num =2;
export num ; //error 由于实际输出的是一个值，须放在对象中 {num}

exprot 2  //error  输出的是值 而不是一个对外接口 => 须改为 export let num =2；

• 不能放到局部做用域中导出， 由于导出的对象是动态绑定的

let foo = (r) => r++;
 let fn = () => export default foo; //error

export default

• 全局只能有一个 export default
• export default 后面不能有 变量声明的关键字
• 使用 export default ，import 就不须要使用 {},只须要自定义一个变量便可

export default var a=1; //error
export default obj ={name:'Owen'};
//or
let num = 1;
let obj1 = {name:"Owen"};
export default {num, obj1}

import

• 配合 from 导入模块, 经过 as 修改导入接口, 接口不能从新赋值，但对象能够修改内部属性或方法。

import {age, monicker as obj, multiply} from './preson.js';
  age = 0 ; //error
  obj.feature = "handsome Owen"; 
  console.log(age, obj。name, multiply(1,2))
  import * as preson from "./preson.js" //引入全部接口

• import 具备提高的效果，会提高到做用域顶部执行，同一个模块屡次引入只执行一次，而且不能再局部做用域中引入。

multiply(2,2); //4
import {age, monicker as obj, multiply} from './preson.js';

if (true){
import {age, monicker as obj, multiply} from './preson.js'; //error

}

import()

• 由于require是运行时加载模块，import命令没法取代require的动态加载功能。所以，有一个提案，引入import()函数，完成动态加载。
• import()函数能够用在任何地方，不单单是模块，非模块的脚本也可使用。
• 和 require相似，不一样之处在于 import()是同步加载 require()是异步加载

const path =import('path');

• 咱们能够利用 import() 进行按需加载,动态加载，按条件加载:

  ```javascript
    import('./a.js')
        .then(r => {
            r.fn();
        })
        .catch(error => {
            /* Error handling */
        })
    if( x == 1){
        const path =import('path');
    }
    ```

• 若是想同时加载多个模块，能够采用下面的写法

Promise.all([
  import('./a.js'),
  import('./b.js'),
  import('./c.js'),
]) .then(([a,b,c]) => {
   // ...
 }).catch(error => {
                /* Error handling */
            })