EXT设计模式初学习

EXT设计模式初学习

其实..是一篇jack博客上的译文，见笑了。

[url]www.jackslocum.com/blog/2006/11/06/rambling-at-400am-design-patterns-in-javascript-jquery-style-selectors-zebra-stripes/[/url]

Rambling at 4:08am: Design patterns in JavaScript, jQuery Style Selectors, Zebra Stripes

November 6, 2006 by Jack Slocum

--------------------------------------------------------------------------------

jQuery blog 上最近有一篇帖子，是关于在不同的JS库中，怎么做出斑马纹的间隔效果的表格，文章是Zebra Table Showdown 。文章旨在（我希望）告诉大家做出这个效果，jQuery相比其它冗长的library/toolkit是怎么得简单法。阅读他的文章后，虽然某些程度上我不是太同意其所提出的观点，但是我必须承认John Resig 提出的是一个非常好的想法。jQuery's 所使用的CSS选择符＋collection 对象真是非常地方便。我发表了一段代码的样本和为什么要提交jQuery的一个BUG的评论。遗憾地我的评论（这里本来有删除线）没有（这里本来有删除线）了。反正，我想说的是...

[b]YAHOO.ext.Element[/b]

Yui-ext 库有和jQ核心对象相类似的对象：YAHOO.ext.Element（元素对象）。元素对象和jQ核心对象有一些相似的功能如简易动画控制和快速存储访问 （convenient accessor methods），但是JQ对象可以一组一组地控制对象 － 不限于单个。（在元素的defense，jQuery实现的功能还不多） 。

[b]Composite[/b]

熟悉设计模式的读者我想必听过Composite模式。若没有，不妨去连接看看（或者还有其它关于模式可读的内容）。简言之，Composite模式可通过暴露一个接口来接触一组的对象，并像单个对象那样操控对象。在yui-ext中这样的Composite 模式已经应用于CompositeSequence类进行动画控制。它允许你控制一连串的动画就好像控制单个动画对象那样。总之， Composite 模式是实现一组YAHOO.ext.Elements的最佳选择。

[b]Flyweight[/b]

试想一下你选取了500个元素，就要new五百次的YAHOO.ext.Element 对象。对于此类问题，还有其它解决之道，叫做 Flyweight模式。 Flyweight模式使得在一个实例上，根据上下文内容共享/插入其成员。利用这个方法，我可以让单个YAHOO.ext.Element对象选取多个活动的DOM节点，以提升性能。

[b]看你怎么选[/b]

最后，我列举三个不同的实现，每个都有其自身的优点。

1. Flyweights：默认使用的模式是Flyweight模式，很轻盈、很快。你操作一堆的元素却不蹒跚，步履轻盈。

2. 第二个实现是“unique”version， collection 集合中每个元素都有其自己的YAHOO.ext.Element 对象。当你想在某个集合之外引用元素对象，该版本就很有用了。Fflyweight version要这样就不可能了因为元素操作的DOM节点是不断变化的。 尽管在测试中我没有发现和flyweight版本显著的区别，不过我还是在大量节点的情况下不要使用“unique”version。

3.第三方的实现。这是到现在最有趣的东东了－YAHOO.ext.Actor/Animator 。它允许你可以将一堆元素当作单个元素使用，并有同步或次序的动画效果（synchronized and/or sequenced animations.）。我想jQuery也可以做得不错尤其你能够以一行代码完成惊人得效果出来。

[b]选择符的处理Selector Processing[/b]

怎么通过CSS选择符选取元素是重要的一环。有关的方案已经有相应的函数而且已做得比较满意了的，我不想重复造轮子，所以我决定把选择符的处理再稍微改动，实现一个可配置的函数。个人而言，比较倾向Dean Edwards的 cssQuery ，看来也正好适合。当然我们也不能忘记 Simon Willison的早期版本 getElementsBySelector ，可以作为备选项。如果你在yui-ext.js之前包含（include）了它们，yui-ext.js会自动引用。如果以上两个都不是你的心水选择，你也可以这样设置一下selectorFunction 属性：

[code]YAHOO.ext.Element.selectorFunction = $$; // 或是其它[/code]

这里有简写方式和长写方式， 就像 getEl()（译注：EXT为Ext.get(argment)）和YAHOO.ext.Element.get()。简短的是...只是加多一个s...getEls() 和完整的是YAHOO.ext.Element.select()。 至于动画版本是，getActors() 和YAHOO.ext.Animator.select()。

[b]我那个（这里本来有删除线）不见的（这里本来有删除线） 评论[/b]

至于 Zebra Table Showdown的回应，我提交了：

[code]getEls("tr:nth-child(odd)").addClass('odd');[/code]

测试页面: [url]http://www.jackslocum.com/playpen/selectors/[/url]

按照W3C规范，我想说说jQuery 跳行实际上跳错了，看下图：

[img] http://www.jackslocum.com/blog/images/zebra.gif[/img]

jQuery 跳过的是偶数行非奇数行。按照 CSS Spec 的nth-child定义，“The index of the first child of an element is 1”不是0。

这不是什么大问题（也好解决），但是有意思的是，要一心证明jQuery是最好的（ better than the world），却给别人挑出了这么一个bug，－有趣。现在是凌晨四点了，我太累了，没事找点乐而已啦。

[b]相互学习[/b]

jQuery最大的优点是易用。 jQuery可以一行代码搞掂很多问题。 YUI最大的优点是它被设计为面向对象的（object oriented）和组件的架构（component architecture）。要我说哪个库好一些，那倒不如在jQuery和YUI（或其它的）之间相互学习。如果能够结合jQuery的易用和YUI的组件，我想真正的“new wave (of) Javascript” 那天便会到来。

我会在明天放一些新的例子，到时，你可以右上角的地方下载来玩玩。