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 || {});

 這樣即便是空對象也能夠添加成功。

以上就是簡單的模塊化封裝思路，你們能夠觸類旁通。