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