require.js笔记

笔记参考来源：阮一峰  http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

 

1. 浏览器端的模块只能采用“异步加载”方式 ==> AMD

形式：require([module],callback)

 

2. require.js

2.1 require.js解决两个问题

　　1.实现js文件的异步加载，避免网页失去响应；

　　2.管理模块之间的依赖性，便于代码的编写和维护。

2.2 require.js的使用

2.2.1 加载js代码

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

    data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

2.2.2 主模块写法

    当主模块依赖其他模块时，采用AMD规范的require()函数

 require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
 　　　　// some code here
 });

    例如，

 require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
 　　　　// some code here
 });

    主模块代码在callback中。

2.2.3 模块的加载

    在上述代码前，还需对模块的加载行为进行自定义。采用require.config()函数

 require.config({
     baseUrl: "js/lib", //可选，不写的话默认main.js目录
     paths: {
         "jquery": "jquery.min",
         "underscore": "underscore.min",
         "backbone": "backbone.min"
     }
 });        

    当然，也可以对非本地文件进行加载。

2.2.4 AMD模块写法

    require.js加载的模块，必须得采用AMD规范。

    用一个普通的js举例，如果它不依赖于其他模块

 // math.js
 define(function (){
 　　var add = function (x,y){
 　　　　return x+y;
 　　};
 　　return {
 　　　　add: add
 　　};
 });

    如果它还依赖其它模块，则

 define(['myLib'], function(myLib){
 　　function foo(){
 　　　　myLib.doSomething();
 　　}
 　　return {
 　　　　foo : foo
 　　};
 });

    对该js的加载如下

 // main.js
 require(['math'], function (math){
     alert(math.add(1,1));
 });

    其中，第一个数组参数指明其依赖

2.2.5 加载非AMD规范的依赖

    很多库并不不符合AMD规范，以underscore和backbone为例，如果要加载它们的话，必须先定义它们的特征

 require.config({
     path: {
      ... //同上省略
     }
     shim: {
         'underscore':{
             exports: '_'
 　　 },
         'backbone': {
             deps: ['underscore', 'jquery'],
             exports: 'Backbone'
         }
     }
 });

    require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。