`
shake863
  • 浏览: 661257 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

prototype 剖析(1)

    博客分类:
  • JS
阅读更多


这篇文章不是用来说明怎么用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来实现的。以下图可以大概表示他们的层次关系




其它的对象的迭代实现都是扩展自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。我们也可以简洁的用图来表示





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





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

分享到:
评论

相关推荐

    Spring实战之Bean的作用域singleton和prototype用法分析

    本篇文章将深入探讨两种主要的作用域:singleton和prototype,并通过实例分析其用法和注意事项。 首先,`singleton`是Spring默认的作用域,意味着当Spring容器初始化时,对于每个具有`singleton`作用域的Bean,它只...

    prototype1.6.0prototype1.6.0prototype1.6.0prototype1.6.0

    标题中的"prototype1.6.0"多次提及,暗示了我们正在讨论JavaScript库Prototype的1.6.0版本。...通过查看和分析这些内容,可以深入理解Prototype 1.6.0的API、方法和特性,以及它如何提升前端开发的效率和代码质量。

    prototype 1.3 源码解读

    通过以上对 Prototype 1.3 源码的分析可以看出,Prototype 旨在通过简洁高效的 API 来简化前端开发工作,尤其是针对 DOM 操作、事件处理以及类型操作等方面。这些核心功能的实现不仅提高了开发效率,还增强了代码的...

    使用Prototype框架.pdfprototype源码分析.doc

    例解Prototype框架.doc 第21章__使用Prototype框架.pdf Prototype源码注释版.pdf proprototype源码分析.doc totype_1.3_源码解读.txt

    prototype1.7.2

    1. **核心特性** Prototype 的核心特性包括增强的 JavaScript 对象模型、强大的 DOM 操作接口和高效的 Ajax 处理。在 1.7.2 版本中,这些特性得到了进一步优化,以提高性能和兼容性。 2. **对象扩展与类模拟** ...

    prototype学习笔记

    在JavaScript中,`prototype`是一个核心...总的来说,这篇"prototype学习笔记"深入讲解了JavaScript中的原型和继承机制,结合源码分析和实用工具,帮助开发者更全面地掌握这一核心概念,并能够在实际项目中灵活运用。

    prototype-AJAX案例

    通过分析案例代码,你可以深入理解Prototype如何简化AJAX开发,并学会如何在实际项目中应用。 此外,Prototype还提供了其他辅助方法,如`Ajax.activeRequestCount`来跟踪当前活跃的AJAX请求数量,以及`Ajax.options...

    prototype自己做的一个例子

    在JavaScript中,`prototype`是一个非常重要的概念,它关乎到对象继承和函数原型。...在压缩包`myJs`中,可能包含了实现上述概念的示例代码,通过分析和学习这些代码,可以进一步巩固对`prototype`的理解。

    prototype.js

    4. **实例分析**:通过实际案例展示Prototype.js在网页应用中的应用。 5. **最佳实践**:分享一些使用Prototype.js进行开发的经验和技巧。 三、Prototype.js的应用场景 Prototype.js广泛应用于网页动态效果、表单...

    Prototype Carousel Class-图片走马灯

    1. **Prototype库**: Prototype是JavaScript的一个扩展库,它的核心功能包括对DOM的操作、Ajax交互、事件处理以及对象函数式编程等。使用Prototype可以简化JavaScript代码,提高开发效率。 2. **DOM操作**: ...

    Prototype Tab图片滚动组件

    1. **DOM操作**:Prototype库的核心特性之一就是对DOM(文档对象模型)的操作。在该组件中,它可能会利用Prototype的`$`函数来获取元素,`Element.extend`来扩展DOM元素的方法,以及`Element.update`来更新元素内容...

    K-prototype源代码

    采用MATLAB编写,根据原作者论文的思路编写,代码里面存在注释,适合聚类分析学习者查看

    prototype-1.4.0源码解读.js

    通过分析Prototype 1.4.0的源码,我们可以更深入地理解JavaScript的设计模式和最佳实践,提升我们的编程技巧。尽管随着技术的发展,新的库和框架层出不穷,但Prototype的许多设计理念和方法仍被广泛借鉴,对学习和...

    JS Ajax XML 处理 (prototype)

    本篇文章将深入探讨如何在Prototype中处理XML数据,以及相关的源码分析。** **一、Prototype库中的Ajax基础** Prototype是一个流行的JavaScript库,它为JavaScript提供了许多实用的工具和扩展,包括Ajax功能。在...

    prototype ajax提交大数据

    1. 创建`XMLHttpRequest`对象。 2. 打开连接,设置请求的类型(GET或POST),URL以及是否异步。 3. 发送请求,如果是POST请求,需要设置请求头`Content-Type`和请求体。 4. 监听状态变化,当状态变为4(表示响应完成...

    编写基于Prototype的Javascript动画类

    1. **定义动画类**:基于Prototype,我们可以通过扩展`Function.prototype.method`来创建新的方法,如`start`、`stop`、`pause`等,这些方法将控制动画的开始、停止和暂停。 2. **属性缓动**:动画的核心在于如何...

    Prototype1.6.0在IE8 9下的问题

    1. **理解Prototype的版本历史**:Prototype 1.6.0是在2009年发布的,当时IE8已经存在,但IE9还未发布。因此,开发者可能已经考虑过IE8的兼容性,但可能存在一些未预见的边缘情况。 2. **浏览器兼容模式**:IE8和9...

    prototype进度条的实现例子--progressBar

    在JavaScript的世界里,Prototype是一个非常重要的库,它扩展了JavaScript的基本对象,提供了许多实用的功能,包括...通过分析这些文件,我们可以更深入地了解和学习Prototype库的使用以及进度条组件的具体实现细节。

Global site tag (gtag.js) - Google Analytics