JavaScript 钩子机制_0

介绍

今天大家开会共同解决了一些javascript方面的问题,大家一起想办法,最终大家选择了钩子机制。

我把整个过程与大家分享一下,如果有误,请大家指正。

问题

是这样的:我们的代码已经历史很久了,就这一套框架已经快5年了,在这中间大家也没有标准的代码规范,很随意的进行了代码编写,所以出现了很多问题:

1、如制造了很多重复的轮子。一套方法在多个文件中出现,大家调用的也五花八门,所以同事在一个方法(登录)中添加逻辑的时候发现,多个地方都有这样登录操作,修改起来非常麻烦。

2、代码结构混乱,分工不明确,本来公共类做的事情,导航类也做了类似的操作。

3、回调函数的使用,出现多个回调函数,从而出现一个回调函数会覆盖前一个回调函数的情况。

前两个问题,我首先把所有的入口文件(调用登录的方法)统一使用公共类中的方法,并且是一个入口一个入口的进行验证,保证代码的安全性、稳定性。并且不删除原有的方法,害怕有遗漏。然后计划是一个月之后,再进行一次全站搜索看是否有人还使用其他接口,然后删除那些重复的方法。

下面主要讨论第三个问题的解决方法。

委托方法

我们讨论过使用委托方法,把所有的回调函数注册到一个数组变量中,然后集中处理数组变量中的函数,这样就不会出现后面的函数冲击前面的函数问题。——因为原来回调函数就一个。

下面是具体的代码过程

定义全局变量

 
  1. <head>
  2. <scripttype="text/javascript">
  3. varcalls=[];</script>
  4. </head>

注册方法

 
  1. functionneed_register(){
  2. }
  3. functiontest(){
  4. calls.push('need_register');
  5. }

最终执行注册代码 

 
  1. functioncallback(){
  2. varcalls=calls||[];
  3. if(calls.length===0)returnfalse;
  4. for(vari=0,iLen=calls.length;i<iLen;i++){
  5. calls[i].apply();
  6. }
  7. }

问题:

1、我们不难发现我们必须要有全局变量calls,我们知道全局变量不管在什么语种中都是最难维护的,因为到处都有可能修改里面的值,或改变整个全局变量。

2、在注册时候我们会在多个地方在calls中注册"函数名称",将来如果其他开发人员,看见这个变量会一头雾水的。——东一榔头,西一棒子。

总结:所以最终我们决定放弃这个方法。想出了下面的方法,我们管它叫钩子机制,也许名称上有点不够直观,呵呵大家就权当学习整个方法吧。

钩子机制

钩子机制是这样的,大家按照某一规则写一个方法(这个规则在方法名称上),然后页面加载完之前,统一执行所有的钩子函数。

注意callHooks方法,里面的局部变量s就是钩子函数名称中一定要有的内容。——这是使用钩子的方法!

 
  1. //处理钩子的对象
  2. varhook=(function(){
  3. return{
  4. timer:null,
  5. init:function(){
  6. this足球平台出租pan>.callHooks('init');
  7. },
  8. callHooks:function(init){
  9. vars="hook_"+init+'_event',
  10. f=[];
  11. for(varhinwindow){
  12. if(h.indexOf(s)!=0)continue;
  13. f.push(h);
  14. }
  15. this.hooksTimeout(f);
  16. },
  17. hooksTimeout:function(hooks){
  18. if(0===hooks.length){
  19. if(this.timer)clearTimeout(this.timer);
  20. return;
  21. }
  22. varh=hooks.shift();
  23. window[h].apply();
  24. window[h]=undefined;
  25. window.setTimeout(this.hooksTimeout(hooks),200);
  26. }
  27. }
  28. }());
  29. //钩子1
  30. varhook_init_event_tpl_html=function(){
  31. document.getElementById('test').innerHTML='ThisisHTML!';
  32. }
  33. //钩子2
  34. varhook_init_event_tpl_console=function(){
  35. console.log('Thisisconsole!');
  36. }
  37. //最好在页面加载完之前调用,也就是在window.onload()之前
  38. hook.init();

总结

很多问题,如果大家一起讨论是很有帮助的,在这过程中我们能学到很多东西,我们也可以在这过程中从牛人身上学到很多方法和思维过程,几乎每次的技术讨论会我都有不菲的收获——我不知道这是不是传说中的“头脑风暴”。

原文链接:http://www.cnblogs.com/baochuan/archive/2012/06/11/2542048.html

您可能感兴趣的文章:
JavaScript重构 模块划分和命名空间
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值