JavaScript 框架提供了如此多的功能,以至於一不小心就會掉進坑裡去。 對工具庫依賴得越多,在修改或維護時一個小小的改的很可能就會影響到其他的功能(俗稱 處處是地雷,走路需謹慎),特別是維護多年前的遺留代碼時。 我經常看到的一個錯誤是關於 jQuery的 trigger, trigger允許開發者手動觸發某些事件。 這個功能真的非常強大與好用,但是請遵守約定,不要觸發JS中那些原生的事件名稱!
注:我知道,其他JS框架也提供這種功能 —— 我只用jQuery作為一個例子,因為我看到了它的受歡迎程度,最近又剛好碰上這個問題。 而所有工具類庫都有可能引發同樣的問題。 比如 MooTools使用 的 fireEvent 等。
下面是使用 trigger 來完成任務的一個典型例子:
. 代碼如下:
// 監聽 click 事件
jQuery('.tabs a').on('click', function() {
// 執行某些操作,比如切換界面,加載內容等..
});
// 在最後一個 a 標簽上觸發 click 事件
jQuery('.tabs a').last().trigger('click');
上面的代碼將會打開給定index的tab標簽。 我完全理解開發者使用 trigger 來處理這些事情的原因,通常是因為要觸發的函數在全局范圍內不可用,而觸發事件是很容易的,也總是可用的。 問題是,使用原生的事件名稱來觸發可能 ... 觸發 ... 一些無法言說的傷。讓我們來看看在網站的其他地方添加的內容:
. 代碼如下:
// 監聽 body 內部的所有 click 事件
jQuery('body').on('click', 'a', function() {
// 此處可以進行一些業務邏輯處理 ...
// 滿足條件(Condition met), 則進行另外一些操作!
if(conditionMet) {
// 刷新頁面?
// 打開子菜單?
// 提交表單?
// ... 燈燈蹬蹬,Intel
}
});
現在有一個問題 —— 選項卡單擊事件可能被其他完全獨立的部分監聽著,這處理起來就比較麻煩。 呵呵,最好的解決方案是使用一個自定義的事件名稱跟在原生事件後面:
. 代碼如下:
// 監聽 click 事件時,帶上自定義的事件
jQuery('.tabs a').on('click tabs-click', function() {
// 切換 tab, 加載內容,等等等等 ...
});
// 在最後一個標簽上觸發 "假" 的事件
jQuery('.tabs a').last().trigger('tabs-click');
現在你的事件觸發器將不再和頁面上的其他監聽器起沖突。 保守的開發人員對我說,你可能想要避免使用 trigger (其他工具庫也是一樣的),但好歹你也應該添加一個自定義事件名稱!