require.js学习记录

摘要：工作方式为使用将每一个依赖加载为一个标签。然后在被浏览器加载完毕后，便会自动继承之前配置的参数。可以多带带定义键值队数据，作为配置文件来使用还可以定义依赖的关系压缩使用来进行压缩时，需要指定文件。在链接中有很好的示例，可以参看学习。

官方对requirejs的描述：
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
即在浏览器中，require.js可以作为文件的模块加载器，可以用在Node和Rhino环境中。
工作方式为：requireJS使用head.appendChild()将每一个依赖加载为一个script标签。然后等待所有的依赖加载完毕，计算出模块定义函数正确调用顺序，再依次调用它们。

（1）防止js加载阻塞页面渲染
（2）管理模块之间的依赖，便于管理和维护

（1）引入：

方式一：使用data-main

加载requirejs脚本的script标签加入了data-main属性，这个属性指定的js将在加载完reuqire.js后处理。把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名。
data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径

方式二：直接script嵌入

（2）require.config配置

在main.js中进行require.config的配置。如如下主要的配置参数：

baseUrl: 设置根目录

paths：配置模块的加载位置。可以给模块定义一个更好记的名字。还可以配置多个路径，如果远程CDN没有加载成功，则加载本地的文件。

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "user" : "js/user"   
    }
})

shim: 通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim。

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

除了可以在require.js加载完毕后，通过require.config进行配置之外，在require.js加载之前，定义一个全局的对象变量 require 来事先定义配置参数。然后在require.js被浏览器加载完毕后，便会自动继承之前配置的参数。

除了上面3个常用的配置项，还有其他的：
urlArgs：解决版本控制问题。urlArgs: "ver=0.1.2"。还可以用来实现在文件后增加随机数的方式，忽略浏览器缓存。urlArgs: new Date().getTime(),
waitSeconds: 设置加载脚本的超时时间
deps: 声明require.js加载完成后便会自动加载的模块
callback: 当deps中自动加载模块加载完成时，处罚的回调
map: map告诉RequireJS在任何模块之前，都先载入这个模块，这样别的模块依赖于css!../style/1.css这样的模块都知道怎么处理了

（3）require和define

这两个是最常用的命名。define用于定义模块。require用于加载模块及配置文件。在requirejs中一个文件就是一个模块，文件名就是该模块的ID。

define：可以多带带定义键值队数据，作为配置文件来使用；

define({

    "name":"zhangsan",

    "age":"20"

});

还可以定义依赖的关系：

(1) r.js

使用r.js来进行压缩时，需要指定build.js文件。build.js主要配置如下：

  ({
       baseUrl: "./js/pages", 　　 //相对于appDir，代表要查找js文件的起始文件夹，下文所有文件路径的定义都是基于这个baseUrl的
  
      appDir: "./", 　　 //项目根目录
      dir: "./outdir",　　 //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的）
  　　　　/* 有了dir，就不能使用out配置项了，你在编译时它有非常明确的提示 */
  　　　　/*"appDir" is not compatible with "out". Use "dir" instead. appDir is used to copy whole projects, where "out" with "baseUrl" is used to just optimize to one file.*/
  　　　　/*"appDir" 和 "out"是不兼容的，需要用"dir"代替， "appDir"是用来拷贝整个项目的，"out"和"baseUrl"仅是用来优化一个文件的*/
      modules: [
 　　　　//要优化的模块 —— 里面的配置项即各页面的 相对baseUrl路径的 省略后缀“.js”的 入口文件(入口文件 ---- 即加载页面时引入require.js的script标签上data-main属性所指定的文件)
 　　　　//该属性必不可少，因为一个程序至少需要有一个入口
         { name:"main"},
         { name:"index"} 
 　　],

     out: "index-build.js",　　//输出文件名
     name:"main",

     fileExclusionRegExp: /^(r|build).js|.*.scss$/,　　 //正则匹配过滤文件，匹配到的文件将不会被输出到输出目录去，这里过滤掉的是 r.js、build.js、*.scss三类文件
 　　optimizeCss: "standard",
 　　removeCombined: true, //如果为true，优化器将从输出目录中删除已合并的文件
 　　paths: { //各模块相对baseUrl的路径，直接从require.config的path配置中烤取即可
         "underscore": "../libs/underscore/underscore-min",
         "backbone": "../libs/backbone/backbone-min",
 　　},
     shim:{// 配置不符合AMD规范的模块，直接从require.config的shim配置中烤取即可
         "underscore": {
 　　        exports: "_"
         },
         "backbone": {
 　　        deps: ["underscore", "jquery"],
 　　        exports: "Backbone"
         },
     } 
 })

执行r.js -o build.js 即可实现压缩。
在链接https://www.cnblogs.com/rubyl... 中有很好的示例，可以参看学习。

(2) 使用gulp

安装好gulp和gulp-requirejs-optimize
gulpfile的配置如下：

var gulp = require("gulp");
var requirejsOptimize = require("gulp-requirejs-optimize");
gulp.task("rjs", function(){
    return gulp.src("src/js/*.js")
    .pipe(
        requirejsOptimize({
            optimize: "none",
            mainConfigFile: "src/config.js"
        }))
    .pipe(gulp.dest("dist/js/"));
});

(1) 加载css
加载css需要使用require-css插件(https://github.com/guybedford...
首先需要设置

map: {
  "*": {
    "css": "require-css/css" // or whatever the path to require-css is
  }
}

在define中使用就可以了

define(["css!styles/main"], function() {
  //code that requires the stylesheet: styles/main.css
});

(2) 加载其他

define([
　　　　"text!review.txt",
　　　　"image!cat.jpg"
　　　　],
　　　　function(review,cat){
　　　　　　console.log(review);
　　　　　　document.body.appendChild(cat);
　　　　}
　　);

使用text和image插件，则是允许require.js加载文本和图片文件。类似的插件还有json和mdown，用于加载json文件和markdown文件。