js中的模塊化編寫思維

作為一個新手程序員，在編程時一定要刻意鍛煉自己的模塊化編寫思路，但是究竟什么才是模塊化編寫對於新人來說還是不太能夠直觀的理解，下面就舉個簡單的例子來說明一下

概念：最早接觸模塊化的說法是從java上，所謂模塊化就是將需要用到的方法封裝成為一個模塊，哪里需要直接調用即可，比如你需要計算1+1和2+2，那么你只需要調用a+b的方法即可，無需反復重寫，但是由於js並不支持類的繼承，因此如何封裝和調用方法就成為js模塊化的重要思路。

最簡單的方式：

function sum(a,b){
        alert(a+b);
    }
function sub(a,b){
        alert(a-b);
    }
    sum(1,1);
    sum(2,2);
    sub(11,1);

 上面的sum（），sub（）分別都可以算作是一個模塊，需要用的時候直接調用即可，但是這種做法的缺點很明顯："污染"了全局變量，無法保證不與其他模塊發生變量名沖突，而且模塊成員之間看不出直接關系。比如a，b是全局變量同時方法中需要改變a，b值的時候。

因此大多時候我們都會將其采用對象的寫法：

var Sum=new Object({
        a:1,
        b:2,
        sum:function(){
            alert(this.a-this.b);
        }
    });
    Sum.sum();

 上面的函數sum()，封裝在Sum對象里。使用的時候，就是調用這個對象的屬性。

Sum.sum();

但是，這樣的寫法會暴露所有模塊成員，內部狀態可以被外部改寫,比如：

sum.a=2;

因此，在這個的基礎上，我們可以采用立即執行函數寫法：

 var Sum=(function(){
        var a=1;
        var b=2;
        var sum=function(){
            alert(a+b);
        };
        var sub=function(){
            alert(a-b);
        };
        return {
            sum:sum,
            sub:sub
        }
    })();
    alert(Sum.a);
    Sum.sum();

 第一個輸出的Sum.a是undefind，外部是無法獲取我們模塊內部參數的，但是由於方法我們返回成為一個對象，因此是可以由外部調用的。

同時該模塊還可以為其添加新的方法

Sum=(function () {

        m3 = function () {
            alert("開始計算");
        };
        return {m3:m3}
    })(Sum);
        Sum.m3();

 但是注意，這里不能直接調用Sum中的變量a，b，如果需要使用這些參數還需要重新賦予，關於解決方式大家有好的辦法歡迎回復。

另外為了避免執行順序等干擾造成程序報錯，在添加方法時也可以寫成

Sum=(function () {

        m3 = function () {
            alert("im");
        };
        return {m3:m3}
    })(window.Sum || {});

 這樣即使是空對象也可以添加成功。

以上就是簡單的模塊化封裝思路，大家可以舉一反三。