特點(diǎn)：異步加載規(guī)范
語(yǔ)法：
- 定義模塊
define(function () {
return module
})
define(['module1', 'module2'], function (module1, module2) {
return module
})
- 導(dǎo)入模塊
requireJs(['module1', 'module2'], function (module1, module2) {
// to do something
})
使用的標(biāo)準(zhǔn)庫(kù)requireJs
示例目錄機(jī)構(gòu)如下：
image.png
1、index.html引入模塊主文件：
<!DOCTYPE html>
<html>
<head>
<title>AMD模塊規(guī)范</title>
</head>
<body>
<!-- data-main: 表示指定主模塊文件，一定要設(shè)置！??！ -->
<script type="text/javascript" src="js/lib/require.js" data-main="js/app.js"></script>
</body>
</html>
2、編寫符合規(guī)范的自定義模塊module1.js和module2.js
// 定義一個(gè)沒有依賴的模塊
define(() => {
const logMessage = () => `這是一個(gè)沒有依賴的模塊`;
return {
logMessage
};
});
// 定義一個(gè)有依賴的模塊
// requirejs.config中配置的模塊名稱進(jìn)行模塊引入，模塊參數(shù)對(duì)應(yīng)數(shù)組順序
define('module2', ['module1'], (module1) => {
const message = '這是一個(gè)有依賴的模塊';
const showMessage = () => console.log(message, module1.logMessage());
return { showMessage };
});
3、編寫模塊的主入口文件app.js
// 這個(gè)是主模塊，其他模塊在此導(dǎo)入
// 引入模塊前需要進(jìn)行一些基礎(chǔ)配置
requirejs.config({
// baseUrl: 'js/', // 基礎(chǔ)路徑的配置，指定所有模塊的統(tǒng)一路徑
paths: {
module1: 'module/module1',
module2: 'module/module2',
/**
說明：
1、paths中key的值代表這個(gè)模塊，在其他地方使用模塊時(shí)用這個(gè)名字就可以；
2、value代碼模塊路徑，一定要省略后綴.js
*/
jquery: 'lib/jquery-3.6.0',
underscore: 'lib/underscore' // 這里將underscore中amd實(shí)現(xiàn)代碼注釋，使其成為不符合規(guī)范的模塊
},
shim: {
underscore: {
exports: '_',
// deps: ['jquery']
}
/*
為了解決沒有實(shí)現(xiàn)amd規(guī)范的模塊問題。
1、exports的值需要和該模塊實(shí)際暴露的值類型相同，比如underscore實(shí)際暴露的為對(duì)象；
2、deps是該模塊所需要的依賴。
*/
}
});
// 導(dǎo)入模塊
requirejs(['module2', 'jquery', 'underscore'], (module2, $, _) => {
module2.showMessage();
$('body').css('background', 'lightblue');
const result = _.map([1, 2, 3], item => item * 3);
console.log('result: ', result)
});
