歡迎光臨
每天分享高質量文章

Visual Event :快速查看 DOM 上系結的 JS 事件

Javascript中的事件經常被認為如謎一般不可解。Javascript是一個事件驅動的語言,在這樣的前提下前面的看法是很奇怪,但是說到它們的複雜本質和除錯難度時,這樣的看法又是很正常的。為此,我創建了可視化事件(Visual Event)來查看DOM節點上系結的事件。

簡介

Visual Event是一個開源 Javascript 書簽,能提供系結在DOM元素上的事件除錯信息。Visual Event能顯示如下信息:

1、哪一個元素有事件系結

2、某元素上系結的事件型別

3、事件觸發後運行的代碼段

4、定義系結函式的源檔案和行號(僅限於WebKit和Opera瀏覽器)

除了對除錯你自己的代碼大有用途,Visual Event還能被用作教學工具,顯示發起了多少網站。

Visual Event是開源軟體(GPLv2),並且在GitHub上有一個Git倉庫目錄,供你去提交或照你所想的去修改

安裝

由於Visual Event是一個小書簽,所以在任何網頁上安裝和運行它都很簡單:

1、拖拽右側的“Visual Event”鏈接到你的書簽欄上:Visual Event

2、載入一個使用了瀏覽器所能支持的js庫的網頁

3、點擊書簽欄中的“Visual Event”

4、查看系結在文件元素上的事件處理器

自動載入的Visual Event例子在這裡有提供。這個例子使用Data Tables創建了一個不同元素上系結了許多事件的測試頁面。

它是如何工作的

W3C 沒有提供標準的方法推薦能發現特定元素上系結事件的DOM接口。儘管這似乎是個疏忽,也有一個建議方法能將3級DOM規範的 eventListenerList 屬性包含進來,但很不幸的是,在後來的草案中這個方法被移除了。因此,我們不得不研究獨立的通常能維護一個事件的高速快取的Javascript庫(所以它們能在後來被移除並執行其他有用的抽象化)。

因此,Visual Event為了能顯示事件,它必須能夠從 JS 庫中解析出事件信息。目前Visual Event能支持的庫有如下這些:

  • DOM 0 events

  • jQuery 1.2+

  • YUI 2

  • MooTools 1.2+

  • Prototype 1.6+

  • Glow

  • ExtJS 4.0.x

如何參與

Visual Event是個開源軟體,在GPLv2證書下可以獲得。通過Git實現開源控制,而且該專案在GitHub 上有一個網頁。事實上任何對Visual Event的提高有幫助的建議都是十分受歡迎的!如果你遇到什麼問題,請在 GitHub上將你遇到的問題作為討論(issue)展開,包括出現問題的網頁鏈接地址。Fork代碼以及合併分支(pull request)也同樣被鼓勵!

你可能有一個很感興趣的地方,就是如何能添加對額外Javascript庫的支持。關鍵是能夠獲取到該庫使用的事件快取,因為沒有事件快取就不可能知道哪個節點有事件以及系結代碼。

VisualEvent類有一個靜態陣列叫做“VisualEvent.parsers”,它是一個函式的陣列——想增加一個新的解析器,只需要將你的函式加到這個陣列里。這個函式必須傳回一個帶有以下引數的javascript物件陣列:

[

{

"node": {element},

// The DOM element that has attached events

"listeners": [

// Array of attached events

{

"type": {string},

// The event type - click, change, keyup etc

"func": {string},

// The code that will handle the event, from Function.toString()

"removed": {boolean},

// If the event has been removed or not (typically will be false, but used if the library doesn't remove the event from its cache)

"source": {string}

// Library name and version that attached the event (e.g. "jQuery 1.7")

},

...

]

},

...

]

建立Visual Event

為了能運行本地的Visual Event副本,你必須先建立一個Visual Event,因為這個過程會有檔案級聯操作,即將庫中的解析器移動到主檔案中。建立的過程中還同時會建立 JSDoc文 檔並壓縮 JS 檔案(除非是除錯生成的)。

為了建立Visual Event,你在終端只需要一個能運行bash腳本並能輸入“./build .sh debug”命令的系統。這會在建立Visual Event和正確的載入器的目錄中的“builds”目錄里創建一個新目錄(註意時間戳是用於防止開發和部署過程中boolmarklet的快取問題)。以下是建立過程的腳本的使用實體:

Visual Event build script - usage:

./build.sh [loader-dir] [debug]

loader-dir - The web-address of the build files. Note that the build

directory name is automatically appended. For example:

localhost/VisualEvent/builds - default if no option is provided

sprymedia.co.uk/VisualEvent/builds

debug - Debug indicator. Will not compress the Javascript

Example deploy build:

./build.sh sprymedia.co.uk/VisualEvent/builds

Example debug build:

./build.sh localhost/VisualEvent/builds debug

檔案“bookmarklet.html”是為了使你能方便地建立你自己的書簽載入器。通常你只需要修改書簽的路徑地址。鏈接會在每次按鍵時更新,你只需要像你安裝其他書簽插件一樣去安裝它。

原文出處:www.sprymedia.co.uk

譯文出處:伯樂在線 – fzr

鏈接:http://web.jobbole.com/82503/


赞(0)

分享創造快樂