• Like
Banquet 48
Upcoming SlideShare
Loading in...5
×
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
410
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 一场关于YUI3/jQuery的精彩辩论 正乐 2010.11.15
  • 2. js框架百花齐放Prototypejs,jQuery,YUI,Moontools,DOJO,kissy ……
  • 3. YUI应当如何改进,以便更多的人来使用?John Resig:和其他JS库相比,YUI的确很赞,但由于它的域名分散、代码库过多且引入方式太多,这就导致了YUI无法更多的去占领市场。Nicholas C. Zakas:我承认,分散的站点的确是YUI的一个问题,不止一个人曾经纠结于到底应该访问YDN呢还是访问YUILibrary.com?这是YUI首先要解决的问题。同样,John对于简化YUI文档首页上的引导信息的建议也相当不错,是个好主意。
  • 4. YUI如何提升才能改善和jQuery的竞争力?John Resig: YUI项目本身依然存在着诸多结构性问题,需要改善.如今,如果YUI直接和jQuery进行竞争,YUI和它的子项目的运作方式都需要做出调整。因为现在的 YUI 项目运作方式与 YAHOO 的工作方法是背道而驰的。鉴于目前的管理方式的极差的操作性,YUI项目着实是一个不幸的牺牲品。Nicholas C. Zakas:我不认为YUI和jQuery之间存在你死我活的竞争关系.jQuery更适合小网站使用,毕竟它很简单、大众、人人都可以快速上手,因此jQuery有着庞大的设计师群体。对于可扩展的Web应用,YUI的确更胜一筹。仅凭一个单一的产品很难满足所有用户多样化的需求。jQuery在其专注的方面的确富有想象力,但YUI的关注点放在解决复杂Web应用方面的问题上。
  • 5. • John Resig:开源社区是YUI可持续发展的关键所在,它 会带来更多的反馈和热情的开发者,YUI的影响力也 在开源社区中潜移默化的影响这其中的每个人, Yahoo 不应是其唯一的维护者,维护者应当来自于更 广阔的开源社区。• 玉伯:我建议。Resig 的建议里,只有一个关键点: Simplicity is key。并且很想传递出一个理念:Simplicity is far harder to get right than building complex applications。“简单比复杂更具挑战”,可惜Resig并 没有有效传递出来。的感觉,NCZ 并没有很好的领悟 到 John Resig 的
  • 6. Observer观察者 (Observer)又称订阅者. 有一个很多观察者都关心的对象,当这个对 象的状态发生变化时,这些观察者都会根据 对象发生的变化做出一定的反应.被观察的对象不知道有多少人在观察自己,观察者只知道他要关心对象的某一个或多个变化.
  • 7. 对象的属性,需要记下观察者委托• var Subject = function(name,age){• this._name = name;• this._age = age;• this.nameDelegates = [];• this.ageDelegates = [];• };
  • 8. 对象需要提供给观察者开始观察的接口• Subject.prototype = {• addNameHandle:function(fn){• this.nameDelegates.push(fn);• },• addAgeHandle:function(fn){• this.ageDelegates.push(fn);• },• Name_OnChange:function(){• for(var i=0; i<this.nameDelegates.length; i++){• this.nameDelegates[i](this);• }• },• Age_OnChange:function(){• for(var i=0; i<this.ageDelegates.length; i++){• this.ageDelegates[i](this);• }• },
  • 9. • setName:function(name){• this._name = name;• this.Name_OnChange();• },• getName:function(){• return this._name;• },• setAge:function(age){• this._age = age;• this.Age_OnChange();• },• getAge:function(){• return this._age;• }• };
  • 10. 观察者• var Observe = function(number){• var _number = number• this.fnObserve = function(obj){• console.log("观察者" + _number + "观察到对象的信 息变了,名字:" + obj.getName() + "年龄:" + obj.getAge());• }• };
  • 11. 其他观察者• var otherObserve = {• subjectNameChange:function(obj){• console.log("衰仔,又换名字了啊,名字看上去很傻:" + obj.getName());• },• subjectAgeChange:function(obj){• console.log("衰仔," + obj.getAge() + "岁了,老了?");• }• };
  • 12. 调用方法• var subject = new Subject("super man","12");• var observe1 = new Observe(1);• var observe2 = new Observe(2);•• subject.addNameHandle(observe1.fnObserve);• subject.addAgeHandle(observe2.fnObserve);•• subject.addNameHandle(otherObserve.subjectNameChange);• subject.addAgeHandle(otherObserve.subjectAgeChange);•• subject.setName("stupid man");• subject.setAge(500);