Javarscript中模塊、加載與捆綁的示例分析

這篇文章給大家分享的是有關Javarscript中模塊、加載與捆綁的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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模塊打包。
  

感謝各位的閱讀！關于“Javarscript中模塊、加載與捆綁的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！