模塊化開發(二)

模塊化開發(一)

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