各位開發專案的時候引用JS都會遇到以下的情景

產生AMD規範的背景
因為使用各種外掛，或者團隊協同合作，產生多個js檔案，
假如使用的JQ外掛，則必須先引用jquery庫才能夠正常執行，
JS檔案之間強依賴關係，讓我們不敢動檔案的引入順序。
並且，在渲染頁面的過程中，同步讀取JS檔案會堵塞整個頁面，
這對網站的效能起到很大的影響，因此，我們需要非同步載入JS檔案。
AMD規範
AMD規範全稱為Asynchronous Moudle Definition,即非同步模組載入機制。
AMD很短也很簡單，但它卻完整描述了模組的定義，依賴關係，引用關係以及載入機制。
從它被requireJS，NodeJs，Dojo，JQuery使用也可以看出它具有很大的價值，
JQuery也採用了AMD規範

//Jquery-2.1.0 原始碼
if ( typeof define === “function” && define.amd ) {
define( “jquery”, [], function() {
return jQuery;
});
}
AMD規範簡單到只有一個API，即define函式
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中：
module-name: 模組標識，可以省略。
array-of-dependencies: 所依賴的模組，可以省略。
module-factory-or-object: 模組的實現，或者一個JavaScript物件。
舉個例子：
define( “jquery”, [], function() {
return jQuery;
});
採用AMD規範的RequireJS
RequireJS採用AMD規範，讓我們在使用過程中感受到了模組化的便利，
引入檔案時，再不需要按照固定順序，只需要定義好模組之間的依賴關係即可
1.使用©npm安裝Requirejs
cnpm install requirejs
注意：requirejs是連起來的，中間沒有點，請注意防偽
2.引入Requirejs

data-main屬性的作用是，指定網頁程式的主模組。
這個檔案會第一個被require.js載入。
由於require.js預設的檔案字尾名是js，所以可以把main.js簡寫成main。
在main.js裡面，引用其他js檔案即可,
**補充：**假設index.js是臨時工寫的，他不符合AMD規範，我們就需要在require.config裡傳入的物件裡面的shim屬性進行配置

//index.js
//這是不符合AMD規範的
KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((this))
})
//下面寫法就符合AMD規範
// define(‘index’,[‘jquery’],function(){
// KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((this))
// })
// })
因此，在main.js就需要這樣寫
require.config({
//類似base標籤，全域性修改起始路徑
　 //baseUrl: “js/lib”,
// 指明模組路徑
paths:{
‘index’:‘lib/index’
},
// 相容非AMD規範的模組
shim:{
‘index’:{
// 寫上該模組的依賴,沒有則為空
deps:[‘jquery’],
// 將改造好的模組輸出出來
export:‘index’
}
}

})

//主入口檔案
require([‘index’,‘jquery’],function(_,KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log()
})
如果你希望你的程式碼直接使用，獲取相容AMD規範，可以採取下列寫法
//相容AMD模組
if(typeof defined == “function” && define.amd){
define(“index”,[‘jquery-2.1.0’],function(){
alert(‘hello world’);
console.log(KaTeX parse error: Expected 'EOF', got '}' at position 17: …".baba")); }̲) return } …(".baba"));
}