require.js的使用(js模块化)

本是古典何须时尚 2022-05-10 13:52 124阅读 0赞

为什么我们要使用requir.js呢  
在我们写页面的时候js的时候通常简简单单的页面都要引入好几个js文件甚至大项目要引入十几个几十个，通常会很乱也不好维护  
优点  
1.模块化方便管理  
2.压缩  
缺点(其实也说不上缺点)  
1.小公司，不会自己去开发前端插件，而都是拿来插件就用的  
2.非nodejs开发，或非游戏开发…

我们开始require.js的使用吧  
一、  
1）首先我们肯定要引入require.js文件  
2）设置一个属性data-main  
它的值是一个js文件的路径(就是你要实现模块的那个js)  
data-main属性的作用：就是设置该模块的入口文件  
![在这里插入图片描述][70]  
comment.js就是我要实现模块的js文件，所以我引入它

二、

// 1.配置模块
    require.config({
        // 1.1申明模块
        // 申明你要引入的js文件
        paths : {
            // 对象的方式   键值对  键名字  值是路径 (路径最后面不能带.js)
            // 名字可以随便取  最好是有语义化
            "jq" : "jquery/jquery",
            "template" : "art-template/template-web",
            "base" : "base",
            "index" : "index",
            "bootstrap" : "bootstrap/js/bottstrap"
        },
        // 1.2声明js之间的依赖关系 
        // 比如  我要引入base.js  但是我还需要bootstrap
        // 如果一个依赖多个js就在["","",""....]这样的形式关联
        shim : {
            "base" : {
                // deps声明该模块依赖哪些模块
                deps : ["bootstrap"]
            },
            "index" : {
                deps : ["jq", "base", "bootstrap"]
            }
        }
    });
    // 2.引入模块
    // 使用require.js的一个函数来实现
    // 函数require（模块的数组，实现功能的回调函数） ----回调到函数参数要和模块数组一一对应
    // 模块数组中的每个模块的名字是从paths声明的时候拿到的
    require(["jq", "template", "base", "index",  "bootstrap"], function($,template,base,index, bootstrap) {
        $(function() {
            // 这里面就是你要实现功能的地方
            // 名字你是哪个模块就使用哪个模块
            console.log(1);
        })
    });

这是个人的使用方法 如果有错误还请君在下方评论  
想看更多请看[我的博客][Link 1]

推荐[纯css画各种图形，包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等][css]

[70]: /images/20220505/a927ca97ad1a418bbd3e4b68f5b1dff2.png
[Link 1]: https://blog.csdn.net/qq_40428678
[css]: https://blog.csdn.net/qq_40428678/article/details/81269391