AMD是"Asynchronous Module Definition"的縮寫，意思就是"非同步模塊定義"。它採用非同步方式載入模塊，模塊的載入不影響它後面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到載入完成之後，這個回調函數才會運行。 ...
JavaScript模塊化編程之AMD
requireJS基礎使用
標簽（空格分隔）： JavaScript
AMD規範
AMD是"Asynchronous Module Definition"的縮寫，意思就是"非同步模塊定義"。它採用非同步方式載入模塊，模塊的載入不影響它後面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到載入完成之後，這個回調函數才會運行。
require.js作用
- 實現js文件的非同步載入，避免網頁失去響應；
- 管理模塊之間的依賴性，便於代碼的編寫和維護。
首先引入requireJS文件，併在script標簽上指定入口文件(主模塊)：
<!DOCTYPE html>
<html lang="en">
<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>
</html>接下來需要對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;
}
}));The end... Last updated by: Jehorn, Jan 04, 2018, 10:35 AM
