2010-05-18 90 views
1

我注意到大多數JavaScript框架的一個事情是查找/訪問DOM元素的最常見方法是使用CSS選擇器。JS框架不使用CSS選擇器?

但是,這通常需要框架包含CSS選擇器解析器,因爲它們需要支持選擇器,而瀏覽器本身不支持,最重要的是框架擁有專有擴展。

我認爲這些解析器很大且很慢。擁有一些不需要解析器的東西不是更有效率嗎?這樣的鏈式方法調用?

有些人喜歡:的

id("example").children().class("test").hasAttribute("href") 

代替

$("#example > .test[href]") 

是否有周圍的任何框架,做這樣的事情?他們在性能和大小方面與jQuery和朋友相比如何?

編輯:你可以認爲這是一個理論討論主題。我不打算在接近furure的任何實際項目中使用除jQuery以外的其他任何東西。我只是想知道爲什麼沒有其他的,可能更好的方法。

+4

我想你的意思是*專有*,而不是* propitiatory *。我的意思是,我還沒有看到任何一個單一的框架。 :) – Robusto 2010-05-18 15:46:13

回答

3

DOM遍歷和操作是當前流行的JavaScript框架中最有用的功能之一,因爲它們有效處理跨瀏覽器問題的方式。如果你正在使用DOM,你最終會需要這種功能,而且你自己寫的任何東西肯定會比最好的方法效率低。

就速度而言,我會想象從解析選擇器的輕微性能會被引擎固有的優化所抵消。如果您依賴程序員指定路徑(即您的示例),那麼您可能錯過了您不知道存在的優化機會。舉個例子,假設它最終從右到左更快(首先用hrefs找到所有class =「test」,然後檢查父母)。你會依靠程序員來記住這些優化怪癖。

+0

我不認爲跨瀏覽器進入此。就我所見,解析只是第一步。理解/解析選擇器之後,需要找到這些元素,並且我會說這兩種方法都會使用類似的(相同的?)方法來實現。主要區別在於理解選擇器(一邊是字符串解析,另一邊是對象和方法調用)。 – RoToRa 2010-05-18 16:57:41

+1

$(「div span:first-child」)在IE6中工作,儘管沒有實現CSS僞選擇器。這就是我所說的混淆跨瀏覽器問題的意思。不明白你的意思? – Andrew 2010-05-18 17:18:14

+0

我在說的是:無論瀏覽器運行什麼瀏覽器,無論瀏覽器支持哪些功能,解析器都會執行相同的操作。即使Firefox(例如)支持':first-child',選擇器仍然需要由庫進行解析,因爲庫無法確定瀏覽器是否支持選擇器,直到它被解析。在我的理論庫中將會有一個'.firstChild()'方法,它可以立即利用瀏覽器的功能,而無需解析任何東西。 – RoToRa 2010-05-19 08:31:54

3

注意多長時間。每個人都使用CSS風格的選擇器是有原因的。

jQuery的Sizzle庫已針對解析器速度進行了優化,因此您不必太擔心。

+0

嗯,我不認爲這種簡短總是更好。我認爲我的例子有更好的可讀性。而且我知道Sizzle速度很快,我想知道非分析器解決方案是否會更快 - 甚至更小。 – RoToRa 2010-05-18 16:48:39

+0

如果你知道CSS(你應該),jQuery版本至少是可讀的,如果不是更多的話。 – DisgruntledGoat 2010-05-18 19:01:41

1

從我讀過的這些庫(或JQuery atleast)中儘可能使用瀏覽器原生功能。這意味着你可以通過堅持簡單的ID和類來儘可能地使用css選擇器,而且影響最小。

我個人並沒有注意到這些庫的速度問題。在構建Web應用程序時,幾乎所有的速度問題都來自網絡通信,因此提高應用程序響應速度的最佳方法是減少對服務器進行的查詢次數。

例如,我將使用JSON一次性傳遞和存儲更多數據(即使其中一些可能永遠不需要),而不是做很多小的查詢。

正如SLak所暗示的那樣,css選擇器使代碼可讀性和長期維護更容易,並且縮短了編碼時間。正如Andrew所說,這些圖書館還爲您處理跨瀏覽器問題,從而導致脫髮率較低。