requireJS

模块化开发之requireJS规范

require官网

require中文网

什么情况用require.js?

当一个页面中过多的<script src=""></script>，js文件加载是同步的，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长，而且如果各个模块（js）之间存在相互引用的依赖关系，引入得顺序不对就会报错，可以考虑用require.js了。

require.js的作用主要解决两个问题：

• 实现js文件的异步加载，避免网页失去响应；
• 管理模块之间的依赖性，便于代码的编写和维护。

使用方法

第一步：引入require.js

    <script src ="require.js" data-main ="main"></script>

其中data-main属性的作用是，指定网页程序的主模块，main.js文件(引入时可省略后缀)。main.js就是我们要写的js。名字自己命名的。

第二步：配置require.config,别担心，非常简单。

配置require.config就是写各模块的依赖关系而已。看实例：

    //config.js
    require.config({
    'paths': {
        'jq': '../lib/jquery-1.10.1.min',
        'idx': 'index'
    },
    'shim': {//设置依赖关系，idx就依赖于common
        'idx': ['common'],
        'common': ['jq']
    }
});

• paths 是配置路径的参数，键值对的形式，上述为例，jq是我取的别名，指向的路径是../lib/jquery-1.10.1.min，设置短路径(方便后期使用):如果是以require所在文件夹为基础路径，后面的js文件不需要后缀，（推荐这样写）。有些太短的就没必要取别名，像上面的index.js，一般放在js文件夹外的js文件才需要配置短路径。

• shim配置依赖关系，也是键值对的形式存在，其中表示，index.js依赖common.js,common.js依赖于jq。

• 总结：把需要用到的模块，先引入，再声明依赖关系就搞定了，这样传说中的config配置就做好了，接下来就是去用了。

第三步：指定网页程序的主模块，别担心，也很简单

我的主模块是main.js，名字自己命名的。

main.js示例

      //main.js-----
    requirejs(['common','moduleA','moduleB','moduleC'],function(){
        //这里的代码等common，moduleA，moduleB，moduleC模块都加载完成后执行
    });

上述代码解释：requirejs就是规范，['common','moduleA','moduleB','moduleC']使得这些模块就能异步加载，在这里是没有先后之分的。function回调可要可不要.
以上就为requireJS的一个实例。

模块化开发的优点

讲了这么多，requirejs所倡导的模块化开发，好处在哪里呢？

• 避免命名冲突
  你有没有发现，整个项目当中，再也没有出现一个全局变量？即使两个框架名字冲突了也没关系
• 更好的依赖处理
  你有没有发现，你再也没有考虑过加载顺序的问题？
• 按需加载
  更好的代码组织方式，而且你肯定没有发现，所有的JS文件的加载过程，已经变成了异步
• 面向对象编程
  最后，你还发现，用了requireJS，你的代码想不写成面相对象都难
  模块化规范与框架

1.commonJS：通用的模块规范（同步）；
模块化框架：nodejs

2.AMD：异步模块定义规范（预加载）；
模块化框架：requirejs

3.CMD：通用模块定义规范（延迟加载）。
模块化框架：seajs

官网：http://seajs.org

五分钟上手教程：http://seajs.org/docs/#quick-start