Javascript 钩子机制——开会得出的结论
介绍
今天大家开会共同解决了一些javascript方面的问题,大家一起想办法,最终大家选择了钩子机制。
我把整个过程与大家分享一下,如果有误,请大家指正。
问题
是这样的:我们的代码已经历史很久了,就这一套框架已经快5年了,在这中间大家也没有标准的代码规范,很随意的进行了代码编写,所以出现了很多问题:
1、如制造了很多重复的轮子。一套方法在多个文件中出现,大家调用的也五花八门,所以同事在一个方法(登录)中添加逻辑的时候发现,多个地方都有这样登录操作,修改起来非常麻烦。
2、代码结构混乱,分工不明确,本来公共类做的事情,导航类也做了类似的操作。
3、回调函数的使用,出现多个回调函数,从而出现一个回调函数会覆盖前一个回调函数的情况。
前两个问题,我首先把所有的入口文件(调用登录的方法)统一使用公共类中的方法,并且是一个入口一个入口的进行验证,保证代码的安全性、稳定性。并且不删除原有的方法,害怕有遗漏。然后计划是一个月之后,再进行一次全站搜索看是否有人还使用其他接口,然后删除那些重复的方法。
下面主要讨论第三个问题的解决方法。
委托方法
我们讨论过使用委托方法,把所有的回调函数注册到一个数组变量中,然后集中处理数组变量中的函数,这样就不会出现后面的函数冲击前面的函数问题。——因为原来回调函数就一个。
下面是具体的代码过程
定义全局变量
<head><script type="text/javascript">var calls = []; </script> </head>
注册方法
function need_register(){ }function test(){calls.push('need_register'); }
最终执行注册代码
function callback(){var calls = calls || [];if(calls.length === 0) return false;for(var i=0, iLen = calls.length; i < iLen; i++){calls[i].apply();} }
问题:
1、我们不难发现我们必须要有全局变量calls,我们知道全局变量不管在什么语种中都是最难维护的,因为到处都有可能修改里面的值,或改变整个全局变量。
2、在注册时候我们会在多个地方在calls中注册"函数名称",将来如果其他开发人员,看见这个变量会一头雾水的。——东一榔头,西一棒子。
总结:所以最终我们决定放弃这个方法。想出了下面的方法,我们管它叫钩子机制,也许名称上有点不够直观,呵呵大家就权当学习整个方法吧。
钩子机制
钩子机制是这样的,大家按照某一规则写一个方法(这个规则在方法名称上),然后页面加载完之前,统一执行所有的钩子函数。
注意callHooks方法,里面的局部变量s就是钩子函数名称中一定要有的内容。——这是使用钩子的方法!
// 处理钩子的对象var hook = (function(){return {timer:null,init:function(){this.callHooks('init');}, callHooks:function(init){var s = "hook_" + init + '_event',f = []; for(var h in window){if(h.indexOf(s) != 0) continue;f.push(h);} this.hooksTimeout(f);}, hooksTimeout:function(hooks){if(0 === hooks.length){if(this.timer) clearTimeout(this.timer);return;} var h = hooks.shift();window[h].apply();window[h] = undefined;window.setTimeout(function(){hook.hooksTimeout(hooks);}, 200);} } }()); // 钩子1 var hook_init_event_tpl_html = function(){document.getElementById('test').innerHTML = 'This is HTML!'; } // 钩子2 var hook_init_event_tpl_console = function(){console.log('This is console!'); } // 最好在页面加载完之前调用,也就是在window.onload()之前 hook.init();
总结
很多问题,如果大家一起讨论是很有帮助的,在这过程中我们能学到很多东西,我们也可以在这过程中从牛人身上学到很多方法和思维过程,几乎每次的技术讨论会我都有不菲的收获——我不知道这是不是传说中的“头脑风暴”。
推荐
原文地址:http://www.cnblogs.com/baochuan/archive/2012/06/11/2542048.html
电脑维修,网站建设,软件开发立即联系
我的各种联系方式:
楼主的博客 楼主的的论坛 楼主的的淘宝小店
我的新浪微博
我的腾讯微博
Javascript 钩子机制——开会得出的结论相关推荐
- JavaScript中的钩子(钩子机制\钩子函数\hook)是什么?
我的博客https://www.ideaopen.cn/ 首先,看到我们的标题: JavaScript中的钩子(钩子机制\钩子函数\hook) 是什么? 我们前端的JavaScript中,经常提到钩子 ...
- javascript事件机制与jQuery.bind的补充说明
在之前的文章javascript 事件机制 与 jQuery.Bind中,为了说明冒泡阶段中Event Handler Function的表现,我使用了event.data来记录触发function的 ...
- javascript执行机制
转自:ssssyoki 这一次,彻底弄懂 JavaScript 执行机制 在掘金上讲解js执行机制的文章,收获很多.故复制过来,做复习笔记用 不论你是javascript新手还是老鸟,不论是面试求职 ...
- javascript运行机制
阮一峰的网络日志 » 首页 » 档案 搜索 上一篇:乔布斯的管理课 下一篇:编译器的工作过程 分类: JavaScript JavaScript 运行机制详解:再谈Event Loop 作者: 阮一峰 ...
- Git之深入解析如何借助Git的配置方法和钩子机制来自定义Git需求
一.前言 到目前为止,我们已经了解了 Git 基本的运作机制和使用方式,学习了许多 Git 提供的工具简单且有效地使用它,可以高效地帮助我们工作,提升我们的效率. 如果还不清楚 Git 的基础使用流程 ...
- JavaScript 执行机制
前端开发,一篇文章让你彻底搞懂,什么是JavaScript执行机制!:https://zhuanlan.zhihu.com/p/139261821 大白话讲解 JavaScript 执行机制,一看就懂 ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容) – 叶小钗
这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅,文中难 ...
- vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解 前言 js钩子函数运行时间 js钩子函数的过渡或动画 总结 结语 前言 转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
- 宏事件、微事件、 JavaScript 执行机制
案例预热: setTimeout(function(){console.log('定时器开始啦')});new Promise(function(resolve){console.log('马上执行f ...
最新文章
- 【压缩率3000%】上交大ICCV:精度保证下的新型深度网络压缩框架
- 在线编写php文件,php单文件版在线代码编辑器_php实例
- AtCoder3950 [AGC022E] Median Replace(DFA + dp)
- 【Windows 8 Store App】学习二:ResourceLoader
- [ 总结 ] 删除通过find查找到的文件
- R语言金融基础:tidyquant获取数据(股票每日行情)
- Unicode编码表/常用码表(内容多、卡)
- DeepFaceLab 新手入门教程
- html3D创意相册附源码
- CentOs7下Zabbix安装教程——zabbix server安装
- 遗传算法 python 简书_基本遗传算法介绍
- 【科研人应该知道的网站】查阅文献+学习+代码+开发+其他——研究生必备学习网站,研究生应该知道的学习网站
- opencv-python实际演练(二)军棋自动裁判(4)棋子图像提取算法的改进
- 五子棋网络对战 java实现
- 外贸软件进出口内贸综合型管理解决方案
- 将应用程序添加到鼠标右键发送到
- python实战-HTML形式爬虫-批量爬取电影下载链接
- debian 6.0.5下RT5370无线网卡驱动安装
- 适合环保工程行业的项目管理软件
- 第四讲:1.定时、延时任务控制小台灯打开/关闭