JS模塊簡介

js模塊化，簡單說就是將系統或者功能分隔成單獨的、互不影響的代碼片段，經過嚴格定義接口，使各模塊間互不影響，且可以為其他所用。

常見的模塊化有，C中的include (.h)文件、java中的import等。

為什么JS需要模塊

很顯然，沒有模塊我們也可以實現同樣的功能，為什么我們還要使用模塊來寫js代碼呢？下面幾點是模塊化給我們帶來的一些變化：

• 抽象代碼：我們在使用模塊來調用一個api時，可以不用知道內部是如何實現的，避免去理解其中復雜的代碼；
• 封裝代碼：在不需要再次修改代碼的前提下，我們可以在模塊內部隱藏其具體實現；
• 復用代碼：一些常用的、通用的功能，以模塊來實現可以避免過多的重復代碼；
• 管理依賴：可以通過簡單的修改依賴項來管理功能的實現，而不需要去重新修改自己內部的代碼實現。
• …

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
• CMD
• CommonJs
• UMD
• System.register
• ES6

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，通用模塊定義。可以用于瀏覽器端與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的形式。

模塊加載器

一個模塊加載器可以理解模塊，并以固定的形式來加載模塊。

模塊加載器工作在運行時，流程大致如下：

• 你在瀏覽器中運行模塊加載器；
• 你告訴模塊加載器需要加載哪個主文件；
• 模塊加載器下載并解析主文件；
• 模塊加載器按需加載其他文件。

一些比較常見的模塊加載器有：

• RequireJS：以AMD風格加載模塊；
• SeaJS：以CMD風格加載模塊；
• SystemJS：以AMD, CommonJS, UMD 或者 System.register風格加載模塊；
• jspm：jspm基于SystemJS，是模塊加載器，同時也具備瀏覽器端包管理功能。

模塊打包

模塊打包可以替換模塊加載器。

然而，相比模塊加載器，模塊打包動作是在編譯時運行的：

• 使用模塊打包在編譯期生成一個js文件；(例如bundle.js)
• 在瀏覽器中加載該文件。

截止目前，比較常用的模塊打包方案有以下兩種：

• Browserify:為CommonJS模塊打包；
• Webpack: 為AMD、CommonJS、ES6模塊打包。

總結

為了在現代js開發環境中更好的使用這些工具，你首先需要知道模塊、模塊化解決方案、模塊加載、模塊打包之前的區別。

模塊是一段封裝好的代碼，可以以公用api形式導出并在其他代碼中被加載和調用；

模塊化解決方案或者模塊化思想，實際含義是定義一個模塊的語法。由于定義語法的差異，目前常用的有AMD、CMD、CommonJS、UMD等；

模塊加載，在運行期解析和加載模塊。常見的有RequireJS、SeaJS、SystemJS和jspm；

模塊打包，其替換了模塊加載的概念，在編譯期間生成一個所有代碼整合后的bundle.js文件。常見的有Browserify和Webpack。

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家VeVb武林網的支持。