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

2016-02-20 01:03 15 1 收藏

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

【 tulaoshi.com - Web开发 】

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时搞得那个摇滚主题的主页哑!)

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

在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程序员的平均工资

(本文来源于图老师网站,更多请访问https://www.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致敬。

来源:https://www.tulaoshi.com/n/20160220/1633140.html

延伸阅读
标签: Web开发
本文是《Even Faster Web Sites: Performance Best Practices for Web Developers (Paperback)》的最后一章。上篇帖子《Performance Impact of CSS Selectors》(中文版)最后提出了一段假设: 对大多数网站而言,优化CSS选择器活得的性能提升很小,不值得去计较。有些配合Javascript交互的CSS规则会明显的拖慢页面。这是应该关注的焦点。...
标签: Web开发
PPT:Taming CSS Selectors 作者:Nicole Sullivan 翻译:ytzong CSS 文件的大小和所引起的 HTTP 的请求数 是 CSS 性能的最关键因素 回流(reflow)和渲染时间 (非常!)没那么重要 副本(duplication)比陈旧的规则(stale rules)更糟糕 因为我们有工具处理后者 定义缺省值 不要在每处都重复编码 不好的: #weatherModule h3{co...
标签: Web开发
DOM结构其实也是一种树形结构,jQuery提供的树形选择器可以用来选择DOM Tree里的节点。这些树形选择器的方法包括:children(), parent(), parents(), next(), prev(), siblings(). 选择某个元素的"孩子" - children() 代码如下: ul id="parent" li id="son1"第一列/li li id="son2"第二列/li li id="son3"第三列/li /ul $("#parent"...
标签: Web开发
效果如图所示: 核心代码: 代码如下: script type="text/javascript" $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所有div的属性 $('div span').css("background","#bbffaa").css("color","red").css("font-size","12px");//改变所有div下的sp...
标签: Web开发
在jQuery出世以来,它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点,它已经被微软...

经验教程

183

收藏

19
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部