模組化開發(二)

G_Owen發表於2019-05-19

模組化開發(一)

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

相關文章