這篇文章帶給大家的內容是關於JavaScript模組化程式設計的詳細介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
什麼是模組化?
模組就是實現特定功能的一組方法,而模組化是將模組的程式碼創造自己的作用域,只向外部暴露公開的方法和變量,而這些方法之間高度解耦。
寫 JS 為什麼需要模組化程式設計?
當寫前端還只是處理網頁的一些表單提交,點擊交互的時候,還沒有強化JS 模組化的概念,當前端邏輯開始複雜,交互變得更多,數據量越來越龐大時,前端對JS 模組化程式的需求就越加強烈。
在很多場景中,我們需要考慮模組化:
基於上述場景,所以,目前JS 模組化主要是這幾個目的:
先給結論:JS 的模組化程式設計經歷了幾個階段:
先給結論圖:
我們知道,在ES6 之前,JS 是沒有塊作用域的,私有變數和方法的隔離主要靠函數作用域,公開變數和方法的隔離主要靠物件的屬性參考。
封裝函數
在JS 還沒有模組化規範的時候,將一些通用的、底層的功能抽像出來,獨立成一個個函數來實現模組化:
比方寫一個utils.js 工具函數檔
// utils.js function add(x, y) { if(typeof x !== "number" || typeof y !== "number") return; return x + y; } function square(x) { if(typeof x !== "number") return; return x * x; } <script></script> <script> add(2, 3); square(4); </script>
透過js 函數檔分割的方式,此時的公開函數其實是掛載到了全域物件window 下,當在別人也想定義一個叫add 函數,或是多個js 檔案合併壓縮的時候,會出現命名衝突的問題。
掛載到全域變數下:
後來我們想到透過掛載函數到全域物件字面量下的方式,利用JAVA 套件的概念,希望減輕命名衝突的嚴重性。
var mathUtils1 = { add: function(x, y) { return x + y; }, } var mathUtils2 = { add: function(x, y, z) { return x + y + z; }, } mathUtils.add(); mathUtils.square();
這種方式仍然創建了全域變量,但如果套件的路徑很長,那麼到最後引用方法可能就會以module1.subModule.subSubModule.add
的方式引用程式碼了。
IIFE
考慮模組存在私有變量,於是我們利用IIFE(立即執行表達式)建立閉包來封裝私有變數:
var module = (function(){ var count = 0; return { inc: function(){ count += 1; }, dec: function(){ count += -1; } } })() module.inc(); module.dec();
這樣私有變量對外部來說就是不可存取的,那如果模組需要引入其他依賴呢?
var utils = (function ($) { var $body = $("body"); var _private = 0; var foo = function() { ... } var bar = function () { ... } return { foo: foo, bar: bar } })(jQuery);
以上封裝模組的方式稱為:模組模式,在jQuery 時代,大量使用了模組模式:
<script></script> <script></script> <script></script> <script></script> <script></script>
jQuery 的插件必須在JQuery.js 檔案之後,檔案的載入順序被嚴格限制住,依賴越多,依賴關係越混亂,越容易出錯。
Nodejs 的出現,讓 JavaScript 能夠運作在服務端環境中,此時迫切需要建立一個標準來實現統一的模組系統,也就是後來的 CommonJS。
// math.js exports.add = function(x, y) { return x + y; } // base.js var math = require("./math.js"); math.add(2, 3); // 5 // 引用核心模块 var http = require('http'); http.createServer(...).listen(3000);
CommonJS 規定每個模組內部,module 代表目前模組,這個模組是一個對象,有id,filename, loaded,parent, children, exports 等屬性,module.exports 屬性表示目前模組對外輸出的接口,其他檔案載入該模組,其實就是讀取module.exports 變數。
// utils.js // 直接赋值给 module.exports 变量 module.exports = function () { console.log("I'm utils.js module"); } // base.js var util = require("./utils.js") util(); // I'm utils.js module 或者挂载到 module.exports 对象下 module.exports.say = function () { console.log("I'm utils.js module"); } // base.js var util = require("./utils.js") util.say();
為了方便,Node 為每個模組提供一個 exports 自由變量,指向 module.exports。這等同在每個模組頭部,有一行這樣的指令。
var exports = module.exports;
exports 和 module.exports 共享了同一個引用位址,如果直接對 exports 賦值會導致兩者不再指向同一個記憶體位址,但最終不會對 module.exports 起效。
// module.exports 可以直接赋值 module.exports = 'Hello world'; // exports 不能直接赋值 exports = 'Hello world';
CommonJS 總結:
CommonJS 規格載入模組是同步的,用於服務端,由於CommonJS 會在啟動時把內建模組載入到記憶體中,也會載入過的模組放在記憶體中。所以在 Node 環境中用同步載入的方式不會有很大問題。
另,CommonJS模組載入的是輸出值的拷貝。也就是說,外部模組輸出值變了,目前模組的導入值不會改變。
CommonJS 规范的出现,使得 JS 模块化在 NodeJS 环境中得到了施展机会。但 CommonJS 如果应用在浏览器端,同步加载的机制会使得 JS 阻塞 UI 线程,造成页面卡顿。
利用模块加载后执行回调的机制,有了后面的 RequireJS 模块加载器, 由于加载机制不同,我们称这种模块规范为 AMD(Asynchromous Module Definition 异步模块定义)规范, 异步模块定义诞生于使用 XHR + eval 的开发经验,是 RequireJS 模块加载器对模块定义的规范化产出。
AMD 的模块写法:
// 模块名 utils // 依赖 jQuery, underscore // 模块导出 foo, bar 属性 <script></script> // main.js require.config({ baseUrl: "script", paths: { "jquery": "jquery.min", "underscore": "underscore.min", } }); // 定义 utils 模块,使用 jQuery 模块 define("utils", ["jQuery", "underscore"], function($, _) { var body = $("body"); var deepClone = _.deepClone({...}); return { foo: "hello", bar: "world" } })
AMD 的特点在于:
AMD 支持兼容 CommonJS 写法:
define(function (require, exports, module){ var someModule = require("someModule"); var anotherModule = require("anotherModule"); someModule.sayHi(); anotherModule.sayBye(); exports.asplode = function (){ someModule.eat(); anotherModule.play(); }; });
SeaJS 是国内 JS 大神玉伯开发的模块加载器,基于 SeaJS 的模块机制,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.
CMD 模块的写法:
<script></script> <script> // seajs 的简单配置 seajs.config({ base: "./script/", alias: { "jquery": "script/jquery/3.3.1/jquery.js" } }) // 加载入口模块 seajs.use("./main") </script> // 定义模块 // utils.js define(function(require, exports, module) { exports.each = function (arr) { // 实现代码 }; exports.log = function (str) { // 实现代码 }; }); // 输出模块 define(function(require, exports, module) { var util = require('./util.js'); var a = require('./a'); //在需要时申明,依赖就近 a.doSomething(); exports.init = function() { // 实现代码 util.log(); }; });
CMD 和 AMD 规范的区别:
AMD推崇依赖前置,CMD推崇依赖就近:
AMD 的依赖需要提前定义,加载完后就会执行。
CMD 依赖可以就近书写,只有在用到某个模块的时候再去执行相应模块。
举个例子:
// main.js define(function(require, exports, module) { console.log("I'm main"); var mod1 = require("./mod1"); mod1.say(); var mod2 = require("./mod2"); mod2.say(); return { hello: function() { console.log("hello main"); } }; }); // mod1.js define(function() { console.log("I'm mod1"); return { say: function() { console.log("say: I'm mod1"); } }; }); // mod2.js define(function() { console.log("I'm mod2"); return { say: function() { console.log("say: I'm mod2"); } }; });
以上代码分别用 Require.js 和 Sea.js 执行,打印结果如下:
Require.js:
先执行所有依赖中的代码
I'm mod1 I'm mod2 I'm main say: I'm mod1 say: I'm mod2
Sea.js:
用到依赖时,再执行依赖中的代码
I'm main I'm mod1 say: I'm mod1 I'm mod2 say: I'm mod2
umd(Universal Module Definition) 是 AMD 和 CommonJS 的兼容性处理,提出了跨平台的解决方案。
(function (root, factory) { if (typeof exports === 'object') { // commonJS module.exports = factory(); } else if (typeof define === 'function' && define.amd) { // AMD define(factory); } else { // 挂载到全局 root.eventUtil = factory(); } })(this, function () { function myFunc(){}; return { foo: myFunc }; });
应用 UMD 规范的 JS 文件其实就是一个立即执行函数,通过检验 JS 环境是否支持 CommonJS 或 AMD 再进行模块化定义。
CommonJS 和 AMD 规范都只能在运行时确定依赖。而 ES6 在语言层面提出了模块化方案, ES6 module 模块编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 模块化这种加载称为“编译时加载”或者静态加载。
写法:
// math.js // 命名导出 export function add(a, b){ return a + b; } export function sub(a, b){ return a - b; } // 命名导入 import { add, sub } from "./math.js"; add(2, 3); sub(7, 2); // 默认导出 export default function foo() { console.log('foo'); } // 默认导入 import someModule from "./utils.js";
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
另,在 webpack 对 ES Module 打包, ES Module 会编译成 require/exports 来执行的。
JS 的模块化规范经过了模块模式、CommonJS、AMD/CMD、ES6 的演进,利用现在常用的 gulp、webpack 打包工具,非常方便我们编写模块化代码。掌握这几种模块化规范的区别和联系有助于提高代码的模块化质量,比如,CommonJS 输出的是值拷贝,ES6 Module 在静态代码解析时输出只读接口,AMD 是异步加载,推崇依赖前置,CMD 是依赖就近,延迟执行,在使用到模块时才去加载相应的依赖。
以上是JavaScript模組化程式設計的詳細介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!