日期:2014-05-16  浏览次数:20421 次

将散乱的js打包成模块

?

以前因为贪图快速地完成功能,而将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,是一种单列模式,很好用,也很灵活。

?