?

以前因为贪图快速地完成功能，而将js写成一个一个的function，将事件写在了html里，如今要扩展了，代码必须要复用，因此有没有一个简单的方法来包装这些functions然后统一一下呢？

答案是：module pattern

?

具体步骤大概有三步：

1.将功能函数包起来并且参数配置为一个对象

2.将事件从html抽离出来

3.返回一个对象作为公开方法

?

比如我有三个函数用来完成功能:

fun1,fun2,fun3

第一步就是用一个函数将它们包起来，并且将参数统一为一个对象，如

?

?

var M = function(options){
    function fun1(){}
    function fun2(){}
    function fun3(){}
}

这样做的好处是，里面的函数可以随便用参数options对象，比如在fun1里

?

?

function fun1(){
   var node = document.getElementById(options.node1);
   //...
}

?

第二步是将原先写在html里的事件抽离出来

我们可以在最外层的函数里写，也可以在里面的函数里写，只要达到运行时能绑定事件就行;当然可以单独写一些兼容的事件放在这个包装函数里，内层函数可以随意调用这些同层的函数

?

第三步就是将一些方法公开出来：

?

var M = function(options){
    var private1,private2;

    function fun1(){}
    function fun2(){}
    function fun3(){}

    return {
        fun1:fun1,
        fun2:fun2,
        someOther:fun1//这里提供别名的功能
    }
}

?

最后使用这个函数，如:

?

var somevar = M({
        'key1':'value1',
        'after':function(){
            //here is callbak
        }
        })

这里特别说明一下，可以在参数里提供一些回调函数如上面的after，也可以在模块返回的方法里的参数提供callback，如

?

somevar.fun1(function(){
        //do something here
        });

要做的只是在内层函数里提供一个参数然后在内层函数里调用如：

var M = function(options){
    function fun1(cb){
        //after done
        cb();
        options.after();
    }
}

这种方法没有this,是一种单列模式，很好用，也很灵活。

?