|
什么是JavaScript模塊化？ 模塊化在我看來，就是把一些公共的函數(shù)封裝起來給其他地方調(diào)用，而不用重復(fù)去寫一些冗余的函數(shù)代碼。 JavaScript模塊化大致發(fā)展過程 CommonJS(服務(wù)端) => AMD (瀏覽器端) => CMD / UMD => ES Module CommonJS CommonJS主要用于服務(wù)器端。 這個(gè)規(guī)范是同步的 特點(diǎn)：
// a.js module.exports = { moduleFunc: function() { return true; }; } // 或 exports.moduleFunc = function() { return true; }; // 在 b.js 中引用 var moduleA = require('a.js'); // 或 var moduleFunc = require('a.js').moduleFunc; console.log(moduleA.moduleFunc()); console.log(moduleFunc()) AMD規(guī)范 在commonJS中， 模塊的加載過程是一個(gè)同步的過程， 很明顯地，如果在瀏覽器端， 肯定就會(huì)引起瀏覽器頁面的阻塞，因此，這時(shí)候?qū)δK異步加載的需求就出現(xiàn)了。從而出現(xiàn)AMD規(guī)范
這時(shí)候RequireJS應(yīng)運(yùn)而生 RequireJS 特點(diǎn)：
// a.js define(function (require, exports, module) { console.log('a.js'); exports.name = 'Jack'; }); // b.js define(function (require, exports, module) { console.log('b.js'); exports.desc = 'Hello World'; }); // main.js require(['a', 'b'], function (moduleA, moduleB) { console.log('main.js'); console.log(moduleA.name + ', ' + moduleB.desc); }); // 執(zhí)行順序： // a.js // b.js // main.js然而， 他也有他的不足之處 按照 AMD 的規(guī)范，在定義模塊的時(shí)候需要把所有依賴模塊都羅列一遍（前置依賴），而且在使用時(shí)還需要在 factory 中作為形參傳進(jìn)去。 define(['a', 'b', 'c', 'd', 'e', 'f', 'g'], function(a, b, c, d, e, f, g){ ..... }); 是不是看起來又丑又復(fù)雜。。 RequireJS 模塊化的順序是這樣的：模塊預(yù)加載 => 全部模塊預(yù)執(zhí)行 => 主邏輯中調(diào)用模塊，所以實(shí)質(zhì)是依賴加載完成后還會(huì)預(yù)先一一將模塊執(zhí)行一遍，這種方式會(huì)使得程序效率有點(diǎn)低。 這個(gè)時(shí)候就出現(xiàn)了CMD規(guī)范，典型的就是seajs模塊化 SeaJS SeaJS 模塊化的順序是這樣的：模塊預(yù)加載 => 主邏輯調(diào)用模塊前才執(zhí)行模塊中的代碼，通過依賴的延遲執(zhí)行，很好解決了 RequireJS 被詬病的缺點(diǎn)。 // a.js define(function (require, exports, module) { console.log('a.js'); exports.name = 'Jack'; }); // main.js define(function (require, exports, module) { console.log('main.js'); var moduleA = require('a'); console.log(moduleA.name); }); // 執(zhí)行順序 // main.js // a.jsES6的module ES Module 的思想是盡量的靜態(tài)化，即在編譯時(shí)就確定所有模塊的依賴關(guān)系，以及輸入和輸出的變量，和 CommonJS 和 AMD/CMD 這些標(biāo)準(zhǔn)不同的是，它們都是在運(yùn)行時(shí)才能確定需要依賴哪一些模塊并且執(zhí)行它。ES Module 使得靜態(tài)分析成為可能
模塊的定義 /** * export 只支持對象形式導(dǎo)出，不支持值的導(dǎo)出，export default 命令用于指定模塊的默認(rèn)輸出， * 只支持值導(dǎo)出，但是只能指定一個(gè)，本質(zhì)上它就是輸出一個(gè)叫做default 的變量或方法 */ // 寫法 1 export var m = 1; // 寫法 2 var m = 1; export { m }; // 寫法 3 var n = 1; export { n as m }; // 寫法 4 var n = 1; export default n; 模塊的引入 // 解構(gòu)引入 import { firstName, lastName, year } from 'a-module'; // 為輸入的變量重新命名 import { lastName as surname } from 'a-module'; // 引出模塊對象（引入所有） import * as ModuleA from 'a-module'; 在使用 ES Module 值得注意的是：import 和 export 命令只能在模塊的頂層，在代碼塊中將會(huì)報(bào)錯(cuò) 這是因?yàn)?ES Module 需要在編譯時(shí)期進(jìn)行模塊靜態(tài)優(yōu)化，import 和 export 命令會(huì)被 JavaScript 引擎靜態(tài)分析，先于模塊內(nèi)的其他語句執(zhí)行，這種設(shè)計(jì)有利于編譯器提高效率，但也導(dǎo)致無法在運(yùn)行時(shí)加載模塊（動(dòng)態(tài)加載）。 |
|
|
