JavaScript操作聽衆

我通常實現一個選擇框的方法是：JavaScript操作聽衆

<select size="1" name="example_length" onchange="callSomeMethod"> 
    <option value="10" selected="selected">10</option> 
    <option value="25">25</option> 
    <option value="50">50</option> 
    <option value="100">100</option> 
    </select>

我已經附着在onclick事件的動作

還有另一種方式check the dropdown source here

<select size="1" name="example_length"> 
    <option value="10" selected="selected">10</option> 
    <option value="25">25</option> 
    <option value="50">50</option> 
    <option value="100">100</option> 
    </select>

在第二實施目前尚不清楚在onchange事件中註冊了什麼行動

問題：在第二個實現中，我們通常使用一些JavaScript庫來註冊這些動作，但是我覺得第一個實現是清晰的，可讀的並且更容易調試，而第二個實現有點令我費解，所以，我們爲什麼要使用第二種方法以及如何調試？

任何有關此鏈接將不勝感激。

來源

2011-11-22 dpsdce

第二個似乎是利用jQuery和一個名爲dataTables的庫（它不僅僅是簡單地將onChange事件綁定到選擇列表） –

@Drav我知道jquery或datatables庫是綁定事件，但問題是如何它是否在第一個實現中得分，因爲我覺得第一種方法更具可讀性且更易於調試。那麼有什麼樣的規範/最佳實踐，哪一個可以使用，爲什麼？ – dpsdce

我發現它更清晰，讓我的代碼與我的HTML標記分開。當處理程序應用於頁面上的多個元素時，尤其如此。當我可以訪問代碼中的單個地方時（這可能包含在可以重複使用多個頁面的腳本中）並進行更改，而不必在整個代碼中進行搜索並使其可能會改變許多單個元素以反映功能的小變化。

此外，我認爲當代碼不穿插標記時，它更容易調試代碼。使用Firebug或IE開發人員工具，您可以在JavaScript代碼中設置斷點，檢查值並遍歷代碼以查找任何錯誤。另一個極端是，將整個函數放入標記應用的點擊處理程序中使得基本上不可能進行調試。通過引入一個被調用的單獨函數，您已經朝着緩解這一方向邁出了一步。通過代碼應用處理程序通過允許調試處理函數的應用程序來改善這一點。

另一個好處，這很微妙，就是單獨應用處理程序會迫使您使用更好的語義和命名約定。如您所見，一個缺點是，當代碼內聯時，通過檢查可以更容易地看到正在應用的處理程序。通過代碼應用它們時，必須使用更好的語義，用有意義的類名稱裝飾受影響的元素，使用良好的描述性元素和函數名稱，並重構爲可重用的代碼組件（充分利用）。這看似不利的地方，實際上有助於強制你編寫更好，更易維護的標記和JavaScript。

來源

2011-11-22 04:06:18 tvanfosson

第二種方法是分離關注領域的方法。網頁關注的三個方面是介紹，結構和功能。 CSS處理演示文稿。 HTML處理結構。和Javascript處理功能。

某些Javascript代碼會在某處註冊下拉列表所需的功能，因此HTML只關注結構;這是一個下拉列表。

來源

2011-11-22 03:53:13

JavaScript操作聽衆

回答

相關問題