资料来源于网上.版权属于原作者,不知道原作者及翻译者是who,不好意思了,呵呵.
(
一
).
序言
在写这个指南之前,先介绍一下
Prototype
主要是干吗的,如果你比较关注
ajax/javascipt
方面的应用,你应该早就听说过这个
javascript framework
。
Prototype
是一个基础的
javascript
应用框架,先引用一段官方网站的介绍
Prototype
is a JavaScript framework that aims to ease development of dynamic web
applications. Featuring a unique, easy-to-use toolkit for class-driven
development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.
根据作者自己的介绍,
Prototype
的目的是为了更方便的开发
javascript
的应用,使用它可以更加方便简单的使用
javascript
编程,开发出面向对象的
javascript
程序,
Prototype
中包含包含了一个功能强大好用的
ajax
框架,
Prototype
是一个基础性的框架,很多更高层次的框架都以它为基础,例如
scriptaculous
效果库
Prototype
中包含一下几个部分:
base: Prototype
中应用的基本功能,基本上其他所有部分都依赖于它,包括用于面向对象风格的
Class.create
和
Object.extend
,一个
Try
对象,函数绑定,
number
扩展,
PeriodicalExecuter(
周期性执行某个函数的功能
)
等
string:
对
String
原型的扩展,为
string
添加了
strip,escapeHTML
等等好用的方法
enumerable:
枚举类型
(array, hash, range
等
)
的父类对象,提供枚举类型的共同方法
array:
对
Array
原型的扩展,为
array
添加了
indexOf
、
without
等方法
hash:
为
javascript
提供了一个好用简单的
Hash
实现
range:
继承于
enumerable
,一个范围
(
例如
3
—
67)
对象
ajax:
一个功能强大好用的
ajax
框架
dom:
对基于浏览器的开发提供了很好的跨浏览器封装,并添加很多强大的功能
selector:
提供了使用
class
,
css
等选择元素的功能
form:
关于表单的一些功能
event:
简单的夸平台事件封装
position:
提供了一些关于元素位置方面的功能
可以说
Prototype
就想一把瑞士军刀,为
javascipt
封装了很多通用的功能,大大简化了
javascript
应用的开发,给
javascript
开发人员增添了很大的信心,
Prototype
可以运行于以下平台,使用它再也不用各种跨平台等问题烦恼了
* Microsoft Internet Explorer for Windows, version 6.0 and higher
* Mozilla Firefox 1.0/Mozilla 1.7 and higher
* Apple Safari 1.2 and higher
不过要注意的是:要想很好的理解
Prototype
,应该首先理解一下
javascript
面向对象开发的一些知识以后的文章将对
Prototype
中具体的每个功能中的方法做一个详细的介绍,包括作用,实例等
Prototype
官方网站是:
http://prototype.conio.net/
,目前发布版还只是
1.4,
但是现在的
1.5
已经发生了很大的变化,而且很多基于
prototype
的库使用的都是
1.5
的,所以强烈建议通过
svn
下载最新版代码
(
二
).Prototype
(
1.5 rc2)
使用指南之
base.js
base.js
中包含下面的内容
类的创建与继承:
Class.create():
创建一个类,例如
person=Class.create()
Object.extend(destination, source):
把
source
中方法属性
copy
到
destination(
使用
for property in source)
,需要注意的是,
javascript
中除了基本类型
(Number, Boolean)
外都是引用类型,所以这种
copy
一般只是
copy
引用而已,
destination
和
source
还是指向同一个方法或对象属性
(function array object)
在面向对象的编程中,一般通过
Class.create
新建一个类,如果这个类继承于另一个类,一般使用
Object.extend (class.prototype, parentClass.prototype)
或者
Object.extend(class.prototype, aparentClassInstance)
Object
构造函数的扩展:
Object
是其他对象实例的构造函数
(var a=new Object())
,也是所有其他类的父类,对
Object
直接扩展
(
注意不是扩展
Object.prototype
,扩展
Object.prototype
相当于添加实例方法
)
相当于为
Object
类添加静态方法
Object.inspect(object):
调用
object
的
inspect(
如果定义了
)
或
toString
方法,返回一个对象的字符串表示
Object.keys(object):
返回一个对象的所有属性和方法名称组成的数组
,
例如
Object.keys(document.body)
Object.values(object):
返回一个对象的所有属性和方法的值组成的数组
,
例如
Object.values(docuement)
Object.clone(object):
返回一个对象的
clone
版本,其实是执行
Object.extent
方法把
object
中的方法属性
copy
到一个新对象中,然后返回这个对象
函数邦定:
定义了
Function
对象的两个方法,
bind
和
bindAsEventListener
,这两个方法是一个函数的两个方法,对于
java
、
c#
程序员来说,看到这个也许感到很惊讶,因为在他们看来函数只是一个程序语句组织结构而已—
>
怎么还有方法,而且还可以扩展?这也是
javascript
等脚本语言相对于
java
等一个非常强大的功能,函数也是一个对象,函数名就是这个对象的名称,只要你愿意,你也可以使用
new Function(
…
)
来定义函数,所以为函数定义方法也就很正常不过了
这两个函数的主要作用是为了解决使用
javascript
面向对象风格编程中
this
的引用问题,在
javasctipt
中
this
关键字始终指向调用该函数的对象或者指向使用
call
,
apply
方法指定的对象(具体这方面的知识可以自己
google
一下,以下系列对
prototype
的介绍也假设读者对
javascript
语言比较熟悉了,如果不熟悉可以找本
javascript
权威指南这本书看看)
要理解这个问题首先要理解
始终指向这个问题,就是
this
这个关键字比较特殊,不能把他当成一般的变量名看待,最常见的一个错误就是在返回函数的调用中使用
this
,例如
return function(){this.aMethod()},
当你下次调用这个返回的匿名方法时,这个
this
引用的内容又指向了调用这个函数的对象了,记住的一点的
this
是个关键字,不是变量名,不会产生闭包
对
Number
的扩展
(
注意
num
也可以看成对象,其实是在使用的时候系统自动打包成
Number
对象
)
:
toColorPart
:把数字转换为可以用于表示
color
的
16
进制值:例如
7.toColorPart()=>"07"
,
28.toColorPart()=>"1C"
succ:
返回
num++,
但不改变
num
本身的值,其实就是
return this
+
1
times
:对从
0
到这个数字轮流调用一个函数
,
例如
function a(n){docuement.write(n)}, 10.times(a),
将显示
012345678910,
注意函数也是一个对象,而且与其他对象并没有实质的区别
Try
对象:
Try
对象提供了一个很有趣的功能
,
先看一下如下的代码:
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new XMLHttpRequest()},
function() {return new ActiveXObject(’Msxml2.XMLHTTP’)},
function() {return new ActiveXObject(’Microsoft.XMLHTTP’)} )
|| false;
}
}
Try
对象提供了一个方法
these,
这个方法接受一个函数类型的参数列表,然后轮流执行这些函数,当其中一个函数没有产生错误时,就停止执行,并且返回这个函数返回的值,自己慢慢体会吧
PeriodicalExecuter(
周期性执行器
)
对象
这个对象是对
setInterval
方法的简单封装,使用方法如下
var a=new PeriodicalExecuter(callback, frequency )
,其中
callback
指要执行的函数名
frequency
指
每次执行的时间间隔
要停止的话,调用这个对象的
stop
方法就可以了
a.stop()
(
三
)Prototype
(
1.5 rc2)
使用指南之
string.js
下面介绍
Prototype
对
String
对象的扩展部分:
这部分主要为
string
对象添加了几个很有用的方法
:
strip():
去掉字符串两边的空白
,
例如
" jj ".strip()
返回
"jj"
stripTags()
:去掉字符串中的
html
标签
stripScripts():
去掉字符串中的
javascript
代码段
extractScripts():
返回字符串中的
javascript
代码,返回数组
evalScripts():
执行字符串中的
javascript
代码
escapeHTML()
:将字符串中的
html
代码转换为可以直接显示的格式
,
例如将
<
转化为
<
,在
ie6
中有
bug
,执行这个操作返回的字符串,将多个连在一起的空白变成了一个,所以很多换行什么的都被去掉了
unescapeHTML(): escapeHTML
的反向过程
truncate(length, truncation):
截断,例如
"abcdefghigkl".truncate(10)
返回
abcdefg
…
, truncation
默认为
"
…
" toQueryParams(separator)/parseQuery(separator)
:将一个
querystring
转化为一个
hash
表(其实是一个对象,在
javascript
中对象可以当成
hash
表来用,因为对象的属性或方法可以通过
object[propertyName]
来访问)
toArray(): return this.split('
’
),
转化为一个字符数组
camelize():
将
background-color
的形式转化为
backgroundColor
形式,用在
style/css
中
capitalize():
返回一个首字母大写的字符串
inspect(useDoubleQuotes):
返回字符串的表示形式
,
例如
"sdfj\"sfa".inspect()
返回
“’
sdfj"sfa
’”
gsub(pattern, replacement)
:
pattern
是一个正则表达式,
replacement
是一个函数
(
或者是一个
template
字符串
)
,对于字符串中每个匹配
pattern
的部分使用
replacement
处理,然后将
replacement
返回的值将原来匹配的部分替换掉,例如
"skdjfAsfdjkAdk".gsub(/A/,function(match) {return match[0].toLowerCase()}),
将字符串所有的
A
转化为
a,
注意
pattern
中不要添加
g
选项,因为
gsub
会递归的执行
match
方法
sub(pattern, replacement, count)
:
gsub
的另一种形式,不过可以设置执行的次数
scan(pattern, iterator):
跟
gsub
差不多,但是返回的是字符串本身,也就是说对于
pattern
中的每个匹配执行
iterator
,但是不返回替换的字符串
"skdjfAsfdjkAdk".gsub(/A/,function(){alert have a A
’
})
underscore(): 'borderBottomWidth’.underscore() -> 'border_bottom_width’
dasherize(): 'Hello_World’.dasherize() -> 'Hello-World’
Template
模板类:
使用方法:
var template = new Template(replacement, pattern);
template.evaluate(object)
有点像
php
中的模板,默认
(
没有提供
pattern)
将
{propertyName}
形式的东西替换了
object
的属性值
(
四
).Prototype
(
1.5 rc2)
使用指南之
Enumerable.js
Enumerable
是一个抽象对象(需要说明的是,
javascript
中并没有类的概念,所指的类也就是一个函数,继承一般指的是一个对象
(
父
)
将它的方法属性
copy(
通过
Object.extend, copy
的是引用
)
到子类
(
函数
)
的
prototype
属性
(
一个对象
)
中)
Enumerable
不能直接使用,它被很多枚举类型(
Hash
、
Array
、
Range
等)所继承,继承的类型都要实现一个
_each
方法,提供具体类型的枚举方法
Enumerable
为其他子类提供了如下的方法:
each(iterator): iterator
是一个函数对象
,
这个方法调用具体类型的
_each
方法对自身包含的每个对象调用
iterator
,例如如果
Enumerable
具体指的是一个
Array
,
eg: var a=[2,3,4],
则
a.each(iterator)
方法将依次调用
iterator(2,0) ,iterator(3,1), iterator(4,3)
,其中第二个参数指的是索引。这个方法几乎在
Enumerable
中的每个方法中都要用到
eachSlice(number, iterator)
:将
Enumerable
类型对象每个每个按照
number
分开,例如
[1,2,3,4,5].eachSlice(3)=>[[1,2,3],[4,5]],
没有提供
iterator,
则
iterator=Prototype.K: function(k){return k}
,
Prototype
中的很多
iterator
默认值都是这个,或者是
Prototype.emptyFunction: function() {},
其实实际上返回的是
[iterator([1,2,3]),iterator([4,5])]
all(iterator):
对
Enumerable
类型中的每个值调用
iterator
,如果其中有一个返回
false
,则返回
false
,否则返回
true
,相当于判断是否每个值执行
iterator
都是
"true"
any(iterator):
跟
all
相反,判断是否每个值都是
"false"
(是否有一个值是
true
)
collect(iterator)/map:
对每个值调用
iterator
,将结果组成一个新的数组返回
detect(iterator)/find:
对每个值调用
iterator
,如果有一个不为
false
,则返回这个执行
iterator
后不为
false
的值
(
不是返回执行
iterator
后的值
)
,相当于找出第一个真值
findAll(iterator)/select:
相当于
detect,
但是找出所有的真值,返回一个数组
grep(pattern, iterator)
:返回所以符合
pattern
的值,
iterator
提供的话,则返回执行
iterator
的值
include(object)/member:
数组中是否包含
object
inGroupsOf(number, fillWith): eachSlice
的变异版本,按照
number
将对象分开,如果分开后的数组的最后一个值的
length
小于
number,
则用
fillwith
填充
,
例如
[1,2,3,4,5].inGroupsOf(3)=>[[1,2,3],[4,5,null]]
inject(memo, iterator):
注入
invoke(method):
调用
max(iterator):
最大值
min(iterator):
最小值
partition(iterator):
分离
pluck(property):
采集
reject(iterator):
不合格的产品
,
于
findAll
相反
sortBy(iterator):
根据
iterator
排序,如果调用的对象是
Array
的话,直接调用内置的
sort(iterator)
就行了
toArray()/entries:
将调用对象的每个值组成一个数组返回
zip():
例如
[2,3,4].zip([5,6,7])=>[[2,5],[3,6],[4,7]],
如果最后一个参数类型为
function
,将返回
[iterator([2,5]),iterator([3,6]),iterator([4,7])],
inspect(): Enumerable
对象的字符串表示