1角寸、概述
requirejs 的相關(guān)說明：
RequireJS是一個非常小巧的JavaScript模塊載入框架殴蓬，是AMD規(guī)范最好的實現(xiàn)者之一鸟款。最新版本的RequireJS壓縮后只有14K私股，堪稱非常輕量割捅。它還同時可以和其他的框架協(xié)同工作，使用RequireJS可以提升前端代碼質(zhì)量璧榄。
主要特點：
- 異步加載模塊
- 按依賴順序加載
- 模塊依賴前置
2特漩、define 和 require
在整個require中，主要的方法為：require和define
（1）define定義模塊
函數(shù)方法：
define(id?, dependencies?, factory)
總共有三個參數(shù)：id 定義的模塊名字骨杂，一般在config 中會定義涂身；dependencies為需要的依賴模塊；factory為定義的模塊搓蚪。其中factory 為必填蛤售，另外兩個為非必填項。
根據(jù)上面的參數(shù)配置可以看出妒潭，define 總共分為兩種悴能，第一種為獨立模塊，不依賴其他模塊雳灾。第二種為非獨立模塊漠酿，需要依賴其他模塊。
注：define定義的模塊可以返回任何值谎亩，不限于對象记靡。
獨立模塊
一種通過一個對象簡易定義：
define({
name: "aimee",
method1: function() {},
method2: function() {}
})
*注：這樣定義的對象如果被多處引用谈竿，那么引用的地方會共享這個對象的引用。
另一種通過一個函數(shù)來定義副本對象模塊：
define(function () {
//Do setup work here
return {
name: "aimee",
method1: function() {},
method2: function() {}
}
})
這種自由度更高摸吠，可以在函數(shù)中處理其他邏輯。
非獨立模塊
需要引入依賴模塊嚎花，在其他模塊加載完寸痢，定義自己的模塊，此時返回的method方法中包含模塊1 和模塊2的函數(shù)的調(diào)用紊选。
define(['module1', 'module2'], function(m1, m2) {
return {
method: function() {
m1.methodA();
m2.methodB();
}
}
})
當(dāng)定義多個時啼止，可以通過function 函數(shù)里接受一個require默認(rèn)參數(shù)來處理。
define(
[ 'dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],
function(dep1, dep2, dep3, dep4, dep5, dep6, dep7, dep8){
...
}
);
可以這樣寫
define(
function (require) {
var dep1 = require('dep1'),
dep2 = require('dep2'),
dep3 = require('dep3'),
dep4 = require('dep4'),
dep5 = require('dep5'),
dep6 = require('dep6'),
dep7 = require('dep7'),
dep8 = require('dep8');
...
}
})
（2）require 調(diào)用模塊
通過define定義模塊后兵罢，可以使用require來調(diào)用模塊献烦。
require(dependencies?, factory, errorCallback)
require的參數(shù)有：dependencies 為依賴模塊，非必填卖词；factory 處理函數(shù)巩那，必填;errorCallback 為 錯誤的回調(diào)，非必填此蜈；
require(
['foo', 'bar'],
function ( foo, bar ) {
foo.doSomething();
bar.doSomething();
}即横，
function(err){
console.log(err)
}
);
上述例子，在foo 和 bar 模塊加載完成后裆赵，再在函數(shù)中執(zhí)行foo 和 bar 的方法,如果有錯誤則到錯誤的回調(diào)函數(shù)中东囚，并接受一個error對象作為參數(shù)。
全局error事件監(jiān)聽战授，所有沒有被上面的方法捕獲的錯誤页藻，都會被觸發(fā)這個監(jiān)聽函數(shù)。
requirejs.onError = function (err) {
// ...
};
define中require異步加載
例子中植兰，define定義了一個模塊份帐，其中foobar 需要依賴 foo 和bar 模塊的方法，由于require 為異步钉跷，此時return 的結(jié)果可以通過isReady 來判斷是否加載完成弥鹦。
define(function ( require ) {
var isReady = false, foobar;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
foobar = foo() + bar();
});
return {
isReady: isReady,
foobar: foobar
};
});
可以用過promise 來實現(xiàn)
define(function ( require ) {
var obj;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
obj.resolve({foobar:foo() + bar()});
});
return obj.promise()
});
上面代碼返回一個promise對象，可以在該對象的then方法爷辙，指定下一步的動作彬坏。
小結(jié)
require 和 define 函數(shù)內(nèi)部機制差不多，不一樣的地方是 define 的回調(diào)函數(shù)需要有 return 語句返回模塊對象膝晾，這樣 define 定義的模塊才能被其他模塊引用栓始；require 的回調(diào)函數(shù)不需要 return 語句。
3血当、requirejs config 配置
paths：
可以配置模塊的引用路徑幻赚，可以本地相對路徑禀忆，也可以是外部路徑，可以提供多個路徑落恼，當(dāng)?shù)谝粋€失敗時箩退，會使用第二個路徑。
簡單配置如下
require.config({
paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});
baseUrl：
baseUrl 指定了一個目錄佳谦，然后requirejs基于這個目錄來尋找依賴的模塊戴涝。
可以通過config 來配置，也可以通過引入requirejs 文件的data-main屬性定義钻蔑。
shim:
用于配置在腳本/模塊外面并沒有使用RequireJS的函數(shù)依賴并且初始化函數(shù)啥刻。假設(shè)underscore并沒有使用 RequireJS定義，但是你還是想通過RequireJS來使用它咪笑，那么你就需要在配置中把它定義為一個shim可帽。
<script src="js/require.js" data-main="js/main.js"></script>
或者
requirejs.config({
baseUrl: 'js'
});
4、插件
requirejs 提供多種插件窗怒，具體插件詳情可以查看文檔 插件類型
define([
'backbone',
'text!templates.html'
], function( Backbone, template ){
// ...
});
以上為text 插件映跟，通過在模塊名前添加text!來指定插件類型，在回調(diào)函數(shù)中能夠通過template來獲取模板的內(nèi)容兜粘，格式為字符串申窘。
5、優(yōu)化器r.js
requireJS提供一個基于node.js的命令行工具r.js孔轴，用來壓縮多個js文件剃法。它的主要作用是將多個模塊文件壓縮合并成一個腳本文件，以減少網(wǎng)頁的HTTP請求數(shù)路鹰。
具體實現(xiàn)可以參考官方文檔
參考：
官方文檔api: requirejs.org
官方文檔git：requirejs-git
