摘要：工作方式為使用將每一個(gè)依賴加載為一個(gè)標(biāo)簽。然后在被瀏覽器加載完畢后，便會(huì)自動(dòng)繼承之前配置的參數(shù)?？梢远鄮Фx鍵值隊(duì)數(shù)據(jù)，作為配置文件來使用還可以定義依賴的關(guān)系壓縮使用來進(jìn)行壓縮時(shí)，需要指定文件。在鏈接中有很好的示例，可以參看學(xué)習(xí)。

官方對(duì)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環(huán)境中。
工作方式為：requireJS使用head.appendChild()將每一個(gè)依賴加載為一個(gè)script標(biāo)簽。然后等待所有的依賴加載完畢，計(jì)算出模塊定義函數(shù)正確調(diào)用順序，再依次調(diào)用它們。

（1）防止js加載阻塞頁面渲染
（2）管理模塊之間的依賴，便于管理和維護(hù)

（1）引入：

方式一：使用data-main

加載requirejs腳本的script標(biāo)簽加入了data-main屬性，這個(gè)屬性指定的js將在加載完reuqire.js后處理。把require.config的配置加入到data-main后，就可以使每一個(gè)頁面都使用這個(gè)配置，然后頁面中就可以直接使用require來加載所有的短模塊名。
data-main還有一個(gè)重要的功能，當(dāng)script標(biāo)簽指定data-main屬性時(shí)，require會(huì)默認(rèn)的將data-main指定的js為根路徑

方式二：直接script嵌入

（2）require.config配置

在main.js中進(jìn)行require.config的配置。如如下主要的配置參數(shù)：

baseUrl: 設(shè)置根目錄

paths：配置模塊的加載位置?？梢越o模塊定義一個(gè)更好記的名字。還可以配置多個(gè)路徑，如果遠(yuǎn)程CDN沒有加載成功，則加載本地的文件。

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

shim: 通過require加載的模塊一般都需要符合AMD規(guī)范即使用define來申明模塊，但是部分時(shí)候需要加載非AMD規(guī)范的js，這時(shí)候就需要用到另一個(gè)功能：shim。

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

除了可以在require.js加載完畢后，通過require.config進(jìn)行配置之外，在require.js加載之前，定義一個(gè)全局的對(duì)象變量 require 來事先定義配置參數(shù)。然后在require.js被瀏覽器加載完畢后，便會(huì)自動(dòng)繼承之前配置的參數(shù)。

除了上面3個(gè)常用的配置項(xiàng)，還有其他的：
urlArgs：解決版本控制問題。urlArgs: "ver=0.1.2"。還可以用來實(shí)現(xiàn)在文件后增加隨機(jī)數(shù)的方式，忽略瀏覽器緩存。urlArgs: new Date().getTime(),
waitSeconds: 設(shè)置加載腳本的超時(shí)時(shí)間
deps: 聲明require.js加載完成后便會(huì)自動(dòng)加載的模塊
callback: 當(dāng)deps中自動(dòng)加載模塊加載完成時(shí)，處罰的回調(diào)
map: map告訴RequireJS在任何模塊之前，都先載入這個(gè)模塊，這樣別的模塊依賴于css!../style/1.css這樣的模塊都知道怎么處理了

（3）require和define

這兩個(gè)是最常用的命名。define用于定義模塊。require用于加載模塊及配置文件。在requirejs中一個(gè)文件就是一個(gè)模塊，文件名就是該模塊的ID。

define：可以多帶帶定義鍵值隊(duì)數(shù)據(jù)，作為配置文件來使用；

define({

    "name":"zhangsan",

    "age":"20"

});

還可以定義依賴的關(guān)系：

(1) r.js

使用r.js來進(jìn)行壓縮時(shí)，需要指定build.js文件。build.js主要配置如下：

  ({
       baseUrl: "./js/pages", 　　 //相對(duì)于appDir，代表要查找js文件的起始文件夾，下文所有文件路徑的定義都是基于這個(gè)baseUrl的
  
      appDir: "./", 　　 //項(xiàng)目根目錄
      dir: "./outdir",　　 //輸出目錄，全部文件打包后要放入的文件夾（如果沒有會(huì)自動(dòng)新建的）
  　　　　/* 有了dir，就不能使用out配置項(xiàng)了，你在編譯時(shí)它有非常明確的提示 */
  　　　　/*"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"是用來拷貝整個(gè)項(xiàng)目的，"out"和"baseUrl"僅是用來優(yōu)化一個(gè)文件的*/
      modules: [
 　　　　//要優(yōu)化的模塊 —— 里面的配置項(xiàng)即各頁面的 相對(duì)baseUrl路徑的 省略后綴“.js”的 入口文件(入口文件 ---- 即加載頁面時(shí)引入require.js的script標(biāo)簽上data-main屬性所指定的文件)
 　　　　//該屬性必不可少，因?yàn)橐粋€(gè)程序至少需要有一個(gè)入口
         { name:"main"},
         { name:"index"} 
 　　],

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

     fileExclusionRegExp: /^(r|build).js|.*.scss$/,　　 //正則匹配過濾文件，匹配到的文件將不會(huì)被輸出到輸出目錄去，這里過濾掉的是 r.js、build.js、*.scss三類文件
 　　optimizeCss: "standard",
 　　removeCombined: true, //如果為true，優(yōu)化器將從輸出目錄中刪除已合并的文件
 　　paths: { //各模塊相對(duì)baseUrl的路徑，直接從require.config的path配置中烤取即可
         "underscore": "../libs/underscore/underscore-min",
         "backbone": "../libs/backbone/backbone-min",
 　　},
     shim:{// 配置不符合AMD規(guī)范的模塊，直接從require.config的shim配置中烤取即可
         "underscore": {
 　　        exports: "_"
         },
         "backbone": {
 　　        deps: ["underscore", "jquery"],
 　　        exports: "Backbone"
         },
     } 
 })

執(zhí)行r.js -o build.js 即可實(shí)現(xiàn)壓縮。
在鏈接https://www.cnblogs.com/rubyl... 中有很好的示例，可以參看學(xué)習(xí)。

(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...
首先需要設(shè)置

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文件。