requireJs使用入门

requireJS

RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范。

使用requireJS的好处

• 异步加载
• 按需加载
• 模块依赖管理
• 版本管理
  ... ...

requireJS的用法

一、加载require.js

首先是去官网下载require.js最新版本，在页面上引入

xxx.html

1. async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
2. data-main属性指定的js文件会在require.js加载成功后第一个加载，是网页的入口代码。它一般用来对requirejs进行配置，并且载入真正的程序模块。
3. require.js默认的文件后缀名是js，所以可以把main.js简写成main。

二、全局配置

main.js

require.config({
    paths : {
        "jquery" : ["https://cdn.bootcss.com/jquery/1.12.4/jquery.min", "js/jquery"],     // 如果第一个cdn文件加载失败，就会加载第二个本地文件
        "a" : "js/a",
        "b" : "js/b"
    },
    shim : {
        "bootstrap": ["jquery"],        
        "bootstrapTable": {
            deps: ["bootstrap"],         // deps数组，表明该模块的依赖性。
            exports: "bootstrapTable"    // exports值（输出的变量名），表明这个模块外部调用时的名称；
        }
    }
})

require.config 常用配置参数选项:

• baseUrl: 用于加载模块的根路径。(require会默认的将data-main指定的js为根路径)
• paths: 声明模块名称和文件路径
• shim: require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是有时候需要加载非AMD规范的js，shim参数能够帮助我们以AMD模块的方式，使用那些不符合AMD规范的模块。

三、定义模块

define方法用于定义模块，requireJS要求每个模块放在一个单独的文件里。

独立模块

如果被定义的模块是一个独立模块，不需要依赖任何其他模块，可以直接用define方法生成。

//定义对象
define({
    num: 0,
    method: function() {}
});

// 定义方法
define(function () {
    return {
        method1: function() {},
        method2: function() {},
    };
});

非独立模块

如果被定义的模块需要依赖其他模块，则define方法必须采用下面的格式。

define(['a'], function(a){
　　　　function foo(){
　　　　　　a.fn();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
});

define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。当require()函数加载上面这个模块的时候，就会先加载a.js文件。

命名模块

前面两个都是匿名模块，可以在 requirejs.config 里，使用任意一个模块名来引用它。某些库（例如jquery）已经声明了一个确定的模块名:

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

所以在 requirejs.config 里配置模块名时，只能用申明好的模块名。

自定义命名模块

define('myMod',['jquery', 'bootstrap'], function($, undefined){
　　　　var Controller = {
            method1: function() {},
            method2: function() {},
            method3: function() {}
       }
　　　　return Controller;
});

四、加载模块

require方法用于调用模块。

require( ['myMod'], function( mod ) {
    mod.method1();
});