資料來源于網上.版權屬于原作者,不知道原作者及翻譯者是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
根據作者自己的介紹, 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()=>"
succ: 返回 num++, 但不改變 num 本身的值,其實就是 return this + 1
times :對從 0 到這個數字輪流調用一個函數 , 例如 function a(n){docuement.write(n)}, 10.times(a), 將顯示 012345678910, 注意函數也是一個對象,而且與其他對象并沒有實質的區別
Try 對象: Try 對象提供了一個很有趣的功能 , 先看一下如下的代碼:
var
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 對象的字符串表示