requireJS常用用法

为什么使用requirejs？

1、异步加载文件；
2、模块化开发：一个文件即是一个模块，减少全局变量。

相关方法

1、define（）定义模块

define('moduleName可选', [依赖的模块], function (
依赖的模块别名) {
    return 返回值;
});

2、require（）加载模块

require([加载模块], function (加载模块别名) {
    具体实现代码
});

加载文件

Require JS以一个相对与baseUrl的地址来加载所有的代码，有三种方式：

1. 相对于html页面；
2. 相对于data-main中引入的文件路径
3. 通过requirejs.config({baseUrl:'/js'})来配置

加载机制

1、Require JS 使用head.appendChild()将每一个依赖加载为一个script标签。

2、加载即执行，加载js文件时候就执行里面相关的代码。

相关参数

1、 paths 映射不放于baseUrl下的模块名；

requirejs.config({
      baseUrl: 'js/libs',
      paths: {
        'jquery': [
                '\\cdn.....',//cdn路径
                'js/jquery'//备选路径
            ]
      }
  });

2、 shim
对于不支持amd规范（即不使用defind和require编写）的js引入，可通过使用shim来配置。同时还可以定义相关文件之间的依赖

shim: {
    'modernizr': {
        deps: ['jquery'],  // 依赖的模块
        exports: 'Modernizr', // 全局变量作为模块对象
        init: function(){  // 初始化函数，返回的对象代替exports作为模块对象
            return $;
        }
    }
}

3、map
用来配置多个版本依赖来进行引入。

map: {
    '*': 'libs/jquery',
    'api/app2': 'libs/jquery2' // 除api/app2以外的引用jquery版本
}

4、waitSeconds

下载js等待的时间，默认为7秒，超过7秒requirejs抛出错误。如果设为0，则禁用等待超时。

5、urlArgs

下载文件时，在url后面增加额外的查询参数

urlArgs: '_=' + (new Date()).getTime() // 下载文件时，在后面增加当前时间戳

相关插件

1、text.js插件
用于加载文本文件的requirejs插件，通过ajax请求来加载文本，所以使用时会有跨域的限制，需要在paths里配置css的加载路径。

require(['text!/user.html!strip'], function (template) {
    console.log(template);
}
// 后面的参数strip表示过滤掉引入html页面中的html、head、body标签，只保留代码片段

2、css.js插件
用于加载样式文件的requirejs插件，需要在paths里配置css的加载路径。

require(['css!/style.css'], function (css) {
    console.log(css);
}