import 和 require 是JS模塊化編程使用的适肠，是前端開發(fā)者們?cè)谛阅芴剿髦械挠忠淮筮M(jìn)步翠胰。
$ 對(duì)模塊化的理解
? 模塊化是一種將系統(tǒng)分離成獨(dú)立功能部分的方法棺聊，一個(gè)模塊是為完成一個(gè)功能的一段程序或子程序。"模塊"是系統(tǒng)中功能單一且可替換的部分淹接。
? 模塊化思想是從java上衍生過來的十性，他將所需要的功能封裝成一個(gè)類，哪里需要就在哪里調(diào)用塑悼，JS中沒有類的說法劲适，但它引入了這種思想，在js中用對(duì)象或構(gòu)造函數(shù)來模擬類的封裝實(shí)現(xiàn)模塊化厢蒜，而在html上减响，則使用import和require
?
$ 所屬規(guī)范
require/exports 是 CommonJS/AMD 中為了解決模塊化語法而引入的
import/export 是ES6引入的新規(guī)范，因?yàn)闉g覽器引擎兼容問題郭怪，需要在node中用babel將ES6語法編譯成ES5語法
? 關(guān)于import在瀏覽器中被支持的情況如下
?
$ 調(diào)用時(shí)間
require 是運(yùn)行時(shí)調(diào)用支示，所以理論上可以運(yùn)作在代碼的任何地方
import 是編譯時(shí)調(diào)用，所以必須放在文件的開頭
?
$ 本質(zhì)
require 是賦值過程鄙才，其實(shí)require的結(jié)果就是對(duì)象颂鸿、數(shù)字、字符串攒庵、函數(shù)等嘴纺，再把結(jié)果賦值給某個(gè)變量。它是普通的值拷貝傳遞浓冒。
import 是解構(gòu)過程栽渴。使用import導(dǎo)入模塊的屬性或者方法是引用傳遞。且import是read-only的稳懒，值是單向傳遞的闲擦。default是ES6 模塊化所獨(dú)有的關(guān)鍵字，export default {} 輸出默認(rèn)的接口對(duì)象场梆，如果沒有命名墅冷，則在import時(shí)可以自定義一個(gè)名稱用來關(guān)聯(lián)這個(gè)對(duì)象
?
$ 語法用法展示
| require的基本語法
? 在導(dǎo)出的文件中使用module.exports對(duì)模塊中的數(shù)據(jù)導(dǎo)出，內(nèi)容類型可以是字符串或油，變量寞忿，對(duì)象，方法等不予限定顶岸。使用require()引入到需要的文件中即可
? 在模塊中腔彰，將所要導(dǎo)出的數(shù)據(jù)存放在module的export屬性中叫编，在經(jīng)過CommonJs/AMD規(guī)范的處理，在需要的頁面中使用require指定到該模塊霹抛，即可導(dǎo)出模塊中的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
當(dāng)我們不需要導(dǎo)出模塊中的全部數(shù)據(jù)時(shí)宵溅，使用大括號(hào)包含所需要的模塊內(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導(dǎo)出的值與模塊中的值始終保持一致上炎，即引用拷貝恃逻，采用ES6中解構(gòu)賦值的語法，import配合export結(jié)合使用
// module.js
export function test(args) {
console.log(args);
}
// 定義一個(gè)默認(rèn)導(dǎo)出文件, 一個(gè)文件只能定義一次
export default {
a: function() {
console.log('export from module');
}
}
export const name = 'gzc'
// 使用_導(dǎo)出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 方式的寫法就相對(duì)豐富些
// import
import fs from 'fs';
import { newFs as fs } from 'fs'; // ES6語法, 將fs重命名為newFs, 命名沖突時(shí)常用
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';
?
$ 要點(diǎn)總結(jié)
- 通過
require引入基礎(chǔ)數(shù)據(jù)類型時(shí),屬于復(fù)制該變量 - 通過
require引入復(fù)雜數(shù)據(jù)類型時(shí), 屬于淺拷貝該對(duì)象 - 出現(xiàn)模塊之間循環(huán)引用時(shí), 會(huì)輸出已執(zhí)行的模塊, 未執(zhí)行模塊不會(huì)輸出
- CommonJS規(guī)范默認(rèn)
export的是一個(gè)對(duì)象,即使導(dǎo)出的是基礎(chǔ)數(shù)據(jù)類型
