【requireJS使用心得】

【requireJS使用心得】

昨天了解了一下requireJS. 这个已经流行了一段时间了，准备在下一个项目中尝试使用它。它有以下作用：

• 声明了不同JS文件之间的依赖性
• 使我们的代码模块化
• 可以按需、并行、延时载入js库

---

一.引入

<script src="http://cdn.bootcss.com/require.js/2.2.0/require.min.js" data-main='config.js'></script>

在我们的html文件中只需要用script标签包含一个 require.js
其他的js文件在require的配置文件中加载

这里我使用的是CDN加速。大家也可以去github上下载require.js文件。
我主要要说的是 data-main 这个属性：当require.js下载完之后马上去下载 data-main属性里的JS文件，这通常都是require.js的配置文件

二. 配置文件（也就是上面的config.js）
不多说了看代码吧！

requirejs.config({
    //如果baseUrl 没有设置。那么默认baseUrl的是config.js的目录
    baseUrl : 'js',
    // paths 如果是 / 或者 .js 或者 协议Url 中的一个
    // 那么 相对于 当前加载的HTML脚本
    paths : {
        //baseUrl + paths
        first : 'first',
        jquery : '../lib/jquery.min',
        second : 'second'
    },
    shim :{
        first : {
            deps : ['jquery']
            //这里是防止define的第一个依赖没有写，在shim中的deps也可以写依赖
        },
        //如果是一个不符合规范的文件。  使用shim 的 exports将某个全局变量暴露给require.js
        second : {
            exports : 'secondFun'
            // "secondFun" 就是 second.js 里的那个函数名
        }
    }
});

    requirejs(['first', 'second'], function (t_first, t_second){
        t_first.getEle();

        t_second();
    }); 

需要注意的地方：
1.paths里面树需要加载的JS文件，属性名就是模块名，后面是路径。
JS文件的实际加载路径 = baseUrl + paths
比如 first = js/first.js
jquery = js/../lib/jquery.min.js

2.如果你并不希望使用 baseUrl + paths 的方式去组合路径加载JS文件的话，使用下面任意一种规则可以打破 baseUrl + paths 的方式

• paths 路径后面带有 .js后缀
• paths 路径以 / 开头
• paths 路径是 协议url（http,https）

3.baseUrl 的默认值是 config.js的目录

4.大家可能注意到这一段代码

shim :{
        first : {
            deps : ['jquery']
        }
      }

这里是防止define的第一个依赖没有写，在shim中的deps也可以写依赖

5.大家注意一下这里

        second : {
            exports : 'secondFun'
            // "secondFun" 就是 second.js 里的那个函数名
        }

为什么要写这个呢？ 因为 first.js和second.js 两个是有区别的 。 first.js是最理想的情况下，使用了require.js的方式定义了模块。而second.js并没有。

//first.js
define(['jquery'], function ($){
    return {
        getEle : function(){
            console.log(123);
            console.log($('#container').text());
        }
    }
});
//---------------------------------------------------
//second.js
function secondFun(){
    console.log('这是一个不符合规范的模块');
}

那我们如果不写上述代码会怎样啊?
当你使用 requirejs依赖 second的时候会出现Bug. 传到第二个函数参数的值是undefine。
所以我们需要 exports : 'secondFun' 来将依赖中的某个全局变量暴露给requirejs，secondFun就是 second.js里那个全局函数名

三.有主和无主的模块

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    myjquery: 'lib/jquery/jquery'
  }
});

requirejs(['myjquery'], function(jq) {
  alert(jq);
});

这里模块名写 myjquery在下面 requirejs依赖的时候传入 jq,这时 jq则是undefined.
因为 jquery库是一个有主的模块
它在定义的时候已经写好

define('jquery', [], function() { ... });

类似上面。你模块名也必须写jquery

无主的模块就很好理解了，在定义模块的时候只写了依赖并没有写模块的名称，所以我们加载引入模块的时候名称我们可以自拟。