11.1 在javasacript之前的版本中模塊化代碼
通過(guò)立即執(zhí)行函數(shù)的必包實(shí)現(xiàn)模塊。
11.2 ES6模塊
1、ES6優(yōu)缺點(diǎn)和思想
- es6結(jié)合了commonjs和AMD優(yōu)點(diǎn)，
- 與commonjs類似，es6模塊語(yǔ)法相對(duì)簡(jiǎn)單，基于文件（一個(gè)文件是一個(gè)模塊）
- 與AMD類似，ES6支持異步模塊加載。
- 瀏覽器尚未支持ES6，使用需編譯，如Babel；
- 思想：
- 必須顯式的使用export導(dǎo)出模塊變量，才能在外部訪問(wèn)模塊變量。否則，就算是模塊內(nèi)的全局變量，在模塊外部也訪問(wèn)不到；這樣做的好處是可以避免濫用全局變量而讓代碼更安全。
- 兩個(gè)關(guān)鍵字
- export 導(dǎo)出
- import 導(dǎo)入
2、導(dǎo)出和導(dǎo)入
導(dǎo)出
//定義時(shí)導(dǎo)出
export const message = "hi";
export function message (){ };
//導(dǎo)出模塊標(biāo)識(shí)符
const body = "hello";
function head (){ };
export { body,head }; //一一羅列導(dǎo)出的變量
//導(dǎo)入
import { body,head } from "example.js"; //一一羅列導(dǎo)入的變量
import * as newModule from "example.js";//導(dǎo)出這個(gè)文件所有可導(dǎo)出的變量為一個(gè)新模塊，并取別名newModule
// 使用 newModule.head();
//默認(rèn)導(dǎo)出
export default class ninjia(){}
export function getClass(){} //定義默認(rèn)導(dǎo)出還可以指定導(dǎo)出的名稱
//默認(rèn)導(dǎo)出的導(dǎo)入
import newNinjia from "example.js";//導(dǎo)入默認(rèn)導(dǎo)出不需要加花括號(hào)，可以重命名，直接使用，不需要加newModule.head();
//有默認(rèn)導(dǎo)出和其他導(dǎo)出的導(dǎo)入 簡(jiǎn)寫","
import newNinjia,{getClass} from
//導(dǎo)出重命名
export {sayHi as sayHello}; //導(dǎo)出重命名
import {sayHello} from "example.js"; //導(dǎo)入則必須使用重命名導(dǎo)入 無(wú)法使用原始變量導(dǎo)入
//導(dǎo)入重命名
//當(dāng)需要導(dǎo)入的模塊名稱沖突時(shí)，可使用as修改別名，當(dāng)然，修改后不能使用原名訪問(wèn)
import {greet as sayHello} from "example.js";
import {greet as sayHi} from "example.js";
