摘要：工作方式為使用將每一個依賴加載為一個標簽。然后在被瀏覽器加載完畢后，便會自動繼承之前配置的參數(shù)。可以多帶帶定義鍵值隊數(shù)據(jù)，作為配置文件來使用還可以定義依賴的關系壓縮使用來進行壓縮時，需要指定文件。在鏈接中有很好的示例，可以參看學習。

官方對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()將每一個依賴加載為一個script標簽。然后等待所有的依賴加載完畢，計算出模塊定義函數(shù)正確調用順序，再依次調用它們。

（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的配置。如如下主要的配置參數(shù)：

baseUrl: 設置根目錄

paths：配置模塊的加載位置。可以給模塊定義一個更好記的名字。還可以配置多個路徑，如果遠程CDN沒有加載成功，則加載本地的文件。

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

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

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

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

除了上面3個常用的配置項，還有其他的：
urlArgs：解決版本控制問題。urlArgs: "ver=0.1.2"。還可以用來實現(xiàn)在文件后增加隨機數(shù)的方式，忽略瀏覽器緩存。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：可以多帶帶定義鍵值隊數(shù)據(jù)，作為配置文件來使用；

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"僅是用來優(yōu)化一個文件的*/
      modules: [
 　　　　//要優(yōu)化的模塊 —— 里面的配置項即各頁面的 相對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，優(yōu)化器將從輸出目錄中刪除已合并的文件
 　　paths: { //各模塊相對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 即可實現(xiàn)壓縮。
在鏈接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文件。