2010-06-07 17 views
2

我看到的現象越來越多的是綁定到特定頁面上的特定元素的Javascript代碼,而不是綁定到元素或UI模式的基於類的Javascript注入有什麼缺點嗎?

例如,假設我們有一對夫婦的動畫菜單的網頁上:

<ul id="top-navigation"> 
    ... 
</ul> 

<!-- ... --> 

<ul id="product-list"> 
    ... 
</ul> 

這兩個菜單可能在同一頁上或在不同的頁面存在,一些網頁可能沒有任何菜單。

我會經常看到的Javascript代碼是這樣的(對於這些例子中,我使用jQuery):

$(document).ready(function() { 
    $('ul#top-navigation').dropdownMenu(); 
    $('ul#product-selector').dropdownMenu(); 
}); 

注意到這個問題?

Javascript與的特定實例緊密耦合,而不是UI模式本身。

現在不會這麼簡單(而且更乾淨)來做這件事嗎? -

$(document).ready(function() { 
    $('ul.dropdown-menu').dropdownMenu(); 
}); 

然後我們可以把「下拉菜單」級上我們的名單像這樣:

<ul id="top-navigation" class="dropdown-menu"> 
    ... 
</ul> 

<!-- ... --> 

<ul id="product-list" class="dropdown-menu"> 
    ... 
</ul> 

做的事情有以下的好處是這樣的:

  • 簡單Javascript - 我們只需要將一次附加到課程中。
  • 我們避免尋找特定頁面上可能不存在的特定實例。
  • 如果我們刪除一個元素,我們不需要通過Javascript來查找該元素的附加代碼。

我相信類似這種技術是由alistapart.com上的某些文章開創的。

我很驚訝這些簡單的技術還沒有得到廣泛採用,我仍然看到'最佳實踐'代碼示例和Javascript框架直接引用UI實例而不是UI模式。

這是否有任何理由?我剛剛描述的技術有沒有一些很大的缺點,我不知道?

回答

1

首先我同意你的觀點,一般來說,使用類方法更好。

但是我不認爲我會更願意說它的代碼更少耦合到UI。如果你想想看,如果代碼假定ID「富」與類名「富」,你還必須知道與UI的工作時。他們之間仍然存在着「契約」 - 無論你是通過身份證還是班級認證都沒有什麼不同。

一個缺點使用類方法我想像是速度 - 它應該是更快地找到由ID比找到類潛在的多個元素中的特定元素。雖然這種差異可能完全可以忽略不計。

但是,如果您的代碼設計爲附加多個行爲,就像在您的雙下拉菜單中一樣,使用類肯定更有意義。由於你的代碼更通用一些,因此你的用戶界面更有可能在不改變代碼的情況下進行定製。

有一件事我會改變你的兩個例子......爲什麼選擇器中的UL?如果代碼知道只有目標是UL纔可能工作,那麼,這是一回事 - 但在這種情況下,最好避免選擇器中的UL,並讓代碼拋出一個有意義的錯誤,如果目標被發現不是UL,以免頁面不做任何事情而沒有任何跡象表明爲什麼(例如因爲UI將ID /類放在OL上)。

所以,換句話說,只是「#foo」或「.foo」此時不‘ul.foo’等

我應該指出的是,萬一有人認爲,UL在某種程度上使選擇更加高效,它沒有,因爲選擇器是從右向左評估的。

+0

使用類當然不會消除開發人員有意識地以鬆散耦合的方式開發代碼的必要性。實際上,在每個頁面只出現一次特定元素的情況下,最好使用ID。 我想我不是主張類,而是一種編寫Javascript的方式,以便它可以與* patterns *和* micro-formats *一起使用,而不是每個獨特的特定用例的特定模式。 – Jonathan 2010-06-07 05:55:25

+0

UL選擇器在那裏,因爲假定(並強制)該菜單應該是結構化列表似乎是合理的。這符合*語義HTML *的最佳實踐 - 使用適當的HTML元素來表示結構化數據,而不是用Divs和Spans做所有事情。 – Jonathan 2010-06-07 05:56:46

+0

就性能/效率而言,你可能很關心班級不快。有很多方法可以緩解這種情況,但是它們會以犧牲乾淨的HTML/JS分離爲代價。我想有一種方法來處理它,就是爲IE6提供一個單獨的JS(唯一能夠讓人頭痛的瀏覽器),它直接綁定到ID而不是類。 – Jonathan 2010-06-07 05:58:48

1

您的方法是首選。

人們以不同方式做事的原因是因爲他們可以並且仍然有效。

相關問題