require.js學習總結

1、為什麼使用require.js作為命名空間；作為命名空間使用；
非同步載入js，避免阻塞，提高效能；js通過require載入，不必寫很多script2、require.js的載入require.js下載下載後，放在指定目錄就可以載入了

<script src="js/require.js"></script>

有人可能會想到，載入這個檔案，也可能造成網頁失去響應。解決辦法有兩個，一個是把它放在網頁底部載入，另一個是寫成下面這樣：

<script src="js/require.js" defer async="true" ></script>  

async屬性工作表明這個檔案需要非同步載入，避免網頁失去響應。IE不支援這個屬性，只支援defer，所以把defer也寫上。

這種寫法雖然簡單，但其實並不推薦，一般的寫法還要再加個屬性：

<script data-main="js/main" src="js/require-jquery.js"></script>  

就像一個c程式總有一個 main 方法作為入口一樣，上面這種寫法，做了幾件事情：
1、載入了 require-jquery.js 檔案。注意，官方提供了 require.js和 jquery 的打包版本，推薦。
2、在載入之後，載入入口檔案 js/main.js ，注意，main.js 寫進去的時候，不需要尾碼名。
你的所有其他 js 模組檔案，都可以寫在 main.js 裡面，通過 main.js 載入。3、require.js的配置在data-main指定的主檔案中，通過require.config來配置，並載入其他js模組

require.config({    baseUrl: 'js/'，    paths: {        "backbone": "backbone",        "underscore": "underscore"    },    shim: {        "backbone": {            deps: [ "underscore" ],            exports: "Backbone"        },        "underscore": {            exports: "_"        }    }});

baseUrl：指定基路徑paths：模組載入路徑shim：載入非AMD規範模組

1. exports值（輸出的變數名），表明這個模組外部調用時的名稱；
2. deps數組，表明該模組的依賴性。
3. 主模組可以將項目基礎模組載入加來並定義全域方法等

4. require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){ 　　　　// some code here 　　});

   4、定義模組（符合AMD規範）require.js載入的模組，採用AMD規範。也就是說，模組必須按照AMD的規定來寫。
   具體來說，就是模組必須採用特定的define()函數來定義。如果一個模組不依賴其他模組，那麼可以直接定義在define()函數之中。
   假定現在有一個math.js檔案，它定義了一個math模組。那麼，math.js就要這樣寫：

   // math.js 　　define(function (){ 　　　　var add = function (x,y){ 　　　　　　return x+y; 　　　　}; 　　　　return { 　　　　　　add: add 　　　　}; 　　});

   載入方法如下：

   // main.js 　　require(['math'], function (math){ 　　　　alert(math.add(1,1)); 　　});

   如果這個模組還依賴其他模組，那麼define()函數的第一個參數，必須是一個數組，指明該模組的依賴性。
   

   define(['myLib'], function(myLib){ 　　　　function foo(){ 　　　　　　myLib.doSomething(); 　　　　} 　　　　return { 　　　　　　foo : foo 　　　　}; 　　});

   定義的模組返回函數個數問題

   1、define 的return只有一個函數，require的回呼函數可以直接用別名代替該函數名。

   2、define 的return當有多個函數，require的回呼函數必須用別名調用所有的函數。

   require(['selector','book'], function(query,book) {    var els = query('.wrapper');    book.fun1();    book.fun2();});

   此處query 函數是1的情況，book 函數是2的情況。
   5、載入js檔案到此為止，我們遇到了兩個關鍵詞，一個是 define ，可以用來定義模組(命名空間)，第一部分我們講了；還有一個是 require，可以直接載入其他 js。它除了簡單的用法：

   <script>require( ["some" ] );</script>

   之外，還有和 define 類似的複雜用法：
   

   <script> require(["aModule", "bModule"], function() {     myFunctionA(); // 使用 aModule.js 中的函數 myFunctionA    myFunctionB(); // 使用 bModule.js 中的函數 myFunctionB}); </script> 

   總結一下，define 是你定義自己的模組的時候使用，可以順便載入其他js；require 直截了當，供你載入用的，它就是一個載入方法，載入的時候，可以定義別名。
   6、requ.js外掛程式

   require.js還提供一系列外掛程式，實現一些特定的功能。
   

   domready外掛程式，可以讓回呼函數在頁面DOM結構載入完成後再運行。

   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); 　　　　} 　　);

   類似的外掛程式還有json和mdown，用於載入json檔案和markdown檔案。7、其他問題1、路徑與尾碼名在 require 一個 js 檔案的時候，一般不需要加上尾碼名。如果加上尾碼名，會按照絕對路徑載入。沒有尾碼名，是按照下面的路徑載入：
   

   <script data-main="js/main" src="js/require-jquery.js"></script>

   也就是預設載入 data-main 指定的目錄，即 js/main.js 檔案所在的目錄。當然，你可以通過設定檔修改。
   2、define 定義模組方法只能用在獨立的js檔案中，不能在頁面中直接使用。
   否則會報 Mismatched anonymous define() module 錯誤。

   3、在代碼中require一個檔案多次，不會導致瀏覽器反覆載入

   不會，這是 RequrieJS 的優點，即使你反覆 require 它，它只載入一次。

   8、require深入1、cdn回退其支援當CDN載入不正確時，回退載入本地相應的庫。我們可以通過require.config達到這個目的：

   requirejs.config({    paths: {        jquery: [            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',            'lib/jquery'        ]    }});

   2、沒有依賴？對象字面量？沒問題！
   當你寫一個沒有任何依賴的模組，並且只是返回一個對象包含一些功能函數，那麼我們可以使用一種簡單的文法：
   

   define({    forceChoke: function() {    },    forceLighting: function() {    },    forceRun: function() {    }    });

   很簡單，也很有用，如果該模組僅僅是功能的集合，或者只是一個資料包。
   3、循環相依性在一些情況中，我們可能需要模組moduleA和moduleA中的函數需要依賴一些應用。這就是循環相依性。
   

   // js/app/moduleA.jsdefine( [ "require", "app/app"],    function( require, app ) {        return {            foo: function( title ) {                var app = require( "app/app" );                return app.something();            }        }    });

   4、得到模組的地址如果你需要得到模組的地址，你可以這麼做……
   

   var path = require.toUrl("./style.css");

   5、JSONP
   我們可以這樣處理JSONP終端：
   

   require( [     "http://someapi.com/foo?callback=define"], function (data) {    console.log(data);});

   9、r.js壓縮

   Require.js 提供一個指令碼 r.js ，可以將所有使用到的模組壓縮成一個指令檔，r.js 可以使用 node.js 來執行。

   在壓縮模組前，需要寫一個設定檔，說明主模組名，壓縮後的檔案名稱，哪些模組不要壓縮

   沒有使用 define 定義的模組都不要壓縮，包括 jquery，backbone 等庫及其外掛程式

   
   

   //build.js({    baseUrl: '.',    paths: {    'jquery': 'empty:',    'underscore': 'empty:',    'backbone': 'empty:',  },    name: 'main',    out: 'main.min.js'})

   壓縮命令:
   

   node r.js -o build.js

   更多require.js學習連結