DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery1.3全新的Sizzle引擎實現CSS選擇器
jQuery1.3全新的Sizzle引擎實現CSS選擇器
編輯:關於JavaScript     

網頁制作poluoluo文章簡介:最重要的改變是啟用了全新的Sizzle引擎來實現CSS選擇器。

John Resig老爺在twitter上宣布jQuery1.3正式發布,直接把2加到3反映了這個版本的重要性不同以往,除了重寫很多重要方法——比如offset(獲取頁面上的各種尺寸和位置數據),創建和插入DOM節點(比如append, before之類,這些方法是JQuery以前速度上的瓶頸之一,我就完全不用它們,但是現在速度提高了6倍)——最重要的改變是啟用了全新的Sizzle引擎來實現CSS選擇器。

從“JQuery”這個名字就能看出,用CSS/XML選擇器查詢頁面元素,是這個javascript庫賴以起家的絕活,最早可以追溯到Dean Edwards的cssQuery,和Simon Willison的getElementsBySelector,但是在那個上古時代(史料記載中無正式名稱,我們可以稱之為“Age of the First Bubble”,或者“DHTML Era”,雖然也有學者認為希臘神話中描述的黑鐵時代(Iron Age)就是指那段時間……dojo創始人Alex Russell,以及prototype創始人Sam Stephenson,都是來自那個時代地淫~),面對惡劣的浏覽器環境和粗糙的web應用,這些選擇器的實現只能被當作geek的實驗,沒有應用市場。而到了05年,世界已經進入web2.0和ajax的新紀元,84年出生的天才少年John Resig(555跟我同年~>_<~)在先行者的啟發下(必須承認D Edwards老爺“啟發”了很多人……自己的作品卻沒機會進入主流)開始探索選擇器技術,一年後的1月15日(沒錯今天是jQuery三周年生日)就在紐約的Barcamp上正式發布了第一版的JQuery,迅速紅遍全球,流行程度堪比搖滾巨星(我就很喜歡JQuery去年發布1.2.6時搞得那個搖滾主題的主頁啞!)

在JQuery的影響下,選擇器逐漸變成了javascript開發的主流需求,其他的庫不進則死,都匆匆引入選擇器,比如dojo.query,YAHOO.util.Selector.query,$$……甚至各大浏覽器廠商也開始實現W3C最新的Selectors API標准(包括Safari3.1、Firefox3.1、IE8 beta,居然連IE也實現了耶!可見這個現象的反常程度……)

但是當選擇器的實現變得無處不在五花八門的時候(我以前做的JQuery迷你版裡也有一個自己實現的選擇器-___-b),開發者們又有了新煩惱,他們需要統一的,能平穩遷移/升級的接口,需要最高效的實現,隨著W3C Selectors API的實現,統一標准也變得更加重要和緊迫,於是John Resig就像武林盟主一樣站出來開發了一個純粹而高效的選擇器引擎——Sizzle,並主動貢獻給prototype, dojo, Mochkit等各大門派,jQuery1.3是第一個采用Sizzle的正式產品,可以看到速度有顯著的提升,今後的發展非常令人期待。

Sizzle反映了一種新趨勢,隨著javascript庫的逐漸成熟,一些功能開始被分離出來設計成獨立維護的引擎/核心。實際上現在的主流庫裡,有很多代碼都互相借鑒,並采納blogsphere裡討論出的最新最好的實現方法,比如jQuery的DOM Ready方法就可以明顯看到這種演進,而那些涉及跨浏覽器的實現和bug fix,尤其容易趨向於統一。有機會產生通用引擎的領域,除了css選擇器,可以預見的還有2D/3D繪圖引擎(封裝canvas,VML或SVG),模板引擎,對象映射,文本解析,動畫,運動和定位相關的計算,還有一些基礎代碼,比如迭代器。

不過關於選擇器,還有一點必須指出的是,無論選擇器發展的多麼高效,即使有一天能完全當作native實現來對待,也不能過度的依賴它來完成任務,滿足於寫一些腳本式的代碼,而忽視javascript語言本身的算法,數據結構和模式。這個道理其實就類似php和mysql的關系,php作為服務器端專業的web開發語言,有大量開發工作是圍繞著數據來進行,而強大的mysql已經實現很多針對數據查詢的算法和邏輯,加上php本身與其說是一門語言,不如說是工具包,導致很多初心的php程序員簡單的依賴於mysql,編程能力普遍不高,進而損害到了php程序員的平均工資……

從這個角度上來講,javascript跟php非常相像,雖然javascript本身是一門強悍而集大成的語言(記得上次去帝都參加SD2C時,天際網的CTO郭應壽說“喜歡技術的人不可能不喜歡javascript”),但是多數時候都被限制在浏覽器的sandbox裡,曾經一度淪為真正的“腳本語言”,多虧浏覽器後來施捨了DOM和xhr,才讓javascript有了用武之地,所以js在很大程度上也是圍繞著DOM在編程,DOM是前端最重要的數據結構,有了強大的選擇器工具,很多需求只要反復調用選擇器,寫幾串腳本式的代碼就能實現,如果滿足於這種開發方式,不站在更高的角度去設計和構建應用,對於自己和自己的工作都可以說是非常危險的。

另外,設計良好的html,重要性相當於後端的數據庫設計,可以讓選擇器的使用變得更高效,並直接影響js的設計模式。我在一些項目中非常喜歡這樣的理念:在保證語義和簡潔的前提下,讓HTML成為一種配置文件,當需求有變化,或是在一些可復用的場合,只需要簡單的編寫html,就能自動實現相應的程序邏輯。對於選擇器的使用,還存在另一種截然相反的設計方式:在有些情況下,需要讓javascript和html盡可能的解耦合,讓同樣的代碼可以適應靈活變化的html結構,並盡可能減少dom操作,具體的例子會在下篇文章中給出。

其實本來今天最想寫的是jQuery1.3中新增的Live Events,因為土豆網全局js裡正好有一個自己實現的方法$.fn.eventProxy,兩者基於同樣的設計模式,明天有空的時候再寫算了,這篇就當作向三歲的JQuery致敬。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved