JavaScript模組化程式設計之AMD
阿新 • • 發佈：2018-11-10
簡單的說一下AMD是"Asynchronous Module Definition"的縮寫，意思就是"非同步模組定義"。它採用非同步方式載入模組，模組的載入不影響它後面語句的執行。所有依賴這個模組的語句，都定義在一個回撥函式中，等到載入完成之後，這個回撥函式才會執行。
require.js作用
- 實現js檔案的非同步載入，避免網頁失去響應；
- 管理模組之間的依賴性，便於程式碼的編寫和維護。
首先引入requireJS檔案，並在script標籤上指定入口檔案(主模組)：
<head> <meta charset="UTF-8"> <title>javascript模組化程式設計</title> </head> <body> <script type="text/javascript" src="https://cdn.bootcss.com/require.js/2.3.5/require.js" defer async data-main="js/main.js"></script> </body>
接下來需要對main.js進行一些配置：
// 模組載入的配置 require.config({ // 基目錄 如果每個模組不在一個基目錄 // 不使用baseUrl直接在paths中具體指定 baseUrl: "lib", paths: { 'jquery': 'jquery', 'vue': 'vue.min', 'pagination': 'my-pager' }, // shim屬性 專門用來配置不相容的模組 每個模組要定義: // (1) exports值（輸出的變數名）表明這個模組外部呼叫時的名稱 // (2) deps陣列 表明該模組的依賴性 // 比如jq的外掛可以這樣定義 shim: { 'jquery.scroll': { deps: ['jquery'], exports: 'jQuery.fn.scroll' } } // requireJS還有一系列外掛 不再贅述 // [Plugins](https://github.com/requirejs/requirejs/wiki/Plugins) }); // 主模組依賴於其它模組，這時就需要使用AMD規範定義的require()函式 // require([modules], function (modules) { }); require(['jquery', 'vue', 'pagination'], function ($, Vue, pagination) { console.log($); console.log(Vue); console.log(pagination); });
關於自己定義符合AMD規範的模組，比如上面例子中的pagination:
(function (factory) { if (typeof exports === 'object') { // Node/CommonJS factory(require('document'), require('window')); } else if (typeof define === 'function' && define.amd) { // AMD define(factory(document, window)); } else { // Browser globals factory(document, window); } }(function (document, window) { var Test = { a: 1 } if (typeof module != 'undefined' && module.exports) { module.exports = Test; } else if (typeof define == 'function' && define.amd) { define(function () { return Test; }); } else { window.Test = Test; } }));