JS模組化程式設計之AMD模型實現原理(Requirejs瀏覽器模型,nodejs伺服器模型)
阿新 • • 發佈:2018-12-29
官方引數手冊:https://requirejs.org/docs/api.html
/** * require使用指南! * 第一步:建立一個符合Require CMD模組化的標準目錄結構,去官方檢視! * 第二步:在html檔案中指定主js檔案:<script data-main="./my_modules/app.js" src="./lib/require.js"></script> * 第三步:配置requirejs.config路徑; * 第四步:每一個檔案都是一個模組物件,預設物件名就是檔名,要依賴哪個模板就difine(["模組名1","模組名"2...],回撥函式); * * */ requirejs.config({ baseUrl:'./', //注:路徑後面不能加.js,因為系統自動加上.js的。 paths: { require001:'my_modules/require001', require002:'my_modules/require002', jquery:'lib/jquery-3.3.1' } }); // Start the main app logic. requirejs(['require001', 'require002', 'jquery' ], function (require001,require002,$) { require001.test001(); require002.test002(); $("body").css("background","red"); });
/**
* require001檔案程式碼,傳入模組物件require002,在回撥函式引數也必須指定require002(或別名,一一對應);
*/
define(["require002"
], function(require002) {
function test001() {
console.log("test");
require002.test002();
}
return {test001};
});
/** * require002檔案程式碼,不傳入任何模組引數的模組! */ define(function() { function test002() { console.log("test002"); } return {test002}; });