模塊化開發(二)

模塊化開發(一)

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 */
            })