JavaScript 鉤子機制

作者：川山甲 2012-06-12 09:21:53

開發前端

我們討論過使用委托方法，把所有的回調函數注冊到一個數組變量中，然后集中處理數組變量中的函數，這樣就不會出現后面的函數沖擊前面的函數問題。——因為原來回調函數就一個。

介紹

今天大家開會共同解決了一些javascript方面的問題，大家一起想辦法，最終大家選擇了鉤子機制。

我把整個過程與大家分享一下，如果有誤，請大家指正。

問題

是這樣的：我們的代碼已經歷史很久了，就這一套框架已經快5年了，在這中間大家也沒有標準的代碼規范，很隨意的進行了代碼編寫，所以出現了很多問題：

1、如制造了很多重復的輪子。一套方法在多個文件中出現，大家調用的也五花八門，所以同事在一個方法（登錄）中添加邏輯的時候發現，多個地方都有這樣登錄操作，修改起來非常麻煩。

2、代碼結構混亂，分工不明確，本來公共類做的事情，導航類也做了類似的操作。

3、回調函數的使用，出現多個回調函數，從而出現一個回調函數會覆蓋前一個回調函數的情況。

前兩個問題，我首先把所有的入口文件（調用登錄的方法）統一使用公共類中的方法，并且是一個入口一個入口的進行驗證，保證代碼的安全性、穩定性。并且不刪除原有的方法，害怕有遺漏。然后計劃是一個月之后，再進行一次全站搜索看是否有人還使用其他接口，然后刪除那些重復的方法。

下面主要討論第三個問題的解決方法。

委托方法

下面是具體的代碼過程

[[79008]]定義全局變量

<head>  
       <script type="text/javascript">  
              var calls = [];       </script>  
</head>

[[79008]]注冊方法

function need_register(){  
}  
function test(){  
      calls.push('need_register');  
}

[[79008]]最終執行注冊代碼　　　

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中注冊"函數名稱"，將來如果其他開發人員，看見這個變量會一頭霧水的。——東一榔頭，西一棒子。

總結：所以最終我們決定放棄這個方法。想出了下面的方法，我們管它叫鉤子機制，也許名稱上有點不夠直觀，呵呵大家就權當學習整個方法吧。

#p#

鉤子機制

鉤子機制是這樣的，大家按照某一規則寫一個方法（這個規則在方法名稱上），然后頁面加載完之前，統一執行所有的鉤子函數。

注意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(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!');  
}  
 
// ***在頁面加載完之前調用，也就是在window.onload()之前  
hook.init();

總結

很多問題，如果大家一起討論是很有幫助的，在這過程中我們能學到很多東西，我們也可以在這過程中從牛人身上學到很多方法和思維過程，幾乎每次的技術討論會我都有不菲的收獲——我不知道這是不是傳說中的“頭腦風暴”。

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

【編輯推薦】

JavaScript馬賽克遮罩圖片幻燈片切換類
對開發者非常有用的JavaScript庫
網易郵箱前端JavaScript編碼規范
javascript解決圖片縮放及其優化
看JavaScript如何實現頁面自適

責任編輯：張偉來源：川山甲的博客

JavaScript