JS模块化编程之AMD模型实现原理(Requirejs浏览器模型,nodejs服务器模型)
官方参数手册: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};
});