Ajax 板


LINE

现在官网上的最新版本,也已经换成 1.4.3 了。 相信大家最关心的是 new features , 这里有看到有关 1.4.3 相关的异动跟新增项目。 http://api.jquery.com/category/version/1.4.3/ 这是 1.4.3 的 release note . http://blog.jquery.com/2010/10/16/jquery-143-released/ 其中有几点我觉得蛮有趣值得讨论的, 1.css 函式的优化 ,据说优化 20%,是个可以期待的项目。 2.CSS 函式在扩充性上做了一些努力,你现在将可以设定自定义的 css项目, 比方说 jQuery Rotate 就扩充 rotate项目, 在载入这 plug-in 之後,你将可以使用 $("xx").css("rorate","80")。 这个对那些需要频繁处理跨浏览器议题的 lib 或者应用应该会蛮有帮助的。 (看了一下 source code ,这是透过在 css 设定上, 增加 hook function 来做属性的对应计算,蛮直觉的。 @see jQuery 1.4.3 source line 5113. ) 在 1.4.2 的时代是透过 curCSS 去操作, 这只函式是一个功能复杂的大黑箱,比方说其中就有针对 opacity的操作。 现在则是把计算绑到 jQuery.cssHooks["opacity"] 中去作运算了, 等於说他原本原本黑箱的部份给组织化了! 所以自定义一个 css attribute 的写法就是像这样, 假设我定义一个叫 innerColor 的属性, 他的行为是把这个元素跟这个元素里面的 color 都改成跟我一样 . 那我可以这样写 $.cssHooks.innerColor = { set:function(elem,value,extra){ $(elem).add($("*",elem)).css("color",value); }, get:function( elem, computed ){ return $(elem).css("color"); } } 接着我就可以写这样的东西了 $("#lv1").css("innerColor","red"); 这里有一个能动的范例 . http://fiddle.jshell.net/tp8XW/4/ 这个功能我个人已经可以预期, 对 jQuery 在跨平台的 css support 上, 将会有非常大的帮助,毕竟改写 jQuery 的 source , 或者对 jQuery 的 fn 上新东西,比不上直接写 css 来得直觉。 (另外还有一个小改善就是 jQuery.cssNumber 这个 object , 被定义在这个 object 里面的属性名称处理资料时会自动加上"px"。) 最後一个不太重要的改变, 本来的 css 会判断後要跳到 jQuery.css或 jQuery.style , 现在因为加入 hook (就如你们所看到的,他有getter & setter ) , 所以一律都从 jQuery.css 出发。 (另外原本的 jQuery.curCss 也指到 jQuery.css , 并且列为 deprecated 。 ) 3.data-attribute 感觉对一般操作也有些好处, 过去我们会用自订attr多少会担心跟现有的 attr 冲突, 而且捞 attr 去取我们自己定义的资料好像很怪, 现在我们可以写 data attribute , 并且从语意比较相近的 data 取得资料。 4.针对以 javascript 原生物件为主的 jQuery context 操作异动 (再强调一次,这里说的是对非 dom 的物件!) a.现在对一个 object 的包装者下 data 将会真的把资料下在 object上! (以前会下在另一个内部的资料物件上。) 举例来说 var obj = {} $(obj).data("hello","world"); $("body").append(obj.hello); // you will get the "world" http://jsfiddle.net/6PMA4/ b.在一个 object 上的事件将被绑定在该 object 的成员里(__events__) 这个基本上我没这需求,就一般用途上, 我也还想不到绑一个事件在非 dom 的成员上的用途, 根据官方说法这个改变有助於 js 的资源回收(gc) 。 5. jQuery.data api 的小异动 现在对 data() 给入物件时 , 原本会完全取代旧的物件, 现在则改为 extends 也就是只做 mix-in ,不会进行取代。 似乎是因为有很多 bug report 提到这件事, 所以他们觉得这样比较直觉。XD 6. dom Traversing jQuery 在透过一些与浏览器厂商的互动、建议、测试後, 开始在程式码中采用 querySelectorAll / matchesSelector , 并且因此得到非常棒的 performance 。 (看对照图後觉得似乎非常棒还不足以形容。XD) (图片中没有ie6 ,ie7 是因为他们是没有support 这 feature 的旧浏览器。) 7.Ajax 这个看起来应该是针对那些想在 ajax 回来时, 并且在 handler 执行前做一些事情的工具。 它可以 delay ready 这个事件发生的时间。 不过这东西我一时想不到有什麽东西可以用, 感觉是个特殊情境下才会用到的东西。 8.Event 系列,这里也有非常棒的 short cut. a.第一个是取消事件 bubble 的作法。 $(xxx).click(function(){ return false;}); 现在将可以直接写成 $(xxx).click(false); test case http://jsfiddle.net/fdJC3/5/ http://jsfiddle.net/fdJC3/7/ b.现在你将可以传递 data 这个参数给所有内建事件(hover除外) data 就是 bind 函式的第三个参数, for example $("#btn").click({ val: "i am data" }, function(e) { alert(e.data.val); // i am data alerted }); test case http://jsfiddle.net/fdJC3/6/ 这个通常是用来解 closure 情形下,某些变数 scope 的问题。 (还记得那个for回圈绑event 时 i 跑掉的老问题?这个可以解。) c.属性值 event.namespace 基本上这个大部分状况下不太会用到, 我相信知道什麽是 event namespace 的人应该也知道它的意义了。XD event namespace 在从 js 到 jQuery 系列中有介绍。 9.Effects , 现在所有 effect 相关的函式,都有 easying 参数可以设定了。 show/hide/fadeIn/fadeOut 等等, 每个 effect 的事件间隔现在也有属性值可以设定了 jQuery.fx.interval (default is 13 ms.) 10.两个新的函式 a.jQuery.type(obj) 可以帮忙判断 obj元素的类型, 有点像 typeof 在做的事情,不过他是用 toString() 去判断, default 可以 support 底下这些类别,其他的一律叫 object。 null Boolean Number String Function Array Date RegExp Object 这个应该会比 isArray , isFunction 等函式有用一点。 b.jQuery.isWindow(obj) 就字面上的判断 obj 是不是 window , 没什麽好说的 . c.jQuery.trim 增加判断浏览器是否具有原生函式, 原因是因为这样快上很多。 ----------------------------------------------------- 总结 1.4.3 1.介面/功能的增加 2.css函式的抽象化 3.尽可能的以浏览器原生函式取代自己实做 本来以为看起来很少,真的翻过一轮才觉得...还真不少... 而且我还漏了 setData跟getData event 没翻, 反正这个改变幅度实在是不大。:~ -- I am a person, and I am always thinking . Thinking in love , Thinking in life , Thinking in why , Thinking in worth. I can't believe any of what , I am just thinking then thinking , but worst of all , most of mine is thinking not actioning... --



※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 111.82.219.123 ※ 编辑: TonyQ 来自: 111.82.219.123 (10/17 02:12) TonyQ:转录至看板 Web_Design 10/17 02:13
1F:推 gpmm:push 10/17 02:34
2F:推 knuckles:喔喔 推推 10/17 04:40
3F:推 aej:速度真是快~~推 10/17 09:21
4F:推 s25g5d4:推!!! 10/17 10:43
5F:推 shadowjohn:谢好情报,马上就套入使用了~~ 10/17 15:05
6F:推 j87b0003:推!! 10/17 21:22
7F:推 ariescat:推 很多实用的部份 太棒了... 10/17 23:13
8F:→ TonyQ:昨天抽空看第六点的source,发现各家实做 qSA跟 mS 也还有 10/17 23:54
9F:→ TonyQ:很多问题,jQuery用了一堆workaround。 XD 10/17 23:54
10F:推 miad:现在来自己的系统测试一下..感嗯 10/18 18:32
fix some typo ※ 编辑: TonyQ 来自: 114.137.61.228 (10/18 21:55)
11F:推 edl2000:推...真棒 10/19 18:32







like.gif 您可能会有兴趣的文章
icon.png[问题/行为] 猫晚上进房间会不会有憋尿问题
icon.pngRe: [闲聊] 选了错误的女孩成为魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一张
icon.png[心得] EMS高领长版毛衣.墨小楼MC1002
icon.png[分享] 丹龙隔热纸GE55+33+22
icon.png[问题] 清洗洗衣机
icon.png[寻物] 窗台下的空间
icon.png[闲聊] 双极の女神1 木魔爵
icon.png[售车] 新竹 1997 march 1297cc 白色 四门
icon.png[讨论] 能从照片感受到摄影者心情吗
icon.png[狂贺] 贺贺贺贺 贺!岛村卯月!总选举NO.1
icon.png[难过] 羡慕白皮肤的女生
icon.png阅读文章
icon.png[黑特]
icon.png[问题] SBK S1安装於安全帽位置
icon.png[分享] 旧woo100绝版开箱!!
icon.pngRe: [无言] 关於小包卫生纸
icon.png[开箱] E5-2683V3 RX480Strix 快睿C1 简单测试
icon.png[心得] 苍の海贼龙 地狱 执行者16PT
icon.png[售车] 1999年Virage iO 1.8EXi
icon.png[心得] 挑战33 LV10 狮子座pt solo
icon.png[闲聊] 手把手教你不被桶之新手主购教学
icon.png[分享] Civic Type R 量产版官方照无预警流出
icon.png[售车] Golf 4 2.0 银色 自排
icon.png[出售] Graco提篮汽座(有底座)2000元诚可议
icon.png[问题] 请问补牙材质掉了还能再补吗?(台中半年内
icon.png[问题] 44th 单曲 生写竟然都给重复的啊啊!
icon.png[心得] 华南红卡/icash 核卡
icon.png[问题] 拔牙矫正这样正常吗
icon.png[赠送] 老莫高业 初业 102年版
icon.png[情报] 三大行动支付 本季掀战火
icon.png[宝宝] 博客来Amos水蜡笔5/1特价五折
icon.pngRe: [心得] 新鲜人一些面试分享
icon.png[心得] 苍の海贼龙 地狱 麒麟25PT
icon.pngRe: [闲聊] (君の名は。雷慎入) 君名二创漫画翻译
icon.pngRe: [闲聊] OGN中场影片:失踪人口局 (英文字幕)
icon.png[问题] 台湾大哥大4G讯号差
icon.png[出售] [全国]全新千寻侘草LED灯, 水草

请输入看板名称,例如:iOS站内搜寻

TOP