JS模块化编程之AMD模型实现原理（Requirejs浏览器模型，nodejs服务器模型）

官方参数手册：https://requirejs.org/docs/api.html

 

//在html页面的最下面添加这段代码即可！
<script data-main="./my_modules/app.js" src="./lib/require.js"></script>

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