require.js 使用方法

0x01 require.js 要解决的问题

在前端开发中我们需要引入大量的js脚本，在引入过程中需要保证引入的顺序的先后性以确定不同脚本之间的依赖关系得到满足。但是网页在加载js脚本时会暂停对网页元素的渲染，为了避免这种情况的出现，一般我们可以让js脚本异步加载或者将js脚本放在HTML网页的底部引入

<script src="require.js" defer async = "true"></script>

async属性指定js脚本异步加载，IE浏览器不支持该属性但支持defer属性，所以也需要将defer属性写上。

require.js 的出现是为了解决两个问题：

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

0x02 require.js使用方法

1. 引入require.js

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

data-main属性指向的是js的入口文件（主模块），由于require.js默认加载文件和模块的后缀是js文件，因此js后缀可以省略。

2. 主模块的写法

如果主模块中没有依赖的js模块，可以直接写入js代码，但是这种写法并不规范。当主模块存在依赖模块时，我们可以使用require函数引入依赖模块。

require( [‘jquery’], function($){
      //code
      $('#id').on('click',function(e){});
});

这里在主模块中就引入了jQuery，需要注意的是引入的模块需要写入到数组中。require函数的以一个参数为引入依赖模块的名称，为数组形式。第二个参数为回调函数，其传入参数为各个模块。

3. require的配置

默认情况下，加载的模块和主模块在同一级目录下，但是如果加载的模块和主目录不再同一级目录下需要对其路径进行配置，这时可以使用require.config()函数，具体使用方法如下：

require.config({
      paths:{
              "jquery":"lib/jquery.min"
        }
});

前面我们也提到require.js加载模块时会默认将对应文件的后缀js省略掉，所以当我们传入加载的模块名称（jquery）时，它默认要加载的文件是当前目录下的“jquery.js” 文件，如果没有该文件则程序会报错。如果模块名称对应的不是同名称的文件则需要在paths中配置模块名称和文件名称及路径的对应关系。require.config()函数要写在主模块的头部。

如果加载的模块的路径统一发生了变化还可以这样写

require.config({

    baseUrl:"/js/lib",

    paths:{
          "jquery" : "jquery.min"
     }
});

如果加载远程主机上的文件可以这样写

require.config({

　　　　paths: {

　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

　　　　}

　　});

4. require.js 被加载模块的写法

被加载的模块要严格按照AMD的规范来写。如果一个模块不依赖于其他模块，那么这个模块可以这样来写：

//moduleA.js
define(function(){
      var foo = function(){
        //do something
      }
      return {
                foo:foo
      };
});

加载方法如下

require(['moduleA'], function(moduleA){
          modeulA.foo();
});

如果moduleA依赖于其他模块那么在加载模块时还需要同时加载依赖的模块

//moduleA.js
define(['mylib'], function(mylib){
          var foo = function(){
                  mylib.do();
          }
        return {
              foo:foo
        };
});

加载模块时需要先加载依赖的模块

require(['mylib','moduleA'],function(mylib,moduleA){
          moduleA.foo();
});
deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'

5. 加载非规范的模块

有些模块并不是按照AMD的规范写的，对于这类非规范的模块，我们需要首先在require.config()函数中配置好这些模块。

require.config(
        paths:{
              "moduleA":"/lib/moduleA"
        },
        shim:{
                "moduleA":{
                  deps: ['moduleB', 'moduleC'],
　　　　　exports: 'moduleA'
                  }
        }
);

shim属性用来配置不兼容的模块，其中需要对每个模块指定deps属性即依赖的其他模块，exports属性即这个模块在外部调用时的名称。

6. 插件

require.js中有各种插件，插件使用及制作过程详见requirejs的插件介绍与制作

参考
对require.js 的使用进行总结
Javascript模块化编程（三）：require.js的用法