日期:2014-05-16 浏览次数:20421 次
?
以前因为贪图快速地完成功能,而将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,是一种单列模式,很好用,也很灵活。
?