jQuery升级 - 1.3

JQuery目前已经发布到1.3.1版本，但1.3.1版只是对1.3版存在 的部分bug进行了修正，没有功能上的变化。

JQuery1.3的升级主要是内部实现的改变，重写了此前存在效率瓶甄的方法。官方的测试结果表明，1.3的性能有了很大的提高，主要表现在选择器、事件绑定、DOM动态修 改、offset方法的偏移量计算和动画。具体如下：

  • Sizzle Selector Engine

JQ1.3中CSS选择器已经单独分离出来，命名为Sizzle JavaScript Selector Library，并启动了一个新的项 目，目的在于联合主流的框架开发者来参与开发，让框架的选择器使用更统一、更高效。目前已经有Prototype, Dojo, Yahoo UI, MochiKit, and TinyMCE等等加入此项目开发。

  • live Events

Event对象中增加了live和die两 个方法，支持了对新增元素的事件"自动绑定"。

  • jQuery Event Object

新的Event对象更接近W3C的标准，浏览器的兼容性更好。

  • HTML Injection Rewrite

HTML插入方式（例如append, prepend, before, after）大范围重写。在复杂的jquery程序中，HTML插入效率是一个很大的瓶甄。1.3版本重写了内部实现，提高了这些方法的运行效率，但此前 的API没有更改。

DOM创建方法的变化：

$("<script/>")等同于$("<script></script>")

  • Offset Rewrite

Offset 方法重写，目的在于提高此方法的效率和浏览器的兼容性。

  • No More Browser Sniffing

浏览器特性的判断，这是1.3版中最大的一个改变。传统的做法是对客户端浏览器的类型和版本做探测，然后针对不同浏览器做代码的兼容。一旦浏览器升 级或者解决某些BUG，就可能造成某些特性的改变，造成此前我们的JS代码不兼容。

在主流JS框架中，Jq1.3采用了新的探测方法，具体见jQuery.browser。

原理：JQ在初始化的时候自动创建一个DOM节点，各个浏览器会根据自己的特性来渲染此节点。

  1. <div>
  2. <link/>
  3. <table></table>
  4. <a href="/a" style="color:red;float:left;opacity:.5;">a</a>
  5. <select>
  6. <option>text</option>
  7. </select>
  8. <object>
  9. <param/>
  10. </object>
  11. </div>

然后针对被渲染过的此节点探测浏览器的支持特性，例如：

//对tbody的支持（IE下会自动插入tbody节点）

tbody: !div.getElementsByTagName("tbody").length

//对opacity的支持

opacity: a.style.opacity === "0.5"

这样就不用担心浏览器升级造成的

注意：JQ1.3推荐使用$.support方法，但此前的$.browser方法还会一直兼容下去，因为很多代码和plugin已经依赖此方法。

  • 压缩

JQ不再提供packed版本了。（此前是用Dean Edwards' Packer提供的Base压缩）：

1、 压缩版本不利用调试

2、 压缩版本不能兼容所有运行环境（例如AIR和Caja-capable）

3、 虽然压缩版本的文件小了，但在浏览器里解压缩更消耗，相比minified版本，它在页面中的加载时间更长。

JQ目前的minified版本是使用YUI Compressor进行压缩的。

升级1.3的风险：

JQ1.3已经尽量减小了升级带来的风险，尽量保持了1.2.6版公布出来的API。

如果你要升级到1.3，那么需要阅读下面的潜在危害列表，避免造成你原有的程序出现异常。

如果你使用的plugin出现了问题，那么你首先需要查看此plugin是否有针对1.3版本的升级版。目前JQ UI和validate Plugin已经兼容了1.3。

1. 自1.2版本以后，JQ的属性选择器支持了[@attr]和[attr]两种写法，但1.3彻底废除了[@attr]语法。

2. Trigger()触发事件会遵循DOM树默认的冒泡机制，而此前版本中triggre()是不会触发冒泡的。如果需要阻止冒泡，可使用 stopPropagation()方法，或者在事件处理函数中返回false。（如果需要把你的程序升级到1.3的库，那么你需要小心地检查以前 trigger方法的使用。）

3. ready()方法不再保证等待页面中所有的CSS文件加载完成，再执行脚本。因此，我们需要主动将页面内的CSS文件放置在脚本之前。

4. 简化了isFunction的处理，提高了函数的性能。

注意：在1.3中，比如alert和DOM的getAttribute方法，不能保证在所有浏览器中都被检测出来，例如IE。

5. $("a,b,c")形式的选择器可能有变化。支持querySelectorAll的浏览器（例如Safari, Firefox 3.1+, Opera 10+, IE 8+）会按照文档流中的顺序返回匹配的元素，其他浏览器会按照选择器中指定的顺序返回。在将来1.3.x的升级版以后，此类型的选择器匹配到的元素会按照 文档流顺序返回。

6. 你需要确保你的页面在标准模式下运行。在quirks模式下，目前有部分方法功能是不正常的。（包括safari下出现的选择器错误）

不赞成继续使用下面的属性，赞成使用jQuery.support

  1. jQuery.browser
  2. jQuery.browser.version
  3. jQuery.boxModel

  • 下面的浏览器还没有支持：

Safari 2

部分API的变化

Core
  • 新的ququeing方法，可以管理存在的队列（例如动画队列）
  • 给JQ对象增加两个属性.selector和.context，引用第一个jQuery()调用中的selector和context
Selectors
  • CSS选择器被分离出来，API没有变化，更多高级选择器开始支持复杂的选择器语法，例如+ ~ >。
Attributes
  • .toggleClass( "className", state ) --增加了一个布尔类型的参数，标识是否切换className
Traversing
  • .closest(selector) -- 新增方法，从元素本身开始向父级一层层匹配selector元素，返回最先匹配到的元素。（注意，是从自身元素开始匹配）
  • .is（）方法已经支持复杂选择器，例如+ ~ >。
Manipulation
  • 简化了空DOM节点的创建语法，例如：

$("<script/>")等同$("<script></script>")

Events
  • LiveEvents 提供了live和die两 个方法来"自动绑定"元素事件
  • Trigger() 此方法触发事件，会按照DOM树的默认方式冒泡。

Effects

Changes:

  • 默认的动画效果更平滑。传统的方法只针对高宽和透明度做动画。现在margin和padding属性也支持动画了。
  • 没有提供duration参数的动画会直接执行到动画结束状态。
  • .toggle(Boolean) 添加了一个布尔类型的参数，便于更加方便地控制元素显示。true为显示，false为隐藏。
  • jQuery.fx.off - 新增此新属性，用于禁止/启用所有的动画效果。
Ajax
  • ajax()方法的options中新增dataFilter属性 可以对返回的数据进行预处理，便于success回调中接使用序列化的data。
Utilities
  • 新增isArray的数组判断方法。

转载地址:www.v-sky.com/blog/

posted @ 2010-04-21 14:57  Kimura  Views(417)  Comments(0)  Edit  收藏  举报