我看到的現象越來越多的是綁定到特定頁面上的特定元素的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模式。
這是否有任何理由?我剛剛描述的技術有沒有一些很大的缺點,我不知道?
使用類當然不會消除開發人員有意識地以鬆散耦合的方式開發代碼的必要性。實際上,在每個頁面只出現一次特定元素的情況下,最好使用ID。 我想我不是主張類,而是一種編寫Javascript的方式,以便它可以與* patterns *和* micro-formats *一起使用,而不是每個獨特的特定用例的特定模式。 – Jonathan 2010-06-07 05:55:25
UL選擇器在那裏,因爲假定(並強制)該菜單應該是結構化列表似乎是合理的。這符合*語義HTML *的最佳實踐 - 使用適當的HTML元素來表示結構化數據,而不是用Divs和Spans做所有事情。 – Jonathan 2010-06-07 05:56:46
就性能/效率而言,你可能很關心班級不快。有很多方法可以緩解這種情況,但是它們會以犧牲乾淨的HTML/JS分離爲代價。我想有一種方法來處理它,就是爲IE6提供一個單獨的JS(唯一能夠讓人頭痛的瀏覽器),它直接綁定到ID而不是類。 – Jonathan 2010-06-07 05:58:48