摘要：了解模塊化開發(fā)思想如果有軟件工程背景，那么這一思想就是你自身就應(yīng)該掌握的。玉伯也發(fā)表過前端模塊化開發(fā)的價(jià)值了解目前技術(shù)，哪些和模塊化開發(fā)沾邊開發(fā)功能模塊的時(shí)候，可以采用的解決方案。

現(xiàn)在javascript的流行，前端的代碼越來越復(fù)雜，所以我們需要軟件工程的思想來開發(fā)前端。模塊化是必不可少的，這樣不僅能夠提高代碼的可維護(hù)性、可擴(kuò)展性以及魯棒性，更大的好處就是能夠提升整個(gè)團(tuán)隊(duì)的開發(fā)效率，也能夠讓新進(jìn)的程序員更快的接手工作。今天晚上根據(jù)前輩們的經(jīng)驗(yàn)，寫啦一個(gè)簡(jiǎn)單的模塊定義的封裝組件，當(dāng)是練手吧。不過感覺還是蠻好用的。

其實(shí)突然就學(xué)習(xí)模塊化的javascript開發(fā)，那還是比較丈二和尚，摸不著頭腦的。不過如果是做過后臺(tái)開發(fā)的程序員們，可能對(duì)于模塊化的開發(fā)思想并不陌生，因?yàn)楹笈_(tái)的這方面技術(shù)已經(jīng)很熟悉了。那么這里我就分享一下前端javascript模塊化開發(fā)的學(xué)習(xí)。

如果有軟件工程背景，那么這一思想就是你自身就應(yīng)該掌握的。模塊（module）就是可以組合、分解以及更換的單元，其實(shí)也滿足組合大于繼承等這些帶來的好處吧。如果看成一個(gè)系統(tǒng)的話，我們可以從軟件體系結(jié)構(gòu)來理解，模塊是較大系統(tǒng)中的獨(dú)立部件，功能、狀態(tài)與接口反映外部特性，邏輯反映的是內(nèi)部特性。

模塊化的開發(fā)模式為前端帶來了新大陸，這點(diǎn)不得不承認(rèn)，現(xiàn)在前端的越發(fā)成熟，需要軟件工程的這種思想。
玉伯也發(fā)表過前端模塊化開發(fā)的價(jià)值

3.了解目前技術(shù)，哪些和模塊化開發(fā)沾邊

1) 開發(fā)功能模塊的時(shí)候，可以采用Eva的解決方案（YUI3 + Minify）。

2) 使用流行的javascript模塊加載框架：seajs。

3) 如果喜歡輕巧的東西，也可以嘗試帶刀的easy.js，不錯(cuò)的一個(gè)模塊加載框架。

4) 也可以嘗試支付寶的Alice，這是一款基于CMD規(guī)范的東東，首頁(yè)倒是挺小清新的。

5) 如今比較火的NodeJS這是必須要了解和學(xué)習(xí)的。

好啦，了解完上面那些技術(shù)后，模塊化的前端模式應(yīng)該很熟悉了，如果想扎實(shí)一下的話還可以了解一下AMD、CMD規(guī)范，具體是什么東西，google一下。接下來我們就來構(gòu)造一個(gè)簡(jiǎn)單的模塊定義器吧，其實(shí)寫的時(shí)候還挺簡(jiǎn)單的，不過主要是吸收思想，這樣學(xué)習(xí)技術(shù)才不會(huì)跟不上時(shí)代。

module: {
    //模塊名稱
    moduleName: moduleName,
    //模塊依賴集合
    dependencies: dependencies,
    //模塊實(shí)例工廠
    factory: factory
}

所以我們最后能夠形成模塊定義的代碼如下：

define: function ( moduleName, dependencies, factory ) {
    if( !modules[moduleName] ) {
        //模塊信息
        var module = {
            moduleName: moduleName,
            dependencies: dependencies,
            factory: factory
        };

        modules[moduleName] = module;
    }

    return modules[moduleName];
}

這樣我們就定義好了模塊，那么我們的入口在哪里呢？我們還需要定義一個(gè)use的方法，來成為所謂的main，這樣綁定好了才能夠調(diào)用，現(xiàn)在想來程序也都是這樣的。下面這段代碼通過遞歸的產(chǎn)生模塊依賴的所有實(shí)例，但是這里浪費(fèi)了一部分instances數(shù)組的空間，有時(shí)間可以再做哈優(yōu)化。

use: function ( moduleName ) {
    //使用括號(hào)的方式訪問屬性，實(shí)現(xiàn)動(dòng)態(tài)的賦值（詳情查閱“.”和[]的區(qū)別）
    var module = modules[moduleName];

    //產(chǎn)生單個(gè)實(shí)例
    if( !module.instance ) {
        var instances = [], 
            len = module.dependencies.length - 1;

            for( var i = 0; i <= len; i++ ) {
                var dependency = module.dependencies[i],
                    instance = dependency.instance;

                if( instance ) {
                    instances.push( instance );
                } else {
                    //遞歸，將每次產(chǎn)生的實(shí)例放入數(shù)組
                    instances.push( arguments.callee( dependency ) );
                }
            }
            //生成實(shí)例
            module.instance = module.factory.apply( null, instances );
    }

    return module.instance;
}
 

最后我形成完整的自己的小庫(kù)。

(function ( window, undefined ) {
    var modules = {};
    var Sky = {
        //定義模塊的基本信息
        //1.模塊名稱，2.模塊的依賴，3.產(chǎn)生實(shí)例的工廠
        define: function ( moduleName, dependencies, factory ) {
            if( !modules[moduleName] ) {
                //模塊信息
                var module = {
                    moduleName: moduleName,
                    dependencies: dependencies,
                    factory: factory
                };

                modules[moduleName] = module;
            }

            return modules[moduleName];
        },
        //使用依賴
        use: function ( moduleName ) {
            var module = modules[moduleName];

            //產(chǎn)生單個(gè)實(shí)例
            if( !module.instance ) {
                var instances = [], 
                    len = module.dependencies.length - 1;

                for( var i = 0; i <= len; i++ ) {
                    var dependency = module.dependencies[i],
                        instance = dependency.instance;

                    if( instance ) {
                        instances.push( instance );
                    } else {
                        //遞歸，將每次產(chǎn)生的實(shí)例放入數(shù)組
                        instances.push( arguments.callee( dependency ) );
                    }
                }
                //生成實(shí)例
                module.instance = module.factory.apply( null, instances );
            }

            return module.instance;
        }
    };

    window.Sky = Sky || {};
})(window);

下面我們來一個(gè)完整的例子來使用一下以上我們構(gòu)建的輕巧代碼。

Sky.define("constant.PI", [], function() {
    return 3.1415926;
});

Sky.define("shape.Circle", ["constant.PI"], function( pi ) {
    function Circle(r) {
        this.r = r || 0;
    };

    Circle.prototype.area = function() {
        return pi * this.r * this.r;
    };

    return Circle;
});

Sky.define("shape.Rectangle", [], function() {
    function Rectangle(width, height) {
        this.width = width || 0;
        this.height = height || 0;
    };

    Rectangle.prototype.area = function() {
        return this.width * this.height;
    };

    return Rectangle;
});

Sky.define("ShapeTypes", ["shape.Circle", "shape.Rectangle"], function( Circle, Rectangle ) {
    return {
        "CIRCLE": Circle,
        "RECTANGLE": Rectangle
    };
});

Sky.define("ShapeFactory", ["ShapeTypes"], function( ShapeTypes ) {
    return {
        getShape: function(type) {
            var shape;

            switch (type) {
            case "CIRCLE":
                shape = new ShapeTypes[type](arguments[1]);
                break;
            case "RECTANGLE":
                shape = new ShapeTypes[type](arguments[1], arguments[2]);
                break;
            }
            return shape;
        }
    };
});

var ShapeFactory = Sky.use("ShapeFactory");
console.log(ShapeFactory.getShape("CIRCLE").area());
console.log(ShapeFactory.getShape("RECTANGLE", 2, 3).area());

是不是感覺js代碼變得更加清爽了？嘿嘿，上面的例子也是面向接口的，大家也可以看看。

參考前輩：http://blog.jobbole.com/43649/

也許代碼有出入，有些地方前輩寫得不夠細(xì)心的我補(bǔ)上了一些，嘿嘿，但是思路是參考這位前輩的。

原文出自：http://www.60sky.com/