Logo

never-online

A crisis is a terrible thing to waste.
  • Blog首页
  • 推荐日志
  • 关于我
  • 留言簿
  • 设计
  • 订阅RSS
  • 登录
« IE 8 beta版与旧版比...
剖析Prototype 1.6框... »
分类: Web Dev
推荐日志

剖析Prototype 1.6框架(一) 设计

[ 2008-04-08 22:00:19 | 作者: Rank ]
字体大小: 大 | 中 | 小
Close Advertisement
SEE ALSO: 剖析Prototype 1.6框架(二) 实现

序
这篇文章不是用来说明怎么用prototype,不是教程,而是作为一个理论研究,看网络上都是写Prototype的使用,而没有多少人去解释这些设计与实现,给予后来的人以提示和学习。感觉实在是有必要写写了。但一直没有机会写,一来是觉得自己的水平还欠缺,二来是没有太多的时间来写文,三是表述起来比较困难,因为毕竟在框架中交互实现的地方太多,设计依赖也有很多。很难定下来如何描述谁先谁先。如何将这些设计与实现描述出来,且让人容易理解我在说什么,能够不将整个框架说得过于主观,这些都是比较头疼的问题。这次能有这一个机会来让我描述一下这个框架的设计,纯属偶然,没有太多时间来准备,因此,我没有写过多的细节,如果有遗漏之处,还请指出。

概要
Prototype是一个优雅的框架,在何处优雅,它带给我们什么启示?为何我们要学习它?下面我将从Type(类型),Hack,Closure(闭包),Context(上下文),Lazy function pattern(惰性函数模式)和Design(设计)客观的看来prototype。

总览、Design设计
假设你已经明天了怎么样去实现模块,了解了上面Prototype的实现,如果让你来编写一个框架,是否你能够胜任呢?是否能够写得比Prototype好呢?很抱歉,这个问题我不能回答。不管答案怎么样,学习一下总没坏事,下面我们来讨论一下Prototype的是如何将他的代码组织起来的。

1)Object. 这是Prototype实现检测和扩展的核心,全部是静态方法。它提供了全局范围内的验证。
2)Enumerable. 它是全部可列举对象的核心所在。比如: Array, Hash, Object, Element对象的迭代实现。 他们都要实现一个接口。_each方法,每个对象的each都是通过本对象中实现的each来实现的。以下图可以大概表示他们的层次关系
/blog/uploads/200804/prototype_type.png

其它的对象的迭代实现都是扩展自Enumerable这个对象。_each方法是接口,所有的对象都要实现这个方法,Enumerable则象是基类对象。

3)inheritance. 在新版Prototype中,实现了新的Class.Create的方式,是代替原来的extend object方案,实现起来复杂得多,大量动态的调用了其它类型方法。
主要思路是用原型继承的方式实现继承,但在实现中用了N个闭包。N>=3层。包括实现$supper这个方法,与传统OO不同的是,这个$supper方法,是作为参数传入子类中(且为第一个参数)才有效。(Prototype的方法是基于Alex Arnell写的plugin)
4)Template. 模板类提供了基于json数据的调用。比如一个字符串用Template可以作
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
var s = "#{name}'s website is #{uri}";
var a = new Template(s);
var o = { name: 'never-online', uri: 'http://www.never-online.net/blog' };
a.evaluate(o);
//得到 never-online's website is http://www.never-online.net/blog
而这个evaluate方法依赖String中的原型方法gsub。

5)Selector. 基于yui-ext的selector。这个的思路比较多,只是大略的了解了DOMquery(yui-ext)的思路,就是compileMatch里采用组装字符串,形成function,动态解析selector。几个selector都是一点是一样的,都有一个cache数组存储临时数据。
6)Event. 在新版Prototype中,有一句评论是这么说的。从原来最差的Event模式,到了最好的Event模式。管理事件都是基于可列举对象的基类,比如在用于事件中的pluck,without等,在实现Event事件里,用了不少的"private"方法,而最后返回的只有几个方法,包括observe, fire和stopObserving。我们也可以简洁的用图来表示
/blog/uploads/200804/prototype_Event.png


7)Ajax. 大概的图就是下面这样,感觉实现得还不错的(对于扩展来说)
/blog/uploads/200804/prototype_ajax.png


8)Chaining stuff. 这个在jquery上面用得是最多的,当时jquery出现,推广该框架的时候就是用鼓励和使用Chaining, 这也成为jquery的代表了.
实际上Chaining就是一个循环. chaining是很有用的, 它可以用一种自然语言的方式来编程,而非命令式编式,但会消耗效率,因为迭代器使用过多.Prototype也用了部分链,这个链是从Element开始的,详细的实现我就不说了,原理也是很简单的:
$(id).observe('onclick',handler)就是一个例子,将Event继承到Element上即可.

SEE ALSO: 剖析Prototype 1.6框架(二) 实现
[最后修改由 Rank, 于 2008-08-05 23:30:42]
评论Feed 评论Feed: http://www.never-online.net/blog/feed.asp?q=comment&id=199

浏览模式: 显示全部 | 评论: 11 | 引用: 0 | 排序 | 浏览: 7727
引用 JK_10000*
[ 2008-04-07 11:37:06 ]
期待完善版本中
引用 dexbol*
[ 2008-04-07 12:49:45 ]
好文
引用 JerryQu*
[ 2008-04-07 16:56:58 ]
先顶一下~再慢慢看! [lol]
引用 winter*
[ 2008-04-07 21:27:48 ]
赞一下楼主 BS一下PT
引用 muxrwc
[ 2008-04-08 13:40:16 ]
飘过... [lol]
[最后修改由 muxrwc, 于 2008-04-08 13:40:37]
引用 winter*
[ 2008-04-09 14:57:49 ]
整理了啊 好文
引用 Rank
[ 2008-04-09 15:37:20 ]
嗯~昨天刚学会用jude community画图~比visio好多了~
写了文章不会被口水淹没我已经很幸运了~ [wink]
[最后修改由 Rank, 于 2008-04-09 15:43:59]
引用 winter*
[ 2008-04-10 14:21:01 ]
你可以大骂pt 我会站在你这边的 [lol]
引用 Rank
[ 2008-04-11 13:28:48 ]
发现群里面也在骂PT了 [lol]
引用 winter*
[ 2008-04-11 20:34:21 ]
估计你看到的也是我 只是你不认识我的马甲
引用 rrr*
[ 2008-08-30 14:40:39 ]
好文

发表
表情图标
[smile] [confused] [cool] [cry]
[eek] [angry] [wink] [sweat]
[lol] [stun] [razz] [redface]
[rolleyes] [sad] [yes] [no]
[heart] [star] [music] [idea]
UBB代码
转换链接
表情图标
悄悄话
昵        称:  3-24字符, 不可使用特殊字符 *
安全规则: 请输入规则答案: 2+5=? *
 
Language Package
  • ENGLISH
  • 简体中文
用户面板
用户名:
密码:
安全规则: 2+5=?
注册
分类
  • Blog首页
  • Android [2] Android RSS Feed
  • Diary & Misc [115] Diary & Misc RSS Feed
  • Web Dev [108] Web Dev RSS Feed
  • Never Modules(JS) [12] Never Modules(JS) RSS Feed
  • Flash & Flex & Air [4] Flash & Flex & Air RSS Feed
  • PHP & Apache [1] PHP & Apache RSS Feed
  • XML [7] XML RSS Feed
  • CSS [7] CSS RSS Feed
  • ASP & .NET [3] ASP & .NET RSS Feed
  • Literature Archives [4] Literature Archives RSS Feed
  • Design [17] Design RSS Feed
  • Visual Basic [3] Visual Basic RSS Feed
最新评论
  • @gzman 那阵子确实想蛮多...
  • 兄弟,想太多了吧
  • [smile] [wink] [sweat] ...
  • javascript:insertSmilie...
  • 我新建了两个sliderbar都...
  • 不错哦````````
  • 好文,收藏至20ju.com
  • @aflyhorse 我这里没有实...
  • 我上次找了一个识别效果...
  • 第一个实例我只看见了doe...
  • 好文啊,只是我阅读太慢...
  • 其实用<iframe src="java...
  • 还没到那个境界。
  • @tokki 要造也应该造车,...
  • 能不造轮子的程序员太少...
搜索

统计数据
日志: 283
评论: 845
引用: 0
用户: 115
到访: 4059712
在线: 1

新浪微博
Links
  • Zerray
  • realdodo
  • ps album
  • my flickr
  • XiaoFeng
  • 神~ORZ
  • Jiuan's blog
  • yanpeng's blog
  • zhoux's blog
  • winter
  • aoao
  • jerry.qu
  • JoelLeung
  • monyer
  • Miller
  • PuterJam
  • Terry
  • JK
  • akira
  • dh20156's New World!
  • muxrwc
  • Joshua
  • Estyle
  • 互联网人
  • 兔子
  • 电脑爱好者
  • 阿笨狗
Favorite
  • leica china
  • Douglas Crockford
  • dhteumeuleu
  • regexplib
  • webfx
  • ajaxian
  • John Resig
  • dean
  • Adam McCrea
  • css beauty
  • livepipe
  • smashing magazine
  • ericlippert
  • narcissus
  • PPK
widget

Powered by LBS Version 2.0.304 © 2003-2005 SiC/CYAN. - Template writen by never-online - 桂ICP备07010684号
17 DB Queries | Proccessed in 125ms