javascript模塊化的簡(jiǎn)介

這篇文章將為大家詳細(xì)講解有關(guān)javascript模塊化的簡(jiǎn)介，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

模塊化在項(xiàng)目中十分的重要，一個(gè)復(fù)雜的項(xiàng)目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費(fèi)時(shí)又耗力。但是引用別人編寫模塊的前提是要有統(tǒng)一的“打開姿勢(shì)”，如果每個(gè)人有各自的寫法，那么肯定會(huì)亂套，下面將介紹一下。

一:模塊化進(jìn)程一：script標(biāo)簽

這是最原始的 JavaScript 文件加載方式，如果把每一個(gè)文件看做是一個(gè)模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在 window 對(duì)象中，不同模塊的接口調(diào)用都是一個(gè)作用域中，一些復(fù)雜的框架，會(huì)使用命名空間的概念來(lái)組織這些模塊的接口。

缺點(diǎn):

1、污染全局作用域

2、開發(fā)人員必須主觀解決模塊和代碼庫(kù)的依賴關(guān)系

3、文件只能按照script標(biāo)簽的書寫順序進(jìn)行加載

4、在大型項(xiàng)目中各種資源難以管理，長(zhǎng)期積累的問題導(dǎo)致代碼庫(kù)混亂不堪

二:模塊化進(jìn)程二：CommonJS規(guī)范

該規(guī)范的核心思想是允許模塊通過require方法來(lái)同步加載所要依賴的其他模塊，然后通過 exports 或 module.exports 來(lái)導(dǎo)出需要暴露的接口。

require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;

優(yōu)點(diǎn)：

1、簡(jiǎn)單并容易使用

2、服務(wù)器端模塊便于重用

缺點(diǎn):

1、同步的模塊加載方式不適合在瀏覽器環(huán)境中，同步意味著阻塞加載，瀏覽器資源是異步加載的

2、不能非阻塞的并行加載多個(gè)模塊

module.exports與exports的區(qū)別

1、exports 是指向的 module.exports 的引用

2、module.exports 初始值為一個(gè)空對(duì)象 {}，所以 exports 初始值也是 {}

3、require() 返回的是 module.exports 而不是 exports

exports示例：

// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
 return r * r * Math.PI;
}

module.exports示例：

// app.js
var area = require('./area');
console.log(area(4));
// area.js
module.exports = function(r){
 return r * r * Math.PI;
}

錯(cuò)誤的情況：

// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
 return r * r * Math.PI;
}

其實(shí)是對(duì) exports 進(jìn)行了覆蓋，也就是說(shuō) exports 指向了一塊新的內(nèi)存（內(nèi)容為一個(gè)計(jì)算圓面積的函數(shù)），也就是說(shuō) exports 和 module.exports 不再指向同一塊內(nèi)存，也就是說(shuō)此時(shí) exports 和 module.exports 毫無(wú)聯(lián)系，也就是說(shuō) module.exports 指向的那塊內(nèi)存并沒有做任何改變，仍然為一個(gè)空對(duì)象{}，也就是說(shuō)area.js導(dǎo)出了一個(gè)空對(duì)象，所以我們?cè)?app.js 中調(diào)用 area(4) 會(huì)報(bào) TypeError: object is not a function 的錯(cuò)誤。

總結(jié)：當(dāng)我們想讓模塊導(dǎo)出的是一個(gè)對(duì)象時(shí)， exports 和 module.exports 均可使用（但 exports 也不能重新覆蓋為一個(gè)新的對(duì)象），而當(dāng)我們想導(dǎo)出非對(duì)象接口時(shí)，就必須也只能覆蓋 module.exports 。

三:模塊化進(jìn)程三：AMD規(guī)范

由于瀏覽器端的模塊不能采用同步的方式加載，會(huì)影響后續(xù)模塊的加載執(zhí)行，因此AMD(Asynchronous Module Definition異步模塊定義)規(guī)范誕生了。

AMD標(biāo)準(zhǔn)中定義了以下兩個(gè)API

1、require([module], callback);
2、define(id, [depends], callback);

require接口用來(lái)加載一系列模塊，define接口用來(lái)定義并暴露一個(gè)模塊。

示例：

define("module", ["dep1", "dep2"], function(d1, d2){
 return someExportedValue;
});
require(["module", "../file"], function(module, file){ /* ... */ });

優(yōu)點(diǎn)：

1、適合在瀏覽器環(huán)境中異步加載模塊

2、可以并行加載多個(gè)模塊

缺點(diǎn)：

1、提高了開發(fā)成本，代碼的閱讀和書寫比較困難，模塊定義方式的語(yǔ)義不順暢

2、不符合通用的模塊化思維方式，是一種妥協(xié)的實(shí)現(xiàn)

四:模塊化進(jìn)程四：CMD規(guī)范

CMD(Common Module Definition)規(guī)范和AMD很相似，盡量保持簡(jiǎn)單，并與CommonJS和Node.js的 Modules 規(guī)范保持了很大的兼容性。在CMD規(guī)范中，一個(gè)模塊就是一個(gè)文件。

示例：

define(function(require, exports, module){
 var $ = require('jquery');
 var Spinning = require('./spinning');
 exports.doSomething = ...
 module.exports = ...
})

優(yōu)點(diǎn)：

1、依賴就近，延遲執(zhí)行

2、可以很容易在 Node.js 中運(yùn)行

缺點(diǎn)：

1、依賴 SPM 打包，模塊的加載邏輯偏重

AMD和CMD的區(qū)別

AMD和CMD起來(lái)很相似，但是還是有一些細(xì)微的差別，讓我們來(lái)看一下他們的區(qū)別在哪里：

1、對(duì)于依賴的模塊，AMD是提前執(zhí)行，CMD是延遲執(zhí)行。

2、AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個(gè)模塊的時(shí)候再去require?？创a：

// AMD
define(['./a', './b'], function(a, b){ // 依賴必須一開始就寫好
  a.doSomething()  
  // 此處略去 100 行
  b.doSomething()  
  ...
});
// CMD
define(function(require, exports, module){
  var a = require('./a')  
  a.doSomething()  
  // 此處略去 100 行
  var b = require('./b')
  // 依賴可以就近書寫
  b.doSomething()
  // ...
});

3、AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分，推崇職責(zé)單一。

五:模塊化進(jìn)程五：ES6模塊化

EcmaScript6標(biāo)準(zhǔn)增加了JavaScript語(yǔ)言層面的模塊體系定義。ES6 模塊的設(shè)計(jì)思想，是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運(yùn)行時(shí)確定這些東西。

在 ES6 中，我們使用export關(guān)鍵字來(lái)導(dǎo)出模塊，使用import關(guān)鍵字引用模塊。需要說(shuō)明的是，ES6的這套標(biāo)準(zhǔn)和目前的標(biāo)準(zhǔn)沒有直接關(guān)系，目前也很少有JS引擎能直接支持。因此Babel的做法實(shí)際上是將不被支持的import翻譯成目前已被支持的require。

盡管目前使用import和require的區(qū)別不大(本質(zhì)上是一回事)，但依然強(qiáng)烈推薦使用import關(guān)鍵字，因?yàn)橐坏㎎S引擎能夠解析ES6的import關(guān)鍵字，整個(gè)實(shí)現(xiàn)方式就會(huì)和目前發(fā)生比較大的變化。如果目前就開始使用import關(guān)鍵字，將來(lái)代碼的改動(dòng)會(huì)非常小。

示例：

import "jquery";
export functiondoStuff(){}
module "localModule" {}

優(yōu)點(diǎn)：

1、容易進(jìn)行靜態(tài)分析

2、面向未來(lái)的 EcmaScript 標(biāo)準(zhǔn)

缺點(diǎn)：

1、原生瀏覽器端還沒有實(shí)現(xiàn)該標(biāo)準(zhǔn)

2、全新的命令字，新版的 Node.js才支持

關(guān)于“javascript模塊化的簡(jiǎn)介”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。