require學習筆記總結

一、爲何使用require.js

做爲命名空間；

做爲命名空間使用；

異步加載js，避免阻塞，提升性能；

js經過require加載，沒必要寫不少script

二、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 方法做爲入口同樣，上面這種寫法，作了幾件事情：
一、加載了 require-jquery.js 文件。注意，官方提供了 require.js和 jquery 的打包版本，推薦。
二、在加載以後，加載入口文件 js/main.js ，注意，main.js 寫進去的時候，不須要後綴名。
你的全部其餘 js 模塊文件，均可以寫在 main.js 裏面，經過 main.js 加載。

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

四、定義模塊（符合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
 　　　　};
 　　});

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

 

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

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

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

    book.fun1();
    book.fun2();
});

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

五、加載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 直截了當，供你加載用的，它就是一個加載方法，加載的時候，能夠定義別名。

六、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文件。

七、其餘問題

一、路徑與後綴名

在 require 一個 js 文件的時候，通常不須要加上後綴名。若是加上後綴名，會按照絕對路徑加載。沒有後綴名，是按照下面的路徑加載：

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

也就是默認加載 data-main 指定的目錄，即 js/main.js 文件所在的目錄。固然，你能夠經過配置文件修改。
二、define 定義模塊方法只能用在獨立的js文件中，不能在頁面中直接使用。
不然會報 Mismatched anonymous define() module 錯誤。

三、在代碼中require一個文件屢次，不會致使瀏覽器反覆加載

不會，這是 RequrieJS 的優勢，即便你反覆 require 它，它只加載一次。

八、require深刻

一、cdn回退

其支持當CDN加載不正確時，回退加載本地相應的庫。咱們能夠經過require.config達到這個目的：

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

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

define({
    forceChoke: function() {

    },
    forceLighting: function() {

    },
    forceRun: function() {

    }
});

很簡單，也頗有用，若是該模塊僅僅是功能的集合，或者只是一個數據包。
三、循環依賴

在一些狀況中，咱們可能須要模塊moduleA和moduleA中的函數須要依賴一些應用。這就是循環依賴。

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

四、獲得模塊的地址

若是你須要獲得模塊的地址，你能夠這麼作……

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

五、JSONP
咱們能夠這樣處理JSONP終端：

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

九、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