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

这是个人的使用方法 如果有错误还请君在下方评论

想看更多请看我的博客

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