如何使用JS給通用模塊寫法

這篇文章主要為大家展示了“如何使用JS給通用模塊寫法”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用JS給通用模塊寫法”這篇文章吧。

創(chuàng)新互聯(lián)公司主營(yíng)平輿網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā),平輿h5小程序開(kāi)發(fā)搭建,平輿網(wǎng)站營(yíng)銷推廣歡迎平輿等地區(qū)企業(yè)咨詢

模塊化這個(gè)問(wèn)題并非一開(kāi)始就存在，WWW剛剛問(wèn)世的時(shí)候，html，JavaScript，CSS（JS和CSS都是后來(lái)在網(wǎng)景被引進(jìn)瀏覽器的）都是極其簡(jiǎn)單的存在，不需要模塊化。

模塊化的需求是規(guī)模的產(chǎn)物，當(dāng)web page進(jìn)化到web application，瀏覽器端處理的邏輯越來(lái)越復(fù)雜，展現(xiàn)的樣式和動(dòng)畫越來(lái)多，對(duì)于工程的要求也就越來(lái)越高。于是模塊化的需求也就產(chǎn)生了。模塊化的意義：

  • 組件的復(fù)用，降低開(kāi)發(fā)成本和維護(hù)成本

  • 組件單獨(dú)開(kāi)發(fā)，方便分工合作

  • 模塊化遵循標(biāo)準(zhǔn)，方便自動(dòng)化依賴管理，代碼優(yōu)化，部署

JavaScript長(zhǎng)久以來(lái)被認(rèn)為是簡(jiǎn)單的腳本語(yǔ)言，實(shí)際上情況早就發(fā)生來(lái)變化，在最新版的 ECMA-262（ES6）文檔中強(qiáng)調(diào)JavaScript是通用編程語(yǔ)言而不是腳本語(yǔ)言。腳本語(yǔ)言，比如shell并不是用來(lái)完成復(fù)雜功能的，只是用來(lái)做一些自動(dòng)化控制，是不需要模塊化的。而用于構(gòu)建復(fù)雜系統(tǒng)通用編程語(yǔ)言（比如Java）一般都有模塊的實(shí)現(xiàn)。

在ES6以前，JS語(yǔ)言沒(méi)有模塊化，如何讓JS不止運(yùn)行在瀏覽器，且能更有效的管理代碼， 于是應(yīng)運(yùn)而生CommonJS這種規(guī)范，定義了三個(gè)全局變量：

require，exports，module

  • require用于引入一個(gè)模塊

  • exports對(duì)外暴露模塊的接口，可以是任何類型

  • module是這個(gè)模塊本身的對(duì)象

用require引入時(shí)獲取的是這個(gè)模塊對(duì)外暴露的接口（exports）

Node.js使用了CommonJS規(guī)范：

var foo = require("foo");
var out = foo.sayName();
module.exports = out;

在瀏覽器端，不像Node.js內(nèi)部支持CommonJS，如何進(jìn)行模塊化，于是出現(xiàn)了CMD與AMD兩種方式，其主要代表是seajs和requirejs，他們都定義了一個(gè)全局函數(shù)define來(lái)創(chuàng)建一個(gè)模塊：

//CMD
define(function (require, exports, module) {
  var foo = require("foo");
  var out = foo.sayName();
  module.exports = out;
});

//AMD
define(["foo"], function (foo) {
  var out = foo.sayName();
  return out;
});

可以看出CMD完好的保留了CommonJS的風(fēng)格， 而AMD用了一種更簡(jiǎn)潔的依賴注入和函數(shù)返回的方式實(shí)現(xiàn)模塊化。 兩者除風(fēng)格不同外最大區(qū)別在于加載依賴模塊的方式，CMD是懶加載，在require時(shí)才會(huì)加載依賴， 而AMD是預(yù)加載，在定義模塊時(shí)就提前加載好所有依賴。

我們要實(shí)現(xiàn)一個(gè)模塊，讓它既能在seajs（CMD）環(huán)境里引入，又能在requirejs（AMD）環(huán)境中引入，當(dāng)然也能在Node.js（CommonJS）中使用，另外還可以在沒(méi)有模塊化的環(huán)境中用script標(biāo)簽全局引入。

首先搞一個(gè)模塊

var factory = function () {
  var moduleName = {};
  return moduleName;
};

當(dāng)然return輸出的可以是任何值，對(duì)象，類，其他都可以

首先滿足Node.js或者ES6，我們可以通過(guò)全局變量module和exports來(lái)判斷

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
}

在CMD和AMD中，我們需要提供一個(gè)工廠函數(shù)傳入define來(lái)定義模塊，當(dāng)沒(méi)有上述全局變量，且有define全局變量時(shí)，我們認(rèn)為是AMD或CMD，可以直接將factory傳入define：

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
} else if (typeof define === "function" && (define.cmd || define.amd)) {
  define(factory);
}

注意：CMD 其實(shí)也支持 return 返回模塊接口，所以兩者可以通用。

然后還要滿足script標(biāo)簽全局引入，我們可以將模塊放在window上，為了模塊內(nèi)部在瀏覽器和Node.js中都能使用全局對(duì)象，我們可以做此判斷：

var global = typeof window !== "undefined" ? window : global;

我們用一個(gè)立刻執(zhí)行的閉包函數(shù)將所有代碼包含，來(lái)避免污染全局空間，并將global對(duì)象傳入閉包函數(shù)，最終變成這樣：

(function (global) {
  var factory = function () {
    var moduleName = {};
    return moduleName;
  };
  if (typeof module !== "undefined" && typeof exports === "object") {
    module.exports = factory;
  } else if (typeof define === "function" && (define.cmd || define.amd)) {
    define(factory);
  } else {
    global.factory = factory;
  }
})(typeof window !== "undefined" ? window : global);

注意：閉包前加上分號(hào)是為了給前一個(gè)模塊填坑，分號(hào)多了沒(méi)問(wèn)題，少了則語(yǔ)句可能發(fā)生變化。

然后，就能愉快的調(diào)用了

//Node.js
var myModule = require('moduleName')

//Seajs
define(function(require,exports,module){
  var myModule = require('moduleName')
})

// Browser global
<script src='moduleName.js'></script>

以上是“如何使用JS給通用模塊寫法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：如何使用JS給通用模塊寫法
URL鏈接：http://bm7419.com/article18/igdggp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站排名、定制開(kāi)發(fā)、ChatGPT、Google、網(wǎng)站維護(hù)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站