標籤:命令 listen pen 匿名函數 multi 設計思想 提高 思想 hand
在研究react和webpack的時候,經常看到在js檔案中出現require,還有import,這兩個都是為了JS模組化編程使用。CSS的是@import
1.ES6 模組的設計思想,是盡量的靜態化,使得編譯時間就能確定模組的依賴關係,以及輸入和輸出的變數。
Require是CommonJS的文法,CommonJS的模組是對象,輸入時必須尋找對象屬性。
// CommonJS模組let { stat, exists, readFile } = require(‘fs‘);// 等同於let _fs = require(‘fs‘);let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;
above:整體載入fs模組(即載入fs所有方法),產生一個對象"_fs",然後再從這個對象上讀取三個方法,這叫“運行時載入”,因為只有運行時才能得到這個對象,不能在編譯時間做到靜態化。
ES6模組不是對象,而是通過export命令顯示指定輸出代碼,再通過import輸入。
import { stat, exists, readFile } from ‘fs‘;
above:從fs載入“stat, exists, readFile” 三個方法,其他方法不載入,
2.ES6模組預設使用strict 模式,無論是否聲明“use strict”
ES6 模組之中,頂層的this
指向undefined
,即不應該在頂層代碼使用this
。
Module 主要由兩個命令組成,import和export,export用於規定模組的對外介面,import命令用於輸入其他模組提供的功能
3.Export
模組是獨立的檔案,該檔案內部的所有的變數外部都無法擷取。如果希望擷取某個變數,必須通過export輸出,
// profile.jsexport var firstName = ‘Michael‘;export var lastName = ‘Jackson‘;export var year = 1958;
或者用更好的方式:用大括弧指定要輸出的一組變數
// profile.jsvar firstName = ‘Michael‘;var lastName = ‘Jackson‘;var year = 1958;export {firstName, lastName, year};
除了輸出變數,還可以輸出函數或者類(class),
export function multiply(x, y) { return x * y;};
還可以批量輸出,同樣是要包含在大括弧裡,也可以用as重新命名:
function v1() { ... }function v2() { ... }export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion};
Attention:
export 命令規定的是對外介面,必須與模組內部變數建立一一對應的關係
// 寫法一export var m = 1;// 寫法二var m = 1;export {m};// 寫法三var n = 1;export {n as m};// 報錯export 1;// 報錯var m = 1;export m;
報錯的寫法原因是:沒有提供對外的介面,第一種直接輸出1,第二種雖然有變數m,但還是直接輸出1,導致無法解構。
同樣的,function
和class
的輸出,也必須遵守這樣的寫法。
// 報錯function f() {}export f;// 正確export function f() {};// 正確function f() {}export {f};
And:export語句輸出的介面,都是和其對應的值是動態綁定的關係,即通過該介面取到的都是模組內部即時的值。
位置:export模組可以位於模組中的任何位置,但是必須是在模組頂層,如果在其他範圍內,會報錯。
function foo() { export default ‘bar‘ // SyntaxError}foo()
4.Import命令
export定義了模組的對外介面後,其他JS檔案就可以通過import來載入這個模組,
// main.jsimport {firstName, lastName, year} from ‘./profile‘;function setName(element) { element.textContent = firstName + ‘ ‘ + lastName;}
import命令接受一對大括弧,裡面指定要從其他模組匯入的變數名,必須與被匯入模組(profile.js
)對外介面的名稱相同。
如果想重新給匯入的變數一個名字,可以用as關鍵字,
import { lastName as surname } from ‘./profile‘;
import後的from 可以指定需要匯入模組的路徑名,可以是絕對路徑,也可以是相對路徑, .js路徑可以省略,如果只有模組名,不帶有路徑,需要有設定檔指定。
注意,import
命令具有提升效果,會提升到整個模組的頭部,首先執行。(是在編譯階段執行的)
因為import是靜態執行的,不能使用運算式和變數,即在運行時才能拿到結果的文法結構(e.g. if...else...)
5.module的整體載入
除了指定載入某個輸出值,還可以用(*)指定一個對象,所有的變數都會載入在這個對象上。
// circle.js。輸出兩個函數export function area(radius) { return Math.PI * radius * radius;}export function circumference(radius) { return 2 * Math.PI * radius;}// main.js 載入在個模組import { area, circumference } from ‘./circle‘;console.log(‘圓面積:‘ + area(4));console.log(‘圓周長:‘ + circumference(14));//上面寫法是逐一指定要載入的方法,整體載入的寫法如下。import * as circle from ‘./circle‘;console.log(‘圓面積:‘ + circle.area(4));console.log(‘圓周長:‘ + circle.circumference(14));
注意,模組整體載入所在的那個對象(上例是circle
),應該是可以靜態分析的,所以不允許運行時改變。
import * as circle from ‘./circle‘;// 下面兩行都是不允許的circle.foo = ‘hello‘;circle.area = function () {};
6.export default
之前的例子中,使用import匯入時,都需要知道模組中所要載入的變數名或函數名,使用者可能不想閱讀源碼,只想直接使用介面,就可以用export default命令,為模組指定輸出
// export-default.jsexport default function () { console.log(‘foo‘);}
其他模組載入該模組時,import
命令可以為該匿名函數指定任意名字。
// import-default.jsimport customName from ‘./export-default‘;customName(); // ‘foo‘
export default也可以用於非匿名函數前。
下面比較一下預設輸出和正常輸出。
// 第一組export default function crc32() { // 輸出 // ...}import crc32 from ‘crc32‘; // 輸入// 第二組export function crc32() { // 輸出 // ...};import {crc32} from ‘crc32‘; // 輸入
可以看出,使用export default時,import語句不用使用大括弧。
*******import
和export
命令只能在模組的頂層,不能在代碼塊之中。否則會文法報錯。
這樣的設計,可以提高編譯器效率,但是沒有辦法實現運行時載入。
因為require是運行時載入,所以import命令沒有辦法代替require的動態載入功能。
所以引入了import()函數。完成動態載入。
import(specifier)
specifier用來指定所要載入的模組的位置。import能接受什麼參數,import()可以接受同樣的參數。
import()返回一個Promise對象。
const main = document.querySelector(‘main‘);import(`./section-modules/${someVariable}.js`) .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; });
7.import()函數適用場合
1)按需載入:
button.addEventListener(‘click‘, event => { import(‘./dialogBox.js‘) .then(dialogBox => { dialogBox.open(); }) .catch(error => { /* Error handling */ })});
above: import模組在事件監聽函數中,只有使用者點擊了按鈕,才會載入這個模組。
2)條件載入:
import()可以放在if...else語句中,實現條件載入。
if (condition) { import(‘moduleA‘).then(...);} else { import(‘moduleB‘).then(...);}
---摘自阮大神的 ES6, 僅供自己記錄參考。
JS 中的require 和 import 區別