模組化開發(二)
阿新 • • 發佈：2019-05-19
模組化開發(一)
ES6 詳解
ES6 的模組自動採用嚴格模式，不管你有沒有在模組頭部加上"use strict"。
頂層的this指向undefined，即不應該在頂層程式碼使用this。
嚴格模式主要有以下限制：
- 變數必須聲明後再使用
- 函式的引數不能有同名屬性，否則報錯
- 不能使用
with語句 - 不能對只讀屬性賦值，否則報錯
- 不能使用字首 0 表示八進位制數，否則報錯
- 不能刪除不可刪除的屬性，否則報錯
- 不能刪除變數
delete prop，會報錯，只能刪除屬性delete global[prop] eval不會在它的外層作用域引入變數eval和arguments不能被重新賦值- arguments不會自動反映函式引數的變化
- 不能使用
arguments.callee - 不能使用
arguments.caller - 禁止this指向全域性物件
- 不能使用
fn.caller和fn.arguments獲取函式呼叫的堆疊 - 增加了保留字（比如
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; //errorexport 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 */
})