JavaScript 鉤子機(jī)制
介紹
今天大家開會(huì)共同解決了一些javascript方面的問(wèn)題，大家一起想辦法，最終大家選擇了鉤子機(jī)制。
我把整個(gè)過(guò)程與大家分享一下，如果有誤，請(qǐng)大家指正。
問(wèn)題
是這樣的：我們的代碼已經(jīng)歷史很久了，就這一套框架已經(jīng)快5年了，在這中間大家也沒(méi)有標(biāo)準(zhǔn)的代碼規(guī)范，很隨意的進(jìn)行了代碼編寫，所以出現(xiàn)了很多問(wèn)題：
1、如制造了很多重復(fù)的輪子。一套方法在多個(gè)文件中出現(xiàn)，大家調(diào)用的也五花八門，所以同事在一個(gè)方法（登錄）中添加邏輯的時(shí)候發(fā)現(xiàn)，多個(gè)地方都有這樣登錄操作，修改起來(lái)非常麻煩。
2、代碼結(jié)構(gòu)混亂，分工不明確，本來(lái)公共類做的事情，導(dǎo)航類也做了類似的操作。
3、回調(diào)函數(shù)的使用，出現(xiàn)多個(gè)回調(diào)函數(shù)，從而出現(xiàn)一個(gè)回調(diào)函數(shù)會(huì)覆蓋前一個(gè)回調(diào)函數(shù)的情況。
前兩個(gè)問(wèn)題，我首先把所有的入口文件（調(diào)用登錄的方法）統(tǒng)一使用公共類中的方法，并且是一個(gè)入口一個(gè)入口的進(jìn)行驗(yàn)證，保證代碼的安全性、穩(wěn)定性。并且不刪除原有的方法，害怕有遺漏。然后計(jì)劃是一個(gè)月之后，再進(jìn)行一次全站搜索看是否有人還使用其他接口，然后刪除那些重復(fù)的方法。
下面主要討論第三個(gè)問(wèn)題的解決方法。
委托方法
我們討論過(guò)使用委托方法，把所有的回調(diào)函數(shù)注冊(cè)到一個(gè)數(shù)組變量中，然后集中處理數(shù)組變量中的函數(shù)，這樣就不會(huì)出現(xiàn)后面的函數(shù)沖擊前面的函數(shù)問(wèn)題。——因?yàn)樵瓉?lái)回調(diào)函數(shù)就一個(gè)。
下面是具體的代碼過(guò)程
定義全局變量
- <head>
- <script type="text/javascript">
- var calls = []; </script>
- </head>
注冊(cè)方法
- function need_register(){
- }
- function test(){
- calls.push('need_register');
- }
最終執(zhí)行注冊(cè)代碼
- function callback(){
- var calls = calls || [];
- if(calls.length === 0) return false;
- for(var i=0, iLen = calls.length; i < iLen; i++){
- calls[i].apply();
- }
- }
問(wèn)題：
1、我們不難發(fā)現(xiàn)我們必須要有全局變量calls，我們知道全局變量不管在什么語(yǔ)種中都是最難維護(hù)的，因?yàn)榈教幎加锌赡苄薷睦锩娴闹担蚋淖冋麄€(gè)全局變量。
2、在注冊(cè)時(shí)候我們會(huì)在多個(gè)地方在calls中注冊(cè)"函數(shù)名稱"，將來(lái)如果其他開發(fā)人員，看見(jiàn)這個(gè)變量會(huì)一頭霧水的。——東一榔頭，西一棒子。
總結(jié)：所以最終我們決定放棄這個(gè)方法。想出了下面的方法，我們管它叫鉤子機(jī)制，也許名稱上有點(diǎn)不夠直觀，呵呵大家就權(quán)當(dāng)學(xué)習(xí)整個(gè)方法吧。
#p#
鉤子機(jī)制
鉤子機(jī)制是這樣的，大家按照某一規(guī)則寫一個(gè)方法（這個(gè)規(guī)則在方法名稱上），然后頁(yè)面加載完之前，統(tǒng)一執(zhí)行所有的鉤子函數(shù)。
注意callHooks方法，里面的局部變量s就是鉤子函數(shù)名稱中一定要有的內(nèi)容。——這是使用鉤子的方法！
- // 處理鉤子的對(duì)象
- 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(this.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!');
- }
- // ***在頁(yè)面加載完之前調(diào)用，也就是在window.onload()之前
- hook.init();
總結(jié)
很多問(wèn)題，如果大家一起討論是很有幫助的，在這過(guò)程中我們能學(xué)到很多東西，我們也可以在這過(guò)程中從牛人身上學(xué)到很多方法和思維過(guò)程，幾乎每次的技術(shù)討論會(huì)我都有不菲的收獲——我不知道這是不是傳說(shuō)中的“頭腦風(fēng)暴”。
原文鏈接：http://www.cnblogs.com/baochuan/archive/2012/06/11/2542048.html
【編輯推薦】
