2012-08-16 86 views
17

假設我在視圖中有一個函數,當某種狀態發生更改時會觸發該函數。 什麼是最好的命名它,爲什麼?Backbone.js命名事件處理程序的最佳做法

  • stateChange
  • stateChanged
  • onStateChange
  • onStateChanged
+3

有沒有什麼特別的,可以阻止這個問題被標題爲「_JavaScript_事件處理程序命名的最佳實踐」? – conny 2014-12-02 06:24:00

回答

13

我個人perefer使用onEventName名稱爲保持DOM事件處理程序本地命名約定。

myElement.onclick = function() { /* ... */ }對於click事件。

所以對於myEvent我使用的是名爲onMyEvent處理程序。

如果我有事件stateChange,然後我會用onStateChange處理程序。

但是真正的這個問題對於開發團隊和代碼風格約定更爲具體。

因此,這類問題的主要目標是保持所有部分中的代碼風格相同以確保可讀性。

因此,如果你在一個團隊中工作,只要堅持團隊的代碼編寫約定,並且如果你一個人在現有的代碼上工作,試着保持它的代碼風格(當然,如果這種風格不是顯而易見的) 。

更新:理解。

什麼是事件?粗略地說,這是一個在程序外部或內部發起的動作,換句話說就是系統中發生的事情,例如, (用戶點擊鼠標或某個程序向系統發送鼠標點擊信號)的某些狀態改變(鍵盤狀態,鼠標狀態,I/O設備狀態等)無關緊要。

說瀏覽器窗口訂閱獲得的一些事件和操作系統儘快將它們發送給它的通知,有事情發生的時候,我們假定在同一時間。因此,如果用戶在瀏覽器窗口處於活動狀態並且文檔具有焦點時單擊鼠標,則瀏覽器會將文檔記錄爲觸發click事件。在這裏我們的onclick處理程序開始其調用。換句話說,系統說我們現在發生變化的一些狀態。我們正在處理這個更改而不是處理一個事實,說我們的狀態已經改變。

讓我們假設,我們的處理程序命名爲onClicked由於處理程序的名稱用過去式來說,我們可以得到一個合理的問題:「點擊時,它發生了多久?點擊了多少次?嗯,根本不可能處理這個動作(或動作)爲時已晚...「。所以這個名字告訴我們過去某個時候發生了一些事情。

相反,當我們的處理器命名爲onClick這顯然是click事件剛剛解僱,解僱一次,我們被立即通知了。而且我們要手柄單擊事件 - 信息說我們,鼠標的狀態現在改變權(鼠標點擊,但事件點擊的)。

所以,當我們需要檢查一些狀態已經改變,或者不過去時態的名字更適合的情況下。例如。如果變量存儲state = 1我們可以調用函數isStateChanged();將在state變量,在當前時刻的實際值進行比較的值。這裏過去式是命名的好選擇。

8

onStateChanged因爲每當某種狀態的改變此功能觸發。

+0

這個答案很有偏見,基於觀點。如果您要求意見,這很好。然而,我認爲OP比想法更想知道慣例或最佳實踐。我推薦@ eugene-naydenov的答案http://stackoverflow.com/a/11990334/545296 – therealklanni 2013-09-05 20:51:32

3

我的選擇是對stateChanged原因:

  • stateChange看起來像一個順序,看起來像它收到的新狀態設置了一個param。
  • onStateChangeonStateChanged是存儲處理程序的更多關鍵字,而不是處理程序本身的名稱。

恕我直言

+1

這也是我一直在使用的方法。 'something.onStateChange = function stateChanged(){/ *處理狀態變化* /};'爲「on-」。當將一個回調參數傳遞給'.live('或'.click('時,我通常更喜歡'.click(function handleClick(){/ * do stuff * /}'。 – conny 2014-12-02 06:19:02

1

我通常會選擇2個因子事件名稱。隨着應用程序的規模不斷擴大,您可能會有多個對象進行狀態更改,或者可能是一個控制器可以爲多個對象廣播更改事件,因此您希望能夠區分代碼和頭部:

Object1:event 
Object2:event 

至於哪個事件名稱,我認爲這歸結爲個人喜好和一致性。

6

我搜索了幾個名字,並注意到返回結果的數量。你可以得到的最常見的形式相對普及的一些指示事件處理程序:

stateChanged 168k 
stateChange 81k [1] 
handleStateChange 61k 
onStateChange 59k 
onStateChanged 12k 
beforeStateChange 2k 

[1]結果顯示stateChange大多采用作爲一個事件,而不是一個處理器的名字。

使用不同的事件類型給出了一個更強的建議朝向onStateChange形式:

change [2] 
onChange 2000k 
onChanged 85k 
handleChange 36k 
beforeChange 27k 
afterChange 22k 

click [2] 
onClick 48000k 
onClicked 58k 
handleClick 50k 
beforeClick 8k [3] 

onDrag 100k 
handleDrag 36k 
beforeDrag 32k 
afterDrag 4k 
onDragged 5k 

[2]無關的編程結果太多。

[3]顯然,某些微軟的API可以預見,當用戶要點擊。

+1

關於subtext [3],並不是點擊是預料之中的,而是將事件傳遞給可能附加的任何處理程序,並給予開發者以某種方式修改事件數據的機會(也許阻止事件繼續或修改默認行爲)。很多框架都做同樣的事情 – therealklanni 2013-09-05 20:44:24

+1

我想說一個笑話,但是謝謝 – SharkAlley 2013-09-06 04:15:11

+0

這不是真正的開玩笑的地方,有人會明確表達它的價值,我留下了評論以確保任何閱讀你的答案的人都不會因爲你的陳述而感到困惑 – therealklanni 2013-09-06 07:12:00

0

我認爲應該根據動作發生的實際時刻做出區別。對我而言,onStateChange意味着它正在改變,我可以在改變之前就這個技術性的角度通知我。 OnStateChanged意味着動作已經發生,並且在它結束時通知我。

所以,在onStateChange和onStateChanged之間有一個重要的意圖區別。 第一個說「爲自己做這個改變做準備」,而第二個說「已經發生了」。

編輯:我被意圖帶走了,並沒有意識到命名本身。 爲什麼打開前綴?這是爲處理程序保留的。處理程序將執行與該事件相關的事情。 所以我會去stateChange和stateChanged。