特點：異步加載規(guī)范
語法：
- 定義模塊
define(function () {
return module
})
define(['module1', 'module2'], function (module1, module2) {
return module
})
- 導入模塊
requireJs(['module1', 'module2'], function (module1, module2) {
// to do something
})
使用的標準庫requireJs
示例目錄機構如下：
image.png
1留拾、index.html引入模塊主文件：
<!DOCTYPE html>
<html>
<head>
<title>AMD模塊規(guī)范</title>
</head>
<body>
<!-- data-main: 表示指定主模塊文件傅联，一定要設置５省！喂饥！ -->
<script type="text/javascript" src="js/lib/require.js" data-main="js/app.js"></script>
</body>
</html>
2耳标、編寫符合規(guī)范的自定義模塊module1.js和module2.js
// 定義一個沒有依賴的模塊
define(() => {
const logMessage = () => `這是一個沒有依賴的模塊`;
return {
logMessage
};
});
// 定義一個有依賴的模塊
// requirejs.config中配置的模塊名稱進行模塊引入，模塊參數對應數組順序
define('module2', ['module1'], (module1) => {
const message = '這是一個有依賴的模塊';
const showMessage = () => console.log(message, module1.logMessage());
return { showMessage };
});
3扰柠、編寫模塊的主入口文件app.js
// 這個是主模塊，其他模塊在此導入
// 引入模塊前需要進行一些基礎配置
requirejs.config({
// baseUrl: 'js/', // 基礎路徑的配置疼约，指定所有模塊的統一路徑
paths: {
module1: 'module/module1',
module2: 'module/module2',
/**
說明：
1卤档、paths中key的值代表這個模塊，在其他地方使用模塊時用這個名字就可以程剥；
2劝枣、value代碼模塊路徑，一定要省略后綴.js
*/
jquery: 'lib/jquery-3.6.0',
underscore: 'lib/underscore' // 這里將underscore中amd實現代碼注釋织鲸，使其成為不符合規(guī)范的模塊
},
shim: {
underscore: {
exports: '_',
// deps: ['jquery']
}
/*
為了解決沒有實現amd規(guī)范的模塊問題舔腾。
1、exports的值需要和該模塊實際暴露的值類型相同搂擦，比如underscore實際暴露的為對象稳诚；
2、deps是該模塊所需要的依賴瀑踢。
*/
}
});
// 導入模塊
requirejs(['module2', 'jquery', 'underscore'], (module2, $, _) => {
module2.showMessage();
$('body').css('background', 'lightblue');
const result = _.map([1, 2, 3], item => item * 3);
console.log('result: ', result)
});
