這篇文章主要講解了“JavaScript鉤子機(jī)制原理是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript鉤子機(jī)制原理是什么”吧！

成都創(chuàng)新互聯(lián)公司基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)綿陽(yáng)服務(wù)器托管報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。

問題

是這樣的：我們的代碼已經(jīng)歷史很久了，就這一套框架已經(jīng)快5年了，在這中間大家也沒有標(biāo)準(zhǔn)的代碼規(guī)范，很隨意的進(jìn)行了代碼編寫，所以出現(xiàn)了很多問題：

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

2、代碼結(jié)構(gòu)混亂，分工不明確，本來公共類做的事情，導(dǎo)航類也做了類似的操作。

3、回調(diào)函數(shù)的使用，出現(xiàn)多個(gè)回調(diào)函數(shù)，從而出現(xiàn)一個(gè)回調(diào)函數(shù)會(huì)覆蓋前一個(gè)回調(diào)函數(shù)的情況。

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

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

委托方法

我們討論過使用委托方法，把所有的回調(diào)函數(shù)注冊(cè)到一個(gè)數(shù)組變量中，然后集中處理數(shù)組變量中的函數(shù)，這樣就不會(huì)出現(xiàn)后面的函數(shù)沖擊前面的函數(shù)問題。——因?yàn)樵瓉砘卣{(diào)函數(shù)就一個(gè)。

下面是具體的代碼過程

定義全局變量

                         var calls = [];         

注冊(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();        }  }

問題：

1、我們不難發(fā)現(xiàn)我們必須要有全局變量calls，我們知道全局變量不管在什么語(yǔ)種中都是最難維護(hù)的，因?yàn)榈教幎加锌赡苄薷睦锩娴闹担蚋淖冋麄€(gè)全局變量。

2、在注冊(cè)時(shí)候我們會(huì)在多個(gè)地方在calls中注冊(cè)"函數(shù)名稱"，將來如果其他開發(fā)人員，看見這個(gè)變量會(huì)一頭霧水的。——東一榔頭，西一棒子。

總結(jié)：所以最終我們決定放棄這個(gè)方法。想出了下面的方法，我們管它叫鉤子機(jī)制，也許名稱上有點(diǎn)不夠直觀，呵呵大家就權(quán)當(dāng)學(xué)習(xí)整個(gè)方法吧。

鉤子機(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();

感謝各位的閱讀，以上就是“JavaScript鉤子機(jī)制原理是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)JavaScript鉤子機(jī)制原理是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！