jQuery1.3全新的Sizzle引擎实现CSS选择器

花藤爱prince

花藤爱prince

2016-02-20 01:03

下面图老师小编跟大家分享一个简单易学的jQuery1.3全新的Sizzle引擎实现CSS选择器教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)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程序员的平均工资

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

从这个角度上来讲,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致敬。

展开更多 50%)
分享

猜你喜欢

jQuery1.3全新的Sizzle引擎实现CSS选择器

Web开发
jQuery1.3全新的Sizzle引擎实现CSS选择器

Jquery选择器 $实现原理

Web开发
Jquery选择器 $实现原理

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery CSS选择器笔记

Web开发
jquery CSS选择器笔记

jQuery 选择器理解

Web开发
jQuery 选择器理解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

css 类选择器和id选择器

Web开发
css 类选择器和id选择器

jquery 选择器部分整理

Web开发
jquery 选择器部分整理

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

WPS演示中的荧笔光 教师教学的好帮手

WPS演示中的荧笔光 教师教学的好帮手

JavaScript教程:编写匿名函数的几种方法

JavaScript教程:编写匿名函数的几种方法
下拉加载更多内容 ↓