站長資訊網
        最全最豐富的資訊網站

        手把手教你使用JS給通用模塊寫法(代碼詳解)

        之前的文章《淺析JavaScript中時間戳運算的方法(附代碼)》中,給大家了解了js中時間戳運算的方法。下面本篇文章給大家怎么使用JS給通用模塊寫法,我們一起看看怎么做。

        手把手教你使用JS給通用模塊寫法(代碼詳解)

        模塊化這個問題并非一開始就存在,WWW剛剛問世的時候,htmlJavaScriptCSSJSCSS都是后來在網景被引進瀏覽器的)都是極其簡單的存在,不需要模塊化。

        模塊化的需求是規模的產物,當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,如何進行模塊化,于是出現了CMDAMD兩種方式,其主要代表是seajsrequirejs,他們都定義了一個全局函數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,我們可以通過全局變量moduleexports來判斷

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

        CMDAMD中,我們需要提供一個工廠函數傳入define來定義模塊,當沒有上述全局變量,且有define全局變量時,我們認為是AMDCMD,可以直接將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>

        【完】

        推薦學習:JavaScript高級教程

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 亚洲AV无码精品无码麻豆| 精品一区二区三区在线观看视频| 亚洲精品二三区| 国产2021久久精品| 国产精品一级香蕉一区| 亚洲精品无码永久中文字幕| 国产精品主播一区二区| 国产在线精品一区二区不卡| 久久99精品久久久久婷婷| 亚洲日韩欧美制服精品二区| 国产乱码伦精品一区二区三区麻豆| 99久久99这里只有免费的精品| 亚洲av无码乱码国产精品fc2| 欧美成人精品一区二区综合| 国产精品国产高清国产专区| 好属妞这里只有精品久久| 2048亚洲精品国产| 精品国产一区二区三区无码| 亚洲精品无码AV人在线播放| 亚洲а∨天堂久久精品9966| 久久精品中文字幕一区| 狠狠精品久久久无码中文字幕| 国产成人精品日本亚洲专区| 欧美精品华人在线| 久久精品国产亚洲一区二区| 国产99精品久久| 国产精品免费网站| 国产在线不卡午夜精品2021| 国产精品亚洲专区在线观看| 99精品高清视频一区二区| 2021久久国自产拍精品| 国产精品色内内在线播放| 亚洲av午夜精品一区二区三区| 精品久久久久久久久午夜福利| 91精品国产自产在线观看永久| 中文字幕久精品免费视频| 无码国模国产在线无码精品国产自在久国产 | 色婷婷久久久SWAG精品| 久久性精品| 亚洲精品午夜无码专区| 麻豆成人久久精品二区三区免费 |