require.js的用法 - 阮一峰的網(wǎng)絡(luò)日志
現(xiàn)在官網(wǎng)上下載require.js,
1 . 在body底部加載<script src="js/require.js" defer sync="true"></script>
2 . 在加載頁面的入口js<script src="js/main.js" data-main= "js/main"></script>
3 . main.js的寫法，如果main.js不依賴其他模塊司致，直接在main.js文件里寫代碼；
4 . 如果main.js依賴其他模塊轻抱，在main.js的頂部，require( [' jquery '] , function($){
} ?) ?旦部； jquery.js函數(shù)需在和main.js相同的目錄文件下
require接受兩個(gè)參數(shù)祈搜，第一個(gè)參數(shù)是一個(gè)數(shù)組，是該模塊依賴的模塊士八，第二個(gè)參數(shù)是回調(diào)函數(shù)容燕，當(dāng)依賴的模塊加載完成后，以參數(shù)的形式參入回調(diào)函數(shù)中婚度，供該模塊使用
6 . ?require引入模塊的用法：
????????6.1 ? ?直接（ jquery.js | underscore.js | backbone.js ?和main.js在同一個(gè)目錄文件下 ?）
????????require( ?[ ' jquery' , 'underscore' , ' backbone ' ?] ?, function( $ , _ , Backbone ? ) ?{
? ? ? ? ? ? //some code
????????})
?????????6.2 ? ? 在模塊的頂部配置require的配置項(xiàng)來指定依賴模塊的位置： paths屬性指定各個(gè)依賴模塊的路徑 （和main.js在項(xiàng)目的目錄下）
? ? ? ? ? ? ? ? require.config({
????????????paths: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"jquery": "jquery.min",
????????????????????????????????????"underscore": "underscore.min",
????????????????????????????????????"backbone": "backbone.min"
????????}
????????});
? ? （和main.js在不同的目錄下 ?js/lis） ?不用加.js
?????????????????require.config({
????????????paths: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"jquery": "lis/jquery.min",
????????????????????????????????????"underscore": "lis/underscore.min",
????????????????????????????????????"backbone": "lis/backbone.min"
????????}
????????});
或是
? ???????????require.config({
? ? ? ? ? ? ? ? ? ? ? ? ? ? baseUrl ?: " js/lis ",
????????????paths: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"jquery": "jquery.min",
????????????????????????????????????"underscore": "underscore.min",
????????????????????????????????????"backbone": "backbone.min"
????????}
????????});
? ? ? ? 6.3 如果另外的模塊在另外的主機(jī)上蘸秘，
? ??????????require.config({
????????????paths: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
????????});
7 . require.js要求每個(gè)模塊都是獨(dú)立的文件，如果加載的模塊較多蝗茁，會(huì)發(fā)出多次http請(qǐng)求醋虏，影響網(wǎng)頁速度，因此require.js提供了優(yōu)化工具哮翘，當(dāng)模塊部署完畢后颈嚼，可以用這個(gè)工具將多個(gè)模塊合并在一個(gè)文件中，減少http請(qǐng)求
8.require.js加載的模塊饭寺，符合ADM規(guī)范 阻课，因此模塊需按照ADM標(biāo)準(zhǔn)來寫 叫挟，模塊必須采用特定的define()函數(shù)來定義，
? ? 8.1 如果一個(gè)模塊不依賴其他模塊柑肴，則直接寫在define（）函數(shù)之中霞揉，
? ? ? ? ? ? define(function(){
????????????????????var add = function (x,y){
???????????? return x+y;
? ? ? ? ? ? ? ? ? ? ? ?};
????????????????????????return {
???????????????????????????? add: add
???????????????????? };
????????????});
? ? 8.2 模塊要依賴其他模塊 旬薯，define（）函數(shù)的第一個(gè)參數(shù)必須是一個(gè)數(shù)組晰骑，指明該模塊的依賴性 ?，當(dāng)require()函數(shù)加載下面這個(gè)模塊的時(shí)候绊序，就會(huì)先加載myLib.js文件硕舆。
????????????define(['myLib'], function(myLib){
????????function foo(){
????????myLib.doSomething();
????????}
????????return {
???????? foo : foo
????????};
????????});
9 . 加載非規(guī)范模塊： （jquery符合AMD規(guī)范） ，加載非規(guī)范模塊時(shí)骤公，要在加載之前要定義它們的特征抚官，
????????????????require.config({
????????????????????????????shim: {
????????????????????????????????'underscore':{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????exports: '_'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
????????????????????????????????'backbone': {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????deps: ['underscore', 'jquery'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????exports: 'Backbone'
????????????????????????????????}
????????????}
????????????});
require.config()接受一個(gè)配置對(duì)象，這個(gè)對(duì)象除了有前面說過的paths屬性之外阶捆，還有一個(gè)shim屬性凌节，專門用來配置不兼容的模塊。具體來說洒试，每個(gè)模塊要定義（1）exports值（輸出的變量名）倍奢，表明這個(gè)模塊外部調(diào)用時(shí)的名稱；（2）deps數(shù)組垒棋，表明該模塊的依賴性卒煞。
例如jquery的插件可以這樣定義
????????????require.config({
????????????????????????????shim: {
????????????????????????????????'jquery.scroll': {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????deps: [ 'jquery'],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????exports: 'jQuery.fn.scroll'
????????????????????????????????}
????????????}
????????????});
10 . require的其他插件
domready插件，可以讓回調(diào)函數(shù)在頁面DOM結(jié)構(gòu)加載完成后再運(yùn)行叼架，
require(['domready!'], function (doc){
// called once the DOM is ready
});
text和image插件畔裕，則是允許require.js加載文本和圖片文件。
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
