前言
之前在公司用JS寫前端頁面，本來自己是一個寫後端的，但是奈何人少，只能自己也去寫了。但是自己對前端基本不懂，基本就是照着前人寫的照着抄，反正大體意思是明白的，但是出現問題了，基本上也是吭哧吭哧好幾天，也能解決，但是由於自己對前端這一套是一點都不懂，導致效率很低，而且經常返工。後來稍微學習了一波，瞭解了這個AMD規範和require.js。
因爲公司用的是這個require.js，所有這裏就好好的把這個require.js總結一下，只爲工作需要。
下面我通過三個模塊來把整個知識點穿起來。
- calculator.js：定義calculator模塊
- author.js：定義author模塊
- main.js：主模塊，依賴calculator模塊和author模塊
定義無依賴的模塊
定義無依賴的模塊語法如下：
define(function() {
return 導出的內容
})
樣例代碼：
// calculator.js
define(function() {
// 歡迎關注微信公衆號：果凍想
let add = function(x, y) {
return x + y;
};
let sub = function(x, y) {
return x - y;
};
let multi = function(x, y) {
return x * y;
};
let div = function(x, y) {
return x / y;
};
// 對外暴漏模塊
return {
add: add,
sub: sub,
multi: multi,
div: div
}
});
再來一個模塊定義，方便下面依賴引入：
// author.js
define(function() {
let name = "果凍想";
let sex = "男"
function getName() {
return name;
};
function getSex() {
return sex;
};
return {
getName: getName,
getSex: getSex
}
});
定義有依賴的模塊
定義有依賴的模塊語法如下：
define(["module1", "module2"], function(m1, m2) {
return 模塊
})
樣例代碼：
// main.js，分別依賴上面的calculator和author模塊
define([
'calculator',
'author'
], function(calculator, author) {
console.log(calculator.add(1, 1));
console.log(calculator.sub(5, 2));
console.log(calculator.multi(2, 3));
console.log(calculator.div(4, 2));
console.log(author.getName());
console.log(author.getSex());
});
使用模塊
使用require.js的第一步，是先去官方網站下載最新版本。下載後，假定把它放在js子目錄下面，就可以加載了。下載地址：Download RequireJS
<script src="js/require.js"></script>
其實，加載這個文件，也有可能會造成網頁失去相應，我們一般的做法是把這個加載語句放在網頁的底部加載；其實，還有另一個方案，可以這個樣子：
<script src="js/require.js" defer async="true" ></script>
async屬性表明這個文件需要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，所以把defer也寫上。
加載require.js以後，下一步就要加載我們自己的代碼了。
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用是指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。由於require.js默認的文件後綴名是js，所以可以把main.js簡寫成main。
這樣，我們的代碼就可以直接在瀏覽器中運行嘍。
模塊的加載
默認情況下，require.js會默認認爲模塊與data-main指定的文件在同一個目錄下，然後自動加載它們。有的時候，這些模塊都不在一個目錄下，又或我們在加載模塊時，想對模塊進行重命名，這些腫麼搞？
這些我們都可以使用require.config()方法，我們可以對模塊的加載行爲進行自定義。比如這個樣子：
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "https://xxx/jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
baseUrl是可以直接定義基目錄。
非標準模塊的加載
對於那些遵循AMD規範的模塊，使用require.js來加載，當然是非常舒服的了；即使很多流行的函數庫符合AMD規範，但是仍有很多庫並不符合，針對這些不符合的庫，我們該如何使用呢？
針對這些不符合AMD規範的模塊，需要使用時，仍是需要在require.config中進行配置。require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外，還有一個shim屬性，專門用來配置不兼容的模塊，具體配置字段說明如下：
- exports值（輸出的變量名），表明這個模塊外部調用時的名稱；
- deps數組，表明該模塊的依賴性。
比如，jQuery的插件可以這樣引入：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
總結
好了，關於AMD和CommonJS就總結到這裏了，希望對大家有幫助。