Prototype框架

MooTools替代Prototype

mooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。

Mootools跟prototype相类似,语法几乎一样。但它提供的功能要比prototype多,而且更强大。比如增加了动画特效、拖放操作等等。而且拥有强大而清晰的文档和示例帮助你轻松入门。

它的下载页面更是酷的要命,即使下载全部功能也只有40K,而且它的源代码非常具有可读性,还有详细注解!

所以建议大家使用mootools取代prototype。

刚才看了看mootools的代码,是我喜欢的风格 呵呵

打算再深入研究 ...


阅读全文 》

Prototype框架是怎样扩展DOM的

Prototype框架最大的部分就是对DOM的扩展。Prototype框架里的$()函数返回一个网页DOM元素,框架给这个元素添加了很多方便的方法。举个例子:你可以写这样的代码 $('comments').addClassName('active').show() ,用来取得ID是“comments”的元素,给它添加一个CSS的ClassName并且显示它(假设之前是隐藏的)。本来在JavaScript里,“comments”元素是没有这些方法可用的;这是怎么实现的呢?这篇文章揭示了几个在Prototype框架里用到的技巧。

用 Element.addMethods() 添加你自己的方法

如果你有自己的DOM方法想要添加到Prototype ...


阅读全文 》

关于prototype.js的一些技术说明

本文是转载,关于prototype.js的一些技术说明说明,比如关于javascript的apply和call函数,关于闭包,关于函数的绑定,关于事件的注册,关于事件监听最佳实践等等,很难得的一篇文章,从dnew.cn转载而来。

关于闭包

prototype.js在Class.create,bind等中用到javascript的闭包特色。但整体上prototype.js对于强大的闭包特性用的不多。大家可以参阅我翻译的篇文章了解闭包。

3、让我比较反感的两个方法

(1)很讨厌用别的语言的风格来写javascript。用这个方法构造自定义类

并没有觉得有多方便,减少代码行数,只会让人难理解, ...


阅读全文 》

prototype使用学习手册指南之Position.js

Position是prototype中定义的一个对象,提供了操作DOM中与位置相关的方法,要很好的理解元素在页面中的位置,具体代码如下,按照代码说说,其中英文是作者的注释,中文的才是偶的说明或翻译英文的注释,采用顶式注释法(注释在要说明的代码的上面)说明

// set to true if needed, warning: firefox performance problems

// NOT neeeded for page scrolling, only if draggable contained in

// scrollable elements

//只有在使用拖动的时候元素包含在有滚动条的元素中才需要设置为true

includeScrollOffsets: false,

...


阅读全文 》

prototype使用学习手册指南之event.js

键盘事件包括keydown、kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键;而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符。可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以"键"为单位,你敲入了大写的A,它只是当成你敲下了shift和A两个键而已,但是keypress可以捕捉到你 ...


阅读全文 》

Prototype使用学习手册指南之form.js

这一部分提供了很多与表单操作有关的功能,包括以下部分,当通过$方法返回元素时,可以直接通过$(element).method()调用:

Form对象:提供了操作整个表单的一些方法

Form.Element对象:提供了操作某个表单元素的方法

TimedObserver类:周期性表单监视器,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型

EventObserver类:利用事件来监视表单元素,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型

Form.Element对象:

focus(element) select(element):html元素 ...


阅读全文 》

基于prototype的web验证框架

prototype.js是所有的基础

validation.js真正的验证框架文件,badqiu在原来的基础上增加了许多不错的功能

1:引用js文件2:引用css文件

可以参加style_min.css中的样式声明,也可以把style_min.css中的样式声明引入到你的框架js文件中去.

3:hellow world

在badqiu的扩展中如果要是某个form中的元素被验证可以这样给声明的form中加一个class='required-validate'的属性,框架会在load是自动绑定

所有要验证的域.

xml 代码在要检查的域中通过class属性来声明被检查域的限制条件,例如上面的class='required min-length-2'表示这是 ...


阅读全文 》

Prototype使用学习手册指南之Selector.js

Prototype 中的Selector主要支持tag选择器、class选择器和id选择器,还有属性(attribute)选择器,Selector是利用css selector来匹配选择页面元素的,所以要理解Selector首先应该对css selector有所理解,下面是css2 selector的语法,当然很多浏览器只是支持其中的一部分,基本上包含我们平时所用的所有类型

The following table summarizes CSS2 selector syntax, 详细的可以看http://www.w3.org/TR/REC-CSS2/selector.html:

PatternMeaningDescribed in section*Matches any element.Universal selectorEMatches any E element ( ...


阅读全文 》

Prototype使用学习手册指南之dom.js

DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。这部分提供了很多(写的都有点烦了)方便的操作dom的方法:包含有名的$方法、document.getElementsByClassName方法,以及Element对象、Insertion对象

以下部分一个一个的详细介绍:

$(element):getElementById的封装,element可以是一个元素的id或元素本身,也可以是一个数组,这时返回一个数组,使用$方法,会自动调用Element.extend(element)方法,这样的话使元素可以直接调用 Element中的方法, 例如Element.hi ...


阅读全文 》

Prototype使用学习手册指南之ajax.js

和在我以前使用这个类库的不少开发者一样,一开始,我不得不一头扎进阅读prototype.js的源代码和实验它的功能中。Prototype中的ajax.js提供了一个非常好用的ajax框架,一般应用中简单的调用以下代码就可以了这个框架中提供了如下的对象和方法等:

Ajax对象:只有一个getTransport方法,返回一个XMLHttpRequest对象,另外有一个activeRequestCount属性,反映当前正在处理的ajax数量

Ajax.Responders对象:继承自Enumerable,管理全局Ajax的请求,具有如下方法:

register(responder):注册一个管理ajax请求的对象

unregist ...


阅读全文 》