資料來源于網上.版權屬于原作者,不知道原作者及翻譯者是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
對象的字符串表示