Unobtrusive Javascript混淆事件處理

你知道我最喜歡什麼令人窒息的javascript嗎？你總是知道當你觸發一個事件時會做什麼。Unobtrusive Javascript混淆事件處理

<a onclick="thisHappens()" />

既然每個人都喝不顯眼的酷樂，那就不那麼明顯了。調用綁定事件可以發生在您的頁面上包含的任意數量的JavaScript文件的任何行上。如果您是唯一的開發人員，或者您的團隊對綁定事件處理程序有某種約定，例如始終使用特定格式的CSS類，則這可能不成問題。但在現實世界中，這使得很難理解你的代碼。

DOM瀏覽器，如螢火蟲看起來他們可以幫助，但它仍然是耗時瀏覽所有元素的事件處理程序的屬性，只是爲了找到一個執行你正在尋找的代碼。即使這樣它通常只是告訴你它是一個匿名函數（），沒有行號。

我發現用於發現觸發事件時JS代碼執行的技巧是使用Safari的分析工具，它可以告訴你JS在特定時間段內執行的情況，但有時可能會有很多JS追捕。

有一定是找出當我點擊一個元素髮生了什麼更快的方法。有人可以請賜我嗎？

來源

2009-10-06 arkanciscan

對此也非常感興趣。 :) – arno 2009-10-06 18:25:42

我發現這個問題http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node/447106#447106 – arkanciscan 2009-10-06 18:36:39

如果你使用jQuery，您可以充分利用其先進的事件系統，並檢查連接的事件處理程序的函數體：

$('body').click(function(){ alert('test')}) 

var foo = $('body').data('events'); 
// you can query $.data(object, 'events') and get an object back, then see what events are attached to it. 

$.each(foo.click, function(i,o) { 
    alert(i) // guid of the event 
    alert(o) // the function definition of the event handler 
});

或者你也可以實現自己的事件系統。

來源

2009-10-06 18:36:43

這很整齊。 – slikts 2009-10-06 18:38:52

稱它是「庫爾援助」似乎不公平。 DOM Level 2事件解決了內聯事件處理的具體問題，例如總是產生衝突。我不回想寫代碼來使用window.onload必須檢查是否有其他人之前分配過它，有時讓它被偶然覆蓋或出於潦草。它還確保更好地分離結構（HTML）和行爲（JS）層。總而言之，這是一件好事。

關於調試，我不認爲有任何的方式來解決事件處理程序是匿名函數，不是嘮叨作者在可能情況下使用命名功能等。如果可以的話，告訴他們它會產生更有意義的調用堆棧，並使代碼更易於維護。

來源

2009-10-06 18:30:25 slikts

退房Visual Event ...這是你可以使用能公開頁面對事件進行了書籤。

來源

2009-10-06 19:25:52 Mottie

要回答你的問題，請嘗試使用Firebug的命令行。這將使您可以使用JavaScript通過ID快速獲取元素，然後遍歷其偵聽器。通常，如果與console.log一起使用，您甚至可以獲取函數定義。

現在，保衛不顯眼：

我在不顯眼的JavaScript找到的好處是，它是一個容易得多，我看到它是什麼的DOM。也就是說，我覺得通常是壞習慣創建匿名函數（只有少數例外）。（我在JQuery中遇到的最大錯誤實際上是在他們的文檔中，匿名函數可能存在於一個下層世界，失敗並不會導致有用的輸出，但JQuery使它們成爲標準。）如果我需要使用Prototype中的bindAsListener之類的東西，我通常只有使用匿名函數的策略。另外，如果JS文件被正確劃分，它們將一次只處理DOM的一個子集。我有一個「有序的複選框」庫，它在只有一個JS文件，然後在其他項目中重新使用。我通常也將給定子庫的所有方法作爲JSON對象或類的成員方法，並且每個js文件都有一個對象/類（就像我正在用更正式的語言）。如果我對「表單驗證代碼」有疑問，我將查看formvalidation.js中的formValidation對象。

同時，我會同意有時候事情會變得遲鈍，特別是在與他人打交道的時候。但混亂的代碼是混亂的代碼，除非你自己工作，並且是一名優秀的程序員，否則無法避免。然而，最後，我寧願處理使用/* */來評論大部分兩三個js文件，以找出行爲不當的代碼，然後通過HTML並刪除onclick屬性。

來源

2009-10-06 19:31:12 cwallenpoole

有一件事：你不應該通過查看HTML代碼能夠看到在JavaScript中會發生什麼。這是什麼滋擾？ HTML是用於結構的。

如果你想檢查什麼事件綁定到某些元素，那麼現在有一個名爲visual event的書籤，而螢火蟲1.6（IIRC）將會有某種事件檢查器。

來源

2009-10-06 20:30:47 wildcard

Unobtrusive Javascript混淆事件處理

回答

相關問題