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

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

我们开始require.js的使用吧
一、
1）首先我们肯定要引入require.js文件
2）设置一个属性data-main
它的值是一个js文件的路径(就是你要实现模块的那个js)
data-main属性的作用：就是设置该模块的入口文件
在这里插入图片描述
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);
    })
});

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

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

猜你喜欢