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

这样即使是空对象也可以添加成功。

以上就是简单的模块化封装思路，大家可以举一反三。