paths toc sel uil 什麽 回調函數 boa 模塊加載 view

1、為什麽使用require.js

作為命名空間； 作為命名空間使用； 異步加載js，避免阻塞，提高性能； js通過require加載，不必寫很多script

2、require.js的加載

require.js下載 下載後，放在指定目錄就可以加載了 [javascript] view plaincopy

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

有人可能會想到，加載這個文件，也可能造成網頁失去響應。解決辦法有兩個，一個是把它放在網頁底部加載，另一個是寫成下面這樣： [javascript] view plaincopy

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

async屬性表明這個文件需要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，所以把defer也寫上。

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

[javascript] view plaincopy

1. <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模塊 [javascript] view plaincopy

1. require.config({
2. baseUrl: ‘js/‘，
3. paths: {
4. "backbone": "backbone",
5. "underscore": "underscore"
6. },
7. shim: {
8. "backbone": {
9. deps: [ "underscore" ],
10. exports: "Backbone"
11. },
12. "underscore": {
13. exports: "_"
14. }
15. }
16. });

baseUrl：指定基路徑 paths：模塊加載路徑 shim：加載非AMD規範模塊

1. exports值（輸出的變量名），表明這個模塊外部調用時的名稱；
2. deps數組，表明該模塊的依賴性。
3. 主模塊可以將項目基礎模塊加載加來並定義全局方法等
4. [javascript] view plaincopy
   1. require([‘jquery‘, ‘underscore‘, ‘backbone‘], function ($, _, Backbone){
   2. 　　　　// some code here
   3. 　　});

4、定義模塊（符合AMD規範）

require.js加載的模塊，采用AMD規範。也就是說，模塊必須按照AMD的規定來寫。
具體來說，就是模塊必須采用特定的define()函數來定義。如果一個模塊不依賴其他模塊，那麽可以直接定義在define()函數之中。
假定現在有一個math.js文件，它定義了一個math模塊。那麽，math.js就要這樣寫： [javascript] view plaincopy

1. // math.js
2. 　　define(function (){
3. 　　　　var add = function (x,y){
4. 　　　　　　return x+y;
5. 　　　　};
6. 　　　　return {
7. 　　　　　　add: add
8. 　　　　};
9. 　　});

加載方法如下： [javascript] view plaincopy

1. // main.js
2. 　　require([‘math‘], function (math){
3. 　　　　alert(math.add(1,1));
4. 　　});

如果這個模塊還依賴其他模塊，那麽define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。
[javascript] view plaincopy

1. define([‘myLib‘], function(myLib){
2. 　　　　function foo(){
3. 　　　　　　myLib.doSomething();
4. 　　　　}
5. 　　　　return {
6. 　　　　　　foo : foo
7. 　　　　};
8. 　　});

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

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

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

[javascript] view plaincopy

1. require([‘selector‘,‘book‘], function(query,book) {
2. var els = query(‘.wrapper‘);
4. book.fun1();
5. book.fun2();
6. });

此處query 函數是1的情況，book 函數是2的情況。

5、加載js文件

到此為止，我們遇到了兩個關鍵詞，一個是 define ，可以用來定義模塊(命名空間)，第一部分我們講了；還有一個是 require，可以直接加載其他 js。它除了簡單的用法： [javascript] view plaincopy

1. <script>
2. require( ["some" ] );
3. </script>

之外，還有和 define 類似的復雜用法：
[javascript] view plaincopy

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

總結一下，define 是你定義自己的模塊的時候使用，可以順便加載其他js；require 直截了當，供你加載用的，它就是一個加載方法，加載的時候，可以定義別名。

6、requ.js插件

require.js還提供一系列插件，實現一些特定的功能。

domready插件，可以讓回調函數在頁面DOM結構加載完成後再運行。

[javascript] view plaincopy

1. require([‘domready!‘], function (doc){
2. 　　// called once the DOM is ready
3. });

text和image插件，則是允許require.js加載文本和圖片文件。
[javascript] view plaincopy

1. define([
2. 　　　　‘text!review.txt‘,
3. 　　　　‘image!cat.jpg‘
4. 　　　　],
5. 　　　　function(review,cat){
6. 　　　　　　console.log(review);
7. 　　　　　　document.body.appendChild(cat);
8. 　　　　}
9. 　　);

類似的插件還有json和mdown，用於加載json文件和markdown文件。

7、其他問題

1、路徑與後綴名 在 require 一個 js 文件的時候，一般不需要加上後綴名。如果加上後綴名，會按照絕對路徑加載。沒有後綴名，是按照下面的路徑加載：
[javascript] view plaincopy

1. <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達到這個目的： [javascript] view plaincopy

1. requirejs.config({
2. paths: {
3. jquery: [
4. ‘//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js‘,
5. ‘lib/jquery‘
6. ]
7. }
8. });

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

1. define({
2. forceChoke: function() {
4. },
5. forceLighting: function() {
7. },
8. forceRun: function() {
10. }
11. });

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

1. // js/app/moduleA.js
2. define( [ "require", "app/app"],
3. function( require, app ) {
4. return {
5. foo: function( title ) {
6. var app = require( "app/app" );
7. return app.something();
8. }
9. }
10. }
11. );

4、得到模塊的地址 如果你需要得到模塊的地址，你可以這麽做……
[javascript] view plaincopy

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

5、JSONP
我們可以這樣處理JSONP終端：
[javascript] view plaincopy

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

9、r.js壓縮

Require.js 提供一個腳本 r.js ，可以將所有使用到的模塊壓縮成一個腳本文件，r.js 可以使用 Node.js 來執行。

在壓縮模塊前，需要寫一個配置文件，說明主模塊名，壓縮後的文件名，哪些模塊不要壓縮

沒有使用 define 定義的模塊都不要壓縮，包括 jQuery，backbone 等庫及其插件

[javascript] view plaincopy

1. //build.js
2. ({
3. baseUrl: ‘.‘,
4. paths: {
5. ‘jquery‘: ‘empty:‘,
6. ‘underscore‘: ‘empty:‘,
7. ‘backbone‘: ‘empty:‘,
8. },
9. name: ‘main‘,
10. out: ‘main.min.js‘
11. })

壓縮命令:
[javascript] view plaincopy

1. node r.js -o build.js

require學習筆記總結