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();

 

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

 分享到騰訊微博

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM