Requirejs之CMD模块化代码执行原理（基于浏览器的js模块化代码，服务器用nodjs即可）

墨蓝 2021-09-17 10:58 271阅读 0赞

Requirejs官方参考手册：[https://requirejs.org/docs/api.html][https_requirejs.org_docs_api.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1][]

/**
    
    * require使用指南！
    
    * 第一步：建立一个符合Require CMD模块化的标准目录结构，去官方查看！
    
    * 第二步：在html文件中指定主js文件：<script data-main="./my_modules/app.js" src="./lib/require.js"></script>
    
    * 第三步：配置requirejs.config路径;
    
    * 第四步：每一个文件都是一个模块对象，默认对象名就是文件名，要依赖哪个模板就difine(["模块名1","模块名"2...],回调函数);
    
    */
    
    //app.js主js文件代码：
    
    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};
    });

[https_requirejs.org_docs_api.html]: https://requirejs.org/docs/api.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/e40ff2c9c7614039a1de29daaa593d6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1]: /images/20210812/e322990a51eb40a4982c6d3417e91e96.png