一、AMD規(guī)范
- AMD(Asynchronous Module Definition，異步模塊定義)指定一種機制，在該機制下模塊和依賴可以異步加載。
語法
define(id?,dependencies?.factory)
- id：指定義中模塊的名字（可選），如果沒有提供該參數，模塊的名字 應該默認為模塊加載器請求指定的腳本的名字。
- depndencies ：當前模塊依賴的，已被模塊定義的模塊標識的數組字面量。
factory：一個需要進行實例化的函數或者對象。
示例
define('modal',['jQuery','dialog'],function(){
$('.xxx').show()
Dialog.open()
})
二、RequireJS介紹
RequireJS是一個JavaScript模塊加載器。
RequireJS遵循AMD規(guī)范，用于解決命名沖突和文件依賴的問題。
RequireJS加載模塊化腳本將提高代碼的加載速度和質量。
使用RequireJS的好處
1、聲明不同js文件之間的依賴。
2、可以按需、并行、延時載入js庫。
3、可以讓我們的代碼以模塊化的方式組織。
三、使用方法。
Demo栗子目錄結構：
目錄結構
在html中添加<script>標簽：
<script data-main="./js/app.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
data-main：配置文件(文件入口)，一般命名為config.js。
src：Requirejs地址。
配置config.js
requirejs.config({
baseUrl: 'js',
paths: {
app: 'app'
},
});
requirejs(['app'], function (app) {
app.init();
});
baseUrl ：用于加載模塊的根路徑。在配置這個屬性后，以后的文件都是在這個路徑下查找內容了。
paths：用于一些常用庫或者文件夾路徑映射，方便后面使用，省得每次都要輸入一長串路徑。（js 文件的后綴可以省略）
define ： 定義模塊。
require：加載模塊
更多請查閱官方文檔
app.js
// 因為用到了hello和hello2，所以需引入['hello','hello2']
define(['hello','hello2'], function(x,y) { //hello的參數x ，hello2的參數y
var app = {
init:function(){
x.init() //hello
y.init() //hello2
console.log('這里是app')
}
}
return app //把app返回出去，對應的config.js里面。
});
config.js
requirejs.config({
baseUrl: 'js', //用于加載模塊的根路徑。在配置這個屬性后，以后的文件都是在這個路徑下查找內容了。
paths: {
app: 'app'
},
});
requirejs(['app'], function (app) {
app.init();
});
hello.js
// 因為用到了jQuery所以需要引入
define(['jQuery'], function() {
var a = {
init:function(){
console.log($('.box').html())
console.log("hello")
}
}
return a //把a給返回出去
});
hello2.js
// 因為用到了jQuery所以需要引入
define(['jQuery'], function() {
var b = {
init:function(){
$('.box').append( "<p>段落</p>" )
console.log("hello2")
}
}
return b //把b給返回出去
});
jQuery.js 省略可自行下載
大概流程圖.png
