JavaScript 模塊化編程

JavaScript 模塊化編程

exapmle:

var module1 = ( function($, YAHOO){
    
    //...


})(jQuery, YAHOO);

模塊規範: CommonJS 和 AMD

對於瀏覽器端的模塊，只能採用「異步加載」。這就是AMD規範誕生的背景。

AMD： Asynchronous Module Definition

它採用異步方式加載模塊，模塊的加載不影響它後面語句的執行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到模塊加載完成以後，這個回調函數纔會執行。

寫法以下：

require([module], callback);

第一個參數[module], 是一個數組，裏面的成員是要加載的模塊。

例如：

require(['math'], function(){
    math.add(2, 3);
})

一個流行的庫 require.js

解決兩個問題：

• 實現js文件的異步加載，避免網頁失去響應
• 管理模塊之間的依賴性，便於代碼的編寫和維護

引入庫文件：

使其異步加載，能夠加入屬性：async="true" (IE支持 defer)

引入require以後，加入咱們本身的代碼：

假定咱們的文件是main.js,在js目錄下。

data-main屬性的做用是，指定網頁程序的主模塊。

如何寫主模塊main.js:

require(['moduleA', 'moduleB', 'moduleC'], function(moduleA, moduleB, moduleC){
    
    // do something

});

一個實際的例子：

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

});

模塊的加載：

默認狀況下，require假定所要加載的模塊與main.js在同一目錄下。

使用require.config()方法，咱們能夠自定義模塊的加載行爲。require.config()就寫在main.js的頭部。參數是一個對象，對象的path屬性指定各個模塊的加載路徑。

// 相同路徑，指定模塊的文件名
require.config({
    
    paths: {
        'jquery': 'jquery.min',
        'underscore': 'underscore.min',
        'backbone': 'backbone.min'
    }
});

// 不一樣路徑，指定路徑及文件名
require.config({
    
    paths: {
        'jquery': 'lib/jquery.min',
        ...
    }
});

// 或者指定基目錄
require.config({
    
    baseUrl: 'js/lib',

    paths: {
        'jquery': 'jquery.min',
        ...
    }
});

// 也能夠指定url
require.config({
    
    paths: {
        'jquery': 'https://ajax.../jquery.min',
        ...
    }
});

模塊的寫法

若是一個模塊不依賴其餘模塊，則直接定義一個模塊：

// math.js
define(function() {
    var add = function(x, y) {

        return x + y;

    };

    return {
        add: add
    }

})

加載方法：

require(['math'], function(math) {
    // ...
})

若是這個模塊還以來其餘模塊，則define() 函數的第一個參數必須是一個數組，指明該模塊的依賴性：

define(['myLib', function(mylib){
    function foo(){

        myLib.doSomething();

    }

    return {
        foo: foo
    };
}]);

加載非規範的模塊：

好比underscore和backbone這兩個庫，都沒有采用AMD規範編寫。若是要加載他們的話，必須先定義他們的特徵：

require.config({
    
    shim: {
        'underscore': {
            exports: '_'
        },

        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

shim屬性專門用來配置不兼容的模塊，每一個模塊要定義：

(1) exports值(輸出的變量名)，代表這個模塊外部調用時的名稱

(2) deps數組，代表該模塊的依賴

好比：

shim: {
    'jquery': {
        deps: ['jquery'],
        exports: 'jQuery.fn.scroll'
    }
}

require.js 插件：

domready插件，能夠讓回調函數在DOM結構加載完成後再執行。

require(['domready!'], function(doc){
    // called once the DOM is ready
});

text和image插件，容許require加載文本和圖片文件：

define([
    'text!review.text',
    'image!cat.jpg'
],

function(review, cat) {
    console.log(review);
    document.body.appendChild(cat);
}
);