JS模塊簡介
js模塊化，簡單說就是將系統或者功能分隔成單獨的、互不影響的代碼片段，經過嚴格定義接口，使各模塊間互不影響，且可以為其他所用。
常見的模塊化有，C中的include (.h)文件、java中的import等。
為什么JS需要模塊
很顯然，沒有模塊我們也可以實現同樣的功能，為什么我們還要使用模塊來寫js代碼呢？下面幾點是模塊化給我們帶來的一些變化：
ES5及之前的模塊系統
在ES5及之前版本，還沒有原生的模塊語法。不過這并不代表ES5之前，前端沒有使用模塊。簡單介紹兩種：IIFE、Revealing Module.
IIFE
Immediately Invoked Function Expression，立即執行函數表達式。
(function(){ // ... })()看上面的代碼，IIFE可以說成是一個在定義的時候就執行的匿名函數。注意函數是先被”()”包起來了，然后后面緊跟”()”表示執行函數。如果是以下代碼，將會報錯：
function(){ console.log('test'); }() // => Uncaught SyntaxError: Unexpected token )這種寫法表示，先定義一個匿名函數，然后再去解析”()”。由于在第一行”function”出現在首位，這表明此處定義一個函數，函數后緊跟”()”，此時表示單獨解析”()”，就會報出上面的錯誤信息，因此需要先將函數定義包裹起來。
“(function…)”這種寫法表示執行”()”內部代碼，并返回該語句執行結果，此處返回結果為該函數，后面緊跟”()”即表示執行該函數。IIFE可以幫助我們做到：
顯而易見，這種編碼方式并沒有提供良好的機制來解決依賴管理問題。
Revealing Module
根據字面暫解釋為揭示模式，與IIFE形式類似，但是提供了一個返回值。方便集中管理公有的api，使模塊、公用api更加簡潔清晰。
// Expose module as global variable var singleton = function(){ // Inner logic function sayHello(){ console.log('Hello'); } // Expose API return { sayHello: sayHello } }()稍微注意下，上面的代碼，我們并沒有用”()”去包裹，因為關鍵字”function”并不在該行的開頭。
我們可以像下面這樣使用模塊api:
// Access module functionality singleton.sayHello(); // => Hello
當然，我們也可以以構造函數形式導出：
// Expose module as global variable var Module = function(){ // Inner logic function sayHello(){ console.log('Hello'); } // Expose API return { sayHello: sayHello } }請注意，上面函數在定義的時候并沒有執行。
我們可以這么使用它：
var module = new Module();module.sayHello(); // => Hello
與IIFE一樣，揭示模式并沒有提供良好的解決依賴管理的方案。
更多模塊化解決方案
ES6或者ES2015，自帶原生的模塊語法。
在這之前，有以下幾種常見的用于模塊化的解決方案：
AMD
AMD，Asynchronous Module Definition，異步模塊定義。AMD形式被用于瀏覽器端，使用”define”來定義模塊依賴：
//Calling define with a dependency array and a factory function define(['dep1', 'dep2'], function (dep1, dep2) { //Define the module value by returning a value. return function () {}; });CMD
CMD，Common Module Definition，通用模塊定義。該規范由國內大神玉伯提出，與AMD區別在與AMD是依賴關系前置，有該依賴就必須先加載依賴，CMD是按需加載。
// CMD define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此處略去 100 行 var b = require('./b') // 依賴可以就近書寫 b.doSomething() // ... }) // AMD 默認推薦的是 define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好 a.doSomething() // 此處略去 100 行 b.doSomething() ... })CommonJs
CommonJs在Node.js中用的較多，使用”require”來定義依賴，使用”module.exports”來定義模塊:
var dep1 = require('./dep1'); var dep2 = require('./dep2'); module.exports = function(){ // ... }UMD
UMD，Universal Module Definition，通用模塊定義?？梢杂糜跒g覽器端與Node.js端：
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['b'], factory); } else if (typeof module === 'object' && module.exports) { // Node. Does not work with strict CommonJS, but // only CommonJS-like environments that support module.exports, // like Node. module.exports = factory(require('b')); } else { // Browser globals (root is window) root.returnExports = factory(root.b); } }(this, function (b) { //use b in some fashion. // Just return a value to define the module export. // This example returns an object, but the module // can return a function as the exported value. return {}; }));System.register
System.register方式設計初衷主要是為了在ES5中能夠支持ES6模塊語法:
import { p as q } from './dep'; var s = 'local'; export function func() { return q; } export class C { }ES6 module
ES6中自帶原生的模塊語法，使用關鍵字”export”來導出模塊的公用api：
// lib.js // Export the function export function sayHello(){ console.log('Hello'); } // Do not export the function function somePrivateFunction(){ // ... }以關鍵字”import”來導入模塊：
import { sayHello } from './lib'; sayHello(); // => Hello目前各瀏覽器對ES6的支持度不一，因此我們現在需要使用編譯器，像Babel，來將ES6的代碼編譯成ES5的形式。
模塊加載器
一個模塊加載器可以理解模塊，并以固定的形式來加載模塊。
模塊加載器工作在運行時，流程大致如下：
一些比較常見的模塊加載器有：
模塊打包
模塊打包可以替換模塊加載器。
然而，相比模塊加載器，模塊打包動作是在編譯時運行的：
截止目前，比較常用的模塊打包方案有以下兩種：
總結
為了在現代js開發環境中更好的使用這些工具，你首先需要知道模塊、模塊化解決方案、模塊加載、模塊打包之前的區別。
模塊是一段封裝好的代碼，可以以公用api形式導出并在其他代碼中被加載和調用；
模塊化解決方案或者模塊化思想，實際含義是定義一個模塊的語法。由于定義語法的差異，目前常用的有AMD、CMD、CommonJS、UMD等；
模塊加載，在運行期解析和加載模塊。常見的有RequireJS、SeaJS、SystemJS和jspm；
模塊打包，其替換了模塊加載的概念，在編譯期間生成一個所有代碼整合后的bundle.js文件。常見的有Browserify和Webpack。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家武林網的支持。
新聞熱點
疑難解答
