在
之前的文章《淺析JavaScript中時間戳運算的方法(附程式碼)》中,給大家了解了js中時間戳運算的方法。下面這篇文章給大家怎麼使用JS給通用模組寫法,我們一起看看怎麼做。
模組化這個問題並非一開始就存在,WWW
剛問世的時候,html
,JavaScript
,CSS
(JS
和CSS
都是後來在網景被引進瀏覽器的)都是極為簡單的存在,不需要模組化。
模組化的需求是規模的產物,當web page
進化到web application
,瀏覽器端處理的邏輯越來越複雜,展現的樣式和動畫越來多,對於工程的要求也越來越高。於是模組化的需求也就產生了。模組化的意義:
元件的複用,降低開發成本與維護成本
元件單獨開發,方便分工合作
模組化遵循標準,方便自動化依賴管理,程式碼最佳化,部署
#JavaScript
長久以來被認為是簡單的腳本語言,實際上情況早就發生來變化,在最新版的 ECMA-262(ES6)
文件中強調JavaScript
是通用程式語言而不是腳本語言。腳本語言,例如shell
並不是用來完成複雜功能的,只是用來做一些自動化控制,是不需要模組化的。而用來建構複雜系統通用程式語言(例如Java
)一般都有模組的實作。
在ES6
以前,JS
語言沒有模組化,如何讓JS
不只執行在瀏覽器,能更有效的管理程式碼,
於是應運而生CommonJS
這種規範,定義了三個全域變數:
require,exports,module
require
用於引入一個模組
exports
對外暴露模組的接口,可以是任何類型
module
是這個模組本身的物件
用require
引入時取得的是這個模組對外暴露的介面(exports
)
Node.js
使用了CommonJS
規格:
var foo = require("foo"); var out = foo.sayName(); module.exports = out;
在瀏覽器端,不像Node.js
內部支援CommonJS
,如何進行模組化,於是出現了CMD
與AMD
兩種方式,其主要代表是seajs
和requirejs
,他們都定義了一個全域函數define來建立一個模組:
//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
的風格,
而AMD
用了更簡潔的依賴注入和函數回傳的方式實作模組化。
兩者除風格不同外最大區別在於加載依賴模組的方式,CMD
是懶加載,在require
時才會加載依賴,
而AMD
是預先加載,在定義模組時就提前加載好所有依賴。
我們要實作一個模組,讓它既能在seajs(CMD)
環境中引入,又能在requirejs(AMD)
環境中引入,當然也能在Node.js
(CommonJS)
中使用,另外還可以在沒有模組化的環境中用script
標籤全域引入。
先搞一個模組
var factory = function () { var moduleName = {}; return moduleName; };
當然return
輸出的可以是任何值,對象,類,其他都可以
先滿足 Node.js
或ES6
,我們可以透過全域變數module
和exports
來判斷
var factory = function () { var moduleName = {}; return moduleName; }; if (typeof module !== "undefined" && typeof exports === "object") { module.exports = factory; }
在CMD#在 ##和
AMD中,我們需要提供一個工廠函數傳入
define來定義模組,當沒有上述全域變量,且有
define全域變數時,我們認為是
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 其實也支援return 返回模組接口,所以兩者可以通用。然後還要滿足
script標籤全域引入,我們可以將模組放在
window上,為了模組內部在瀏覽器和
Node .js中都能使用全域對象,我們可以做此判斷:
var global = typeof window !== "undefined" ? window : global;我們用一個立刻執行的閉包函數將所有程式碼包含,來避免污染全域空間,並將
global物件傳入閉包函數,最後變成這樣:
(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);
注意:閉包前加上分號是為了給前一個模組填坑,分號多了沒問題,少了則語句可能會改變。然後,就能愉快的呼叫了
//Node.js var myModule = require('moduleName') //Seajs define(function(require,exports,module){ var myModule = require('moduleName') }) // Browser global <script src='moduleName.js'></script>【完】
以上是手把手教你使用JS給通用模組寫法(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!