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

短命女 2021-09-17 10:58 230阅读 0赞

官方参数手册：[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][]

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

[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]: https://img-blog.csdnimg.cn/20181228183009295.png?x-oss-process=image/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]: /images/20210812/f60e1dc792db45eba21affe4e2e949cf.png