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