JavaScript的模塊化規(guī)范有哪些

JavaScript的模塊化規(guī)范有哪些？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了圍場(chǎng)免費(fèi)建站歡迎大家使用！

1、Module模式

在模塊化規(guī)范形成之前，JS開發(fā)者使用Module設(shè)計(jì)模式來解決JS全局作用域的污染問題。Module模式最初被定義為一種在傳統(tǒng)軟件工程中為類提供私有和公有封裝的方法。在JavaScript中，Module模式使用匿名函數(shù)自調(diào)用 (閉包)來封裝，通過自定義暴露行為來區(qū)分私有成員和公有成員。

let myModule = (function (window) {
    let moduleName = 'module'  // private
    // public
    function setModuleName(name) {
      moduleName = name
    }
    // public
    function getModuleName() {
      return moduleName
    }
    return { setModuleName, getModuleName }  // 暴露行為
  })(window)

上面例子是Module模式的一種寫法，它通過閉包的特性打開了一個(gè)新的作用域，緩解了全局作用域命名沖突和安全性的問題。但是，開發(fā)者并不能夠用它來組織和拆分代碼，于是乎便出現(xiàn)了以此為基石的模塊化規(guī)范。

2、CommonJS

CommonJS主要用在Node開發(fā)上，每個(gè)文件就是一個(gè)模塊，沒個(gè)文件都有自己的一個(gè)作用域。通過module.exports暴露public成員。例如：

// 文件名：x.js
let x = 1;
function add() {
  x += 1;
  return x;
}
module.exports.x = x;
module.exports.add = add;

此外，CommonJS通過require()引入模塊依賴，require函數(shù)可以引入Node的內(nèi)置模塊、自定義模塊和npm等第三方模塊。

// 文件名：main.js
let xm = require('./x.js');
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

從上面代碼我們可以看出，require函數(shù)同步加載了x.js，并且返回了module.exports輸出字面量的拷貝值。

可能有人會(huì)問module.exports.x = x;不是賦值嗎，怎么肥事呢？我們說，Module模式是模塊化規(guī)范的基石，CommonJS也是對(duì)Module模式的一種封裝。我們完全可以用Module模式來實(shí)現(xiàn)上面的代碼效果：

let xModule = (function (){
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { x, add };
})();
let xm = xModule;
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

通過Module模式模擬的CommonJS原理，我們就可以很好的解釋CommonJS的特性了。因?yàn)镃ommonJS需要通過賦值的方式來獲取匿名函數(shù)自調(diào)用的返回值，所以require函數(shù)在加載模塊是同步的。然而CommonJS模塊的加載機(jī)制局限了CommonJS在客戶端上的使用，因?yàn)橥ㄟ^HTTP同步加載CommonJS模塊是非常耗時(shí)的。

3、AMD

// 定義AMD規(guī)范的模塊
define([function() {
  return 模塊
})

區(qū)別于CommonJS，AMD規(guī)范的被依賴模塊是異步加載的，而定義的模塊是被當(dāng)作回調(diào)函數(shù)來執(zhí)行的，依賴于require.js模塊管理工具庫。當(dāng)然，AMD規(guī)范不是采用匿名函數(shù)自調(diào)用的方式來封裝，我們依然可以利用閉包的原理來實(shí)現(xiàn)模塊的私有成員和公有成員：

define(['module1', 'module2'], function(m1, m2) {
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { add };
})

4、CMD

CMD 是 SeaJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。AMD 推崇依賴前置，CMD 推崇依賴就近。

define(function(require, exports, module) {
  //  同步加載模塊
  var a = require('./a');
  a.doSomething();
  // 異步加載一個(gè)模塊，在加載完成時(shí)，執(zhí)行回調(diào)
  require.async(['./b'], function(b) {
    b.doSomething();
  });
  // 對(duì)外暴露成員
  exports.doSomething = function() {};
});
// 使用模塊
seajs.use('path');

CMD集成了CommonJS和AMD的的特點(diǎn)，支持同步和異步加載模塊。CMD加載完某個(gè)依賴模塊后并不執(zhí)行，只是下載而已，在所有依賴模塊加載完成后進(jìn)入主邏輯，遇到require語句的時(shí)候才執(zhí)行對(duì)應(yīng)的模塊，這樣模塊的執(zhí)行順序和書寫順序是完全一致的。因此，在CMD中require函數(shù)同步加載模塊時(shí)沒有HTTP請(qǐng)求過程。

5、ES6 module

ES6的模塊化已經(jīng)不是規(guī)范了，而是JS語言的特性。隨著ES6的推出，AMD和CMD也隨之成為了歷史。ES6模塊與模塊化規(guī)范相比，有兩大特點(diǎn)：

  • 模塊化規(guī)范輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用。

  • 模塊化規(guī)范是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口。

模塊化規(guī)范輸出的是一個(gè)對(duì)象，該對(duì)象只有在腳本運(yùn)行完才會(huì)生成。而 ES6 模塊不是對(duì)象，ES6 module 是一個(gè)多對(duì)象輸出，多對(duì)象加載的模型。從原理上來說，模塊化規(guī)范是匿名函數(shù)自調(diào)用的封裝，而ES6 module則是用匿名函數(shù)自調(diào)用去調(diào)用輸出的成員。

關(guān)于JavaScript的模塊化規(guī)范有哪些問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

網(wǎng)站標(biāo)題：JavaScript的模塊化規(guī)范有哪些
網(wǎng)站地址：http://bm7419.com/article22/godhjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、軟件開發(fā)、電子商務(wù)、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)