`
shake863
  • 浏览: 638574 次
  • 性别: 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用法分析

    主要介绍了Spring实战之Bean的作用域singleton和prototype用法,结合实例形式分析了Bean的作用域singleton和prototype相关使用方法及操作注意事项,需要的朋友可以参考下

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

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

    prototype框架分析

    prototype框架分析.xls

    prototype,__proto,constructor

    分析javascript中 prototype __proto__ constructor之间的关系

    K-prototype源代码

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

    Robot RV reducer virtual prototype simulation and analysis

    机器人用RV减速器虚拟样机仿真与分析,关天民,张迎辉,论文基于多体系统动力学原理建立了机器人用RV减速器的虚拟样机模型,建立模型中,在分析RV 减速器的工作原理基础上,定义三个行星�

    prototype框架中美元符号$用法分析

    1、prototype中$()的用法 prototype写法 $(“test”) 或者 $$(“#test”), 他相当于js中document.getElementById(“test”); jqueryp写法 $(“#test”) ,他也相当于js中document.getElementById(“test”

    深入分析js中的constructor和prototype

    我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子,来说明这个 代码如下: function a(c){ this.b =...

    jQuery.prototype.init选择器构造函数源码思路分析

    jQuery的核心思想可以简单概括为“查询和操作dom”,今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数,感兴趣的朋友可以了解下,或许本文所提供的知识对你学习有所帮助

    JS原型prototype和__proto__用法实例分析

    本文实例讲述了JS原型prototype和__proto__用法。分享给大家供大家参考,具体如下: 先来看一个实例 function Foo() { } var foo = new Foo(); console.log(foo.prototype);// undefined console.log(foo.__proto__...

    Javascript Function.prototype.bind详细分析

    Function.prototype.bind分析 bind()方法会创建一个新的函数,成为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入的第一个参数作为this,传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的...

    Function.prototype.call.apply结合用法分析示例

    分析步骤如下: 1、将Function.prototype.call当成整体,call方法是由浏览器实现的本地方法,是函数类型的内部方法 var a = (Function.prototype.call).apply(function(a){return a;}, [0,4,3]); 2、fun

    JS利用prototype给类添加方法操作详解

    主要介绍了JS利用prototype给类添加方法操作,结合实例形式分析了javascript使用prototype实现给类添加方法的相关操作技巧,需要的朋友可以参考下

    JS中prototype的用法实例分析

    本文实例讲述了JS中prototype的用法。分享给大家供大家参考。具体分析如下: JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 ...

    prototype源码下载

    prototype源码下载,没有压缩过,请各位看官下载分析理解

    proposal-string-prototype-codepoints:ECMAScript的String.prototype.codePoints建议(阶段1)

    对于包含高于0xFFFF的代码点的语言(例如ECMAScript语法本身),词法分析器需要能够在使用自己的状态机处理字符串之前将字符串标记为单独的代码点。 当前,语言API提供了两种访问整个代码点的方式: codePointAt...

Global site tag (gtag.js) - Google Analytics