JS模塊化規範AMD之RequireJS

 

1.基本操做

1. 加載 JavaScript 文件（入口文件）

   RequireJS以一個相對於baseUrl的地址來加載全部的代碼

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

2. 相關配置

   requirejs.config({
   
       baseUrl: 'js/lib',
   
       paths: {
           app: '../app'
       }
   });
   
   requirejs(['jquery', 'canvas', 'app/sub'],
   function   ($,        canvas,   sub) {
       //jQuery, canvas and the app/sub module are all
       //loaded and can be used here now.
   });

2.模塊相關

1. 簡單的值對

   define({
   
       color: "black",
       size: "unisize"
   });

2. 沒有任何依賴的函數式定義

   define(function () {
   
       return {
           color: "black",
           size: "unisize"
       }
   });

3. 存在依賴的函數式定義

   define(["./cart", "./inventory"], function(cart, inventory) {
           //return an object to define the "my/shirt" module.
           return {
               color: "blue",
               size: "large",
               addToCart: function() {
                   inventory.decrement(this);
                   cart.add(this);
               }
           }
       }
   );

4.將模塊定義爲一個函數

define(["my/cart", "my/inventory"],
        function(cart, inventory) {

            return function(title) {
                return title ? (window.title = title) :
                       inventory.storeName + ' ' + cart.name;
            }
        }
    );

3.簡單包裝CommonJS來定義模塊

define(function(require, exports, module) {
    var a = require('a'),
        b = require('b');

    //Return the module value
    return function () {};
    }
);

4. 定義一個命名模塊(jquery中使用)

define("foo/title",
    ["my/cart", "my/inventory"],
    function(cart, inventory) {
        //Define foo/title object in here.
   }
);

jquery:

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    } );
}

5.JSONP服務依賴

爲了在RequireJS中使用JSON服務，需要將callback參數的值指定爲"define"。這意味着你可將獲取到的JSONP URL的值當作是一個模塊定義。

下面是一個調用JSONP API端點的示例。該示例中，JSONP的callback參數爲"callback"，所以"callback=define"告訴API將JSON響應包裹到一個"define()"中：

require(["http://example.com/api/data.json?callback=define"],
    function (data) {
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    }
);

僅支持返回值類型爲JSON object的JSONP服務，其餘返回類型如數組、字串、數字等都不能支持。

6.壓縮合並

1. 常規壓縮合並

   node r.js -o baseUrl=js name=main out=built.js

   有外部CDN的狀況

   //表示paths.jquery不參與合併，壓縮。這時生成的built.js
   node r.js -o baseUrl=js name=main out=built.js paths.jquery=empty:  也就不包含它了。

   合併成大文件，設置配置文件

   ({
       appDir: "./",
       baseUrl: "js",
       dir: "../r6-built",
       paths: {
           jquery: 'empty:'
       },
       modules: [
           {
               name: "page1"
           },
           {
               name: "page2"
           }
       ]
   })

   命令

   node r.js -o build.js

2. 合併壓縮CSS

   node r.js -o cssIn=css/main.css out=css/built.css

   還能夠使用optimizeCss參數設置來配置是否壓縮及壓縮選項。

   optimizeCss的取值有

   none  不壓縮，僅合併
   
   standard  標準壓縮 去換行、空格、註釋
   
   standard.keepLines  除標準壓縮外，保留換行
   
   standard.keepComments  除標準壓縮外，保留註釋
   
   standard.keepComments.keepLines  除標準壓縮外，保留換行和註釋

   示例：

   node r.js -o cssIn=css/main.css out=css/built.css optimizeCss=standard

   壓縮後built.css整個爲一行了。