JavaScript模塊化編程之AMD

簡單的說一下AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之後，這個回調函數才會運行。

require.js作用

• 實現js文件的異步加載，避免網頁失去響應；
• 管理模塊之間的依賴性，便於代碼的編寫和維護。

首先引入requireJS文件，並在script標籤上指定入口文件(主模塊)：

接下來需要對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;
 }
}));

對前端的技術，前端全棧技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的前端開發攻城師學習資料

知識體系已整理好，歡迎免費領取。還有視頻分享可以免費獲取。關注我，可以獲得沒有的經驗哦！

閱讀更多 前端攻城小牛 的文章

關鍵字: 超微半導體 jQuery 編程語言