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};
});

猜你喜欢

转载自blog.csdn.net/weixin_43343144/article/details/85329875
今日推荐