import 和 require 是JS模塊化編程使用的，是前端開發(fā)者們在性能探索中的又一大進步。
$ 對模塊化的理解
? 模塊化是一種將系統(tǒng)分離成獨立功能部分的方法，一個模塊是為完成一個功能的一段程序或子程序。"模塊"是系統(tǒng)中功能單一且可替換的部分。
? 模塊化思想是從java上衍生過來的，他將所需要的功能封裝成一個類，哪里需要就在哪里調(diào)用，JS中沒有類的說法，但它引入了這種思想，在js中用對象或構造函數(shù)來模擬類的封裝實現(xiàn)模塊化，而在html上，則使用import和require
?
$ 所屬規(guī)范
require/exports 是 CommonJS/AMD 中為了解決模塊化語法而引入的
import/export 是ES6引入的新規(guī)范，因為瀏覽器引擎兼容問題，需要在node中用babel將ES6語法編譯成ES5語法
? 關于import在瀏覽器中被支持的情況如下
?
$ 調(diào)用時間
require 是運行時調(diào)用，所以理論上可以運作在代碼的任何地方
import 是編譯時調(diào)用，所以必須放在文件的開頭
?
$ 本質(zhì)
require 是賦值過程，其實require的結果就是對象、數(shù)字、字符串、函數(shù)等，再把結果賦值給某個變量。它是普通的值拷貝傳遞。
import 是解構過程。使用import導入模塊的屬性或者方法是引用傳遞。且import是read-only的，值是單向傳遞的。default是ES6 模塊化所獨有的關鍵字，export default {} 輸出默認的接口對象，如果沒有命名，則在import時可以自定義一個名稱用來關聯(lián)這個對象
?
$ 語法用法展示
| require的基本語法
? 在導出的文件中使用module.exports對模塊中的數(shù)據(jù)導出，內(nèi)容類型可以是字符串，變量，對象，方法等不予限定。使用require()引入到需要的文件中即可
? 在模塊中，將所要導出的數(shù)據(jù)存放在module的export屬性中，在經(jīng)過CommonJs/AMD規(guī)范的處理，在需要的頁面中使用require指定到該模塊，即可導出模塊中的export屬性并執(zhí)行賦值操作（值拷貝）
// module.js
module.exports = {
a: function() {
console.log('exports from module');
}
}
// sample.js
var obj = require('./module.js');
obj.a() // exports from module
當我們不需要導出模塊中的全部數(shù)據(jù)時，使用大括號包含所需要的模塊內(nèi)容。
// module.js
function test(str) {
console.log(str);
}
module.exports = {
test
}
// sample.js
let { test } = require('./module.js');
test ('this is a test');
?
| import 的基本語法
? 使用import導出的值與模塊中的值始終保持一致，即引用拷貝，采用ES6中解構賦值的語法，import配合export結合使用
// module.js
export function test(args) {
console.log(args);
}
// 定義一個默認導出文件, 一個文件只能定義一次
export default {
a: function() {
console.log('export from module');
}
}
export const name = 'gzc'
// 使用_導出export default的內(nèi)容
import _, { test, name } from './a.js'
test(`my name is ${name}`) // 模板字符串中使用${}加入變量
?
$ 寫法形式
| require/exports 方式的寫法比較統(tǒng)一
// require
const module = require('module')
// exports
export.fs = fs
module.exports = fs
| import/export 方式的寫法就相對豐富些
// import
import fs from 'fs';
import { newFs as fs } from 'fs'; // ES6語法, 將fs重命名為newFs, 命名沖突時常用
import { part } from fs;
import fs, { part } from fs;
// export
export default fs;
export const fs;
export function part;
export { part1, part2 };
export * from 'fs';
?
$ 要點總結
- 通過
require引入基礎數(shù)據(jù)類型時,屬于復制該變量 - 通過
require引入復雜數(shù)據(jù)類型時, 屬于淺拷貝該對象 - 出現(xiàn)模塊之間循環(huán)引用時, 會輸出已執(zhí)行的模塊, 未執(zhí)行模塊不會輸出
- CommonJS規(guī)范默認
export的是一個對象,即使導出的是基礎數(shù)據(jù)類型
