This Is A FineDay

            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
            93 隨筆 :: 0 文章 :: 69 評論 :: 0 Trackbacks

          資料來源于網(wǎng)上.版權屬于原作者,不知道原作者及翻譯者是who,不好意思了,呵呵.

          ( ). 序言

          在寫這個指南之前,先介紹一下 Prototype 主要是干嗎的,如果你比較關注 ajax/javascipt 方面的應用,你應該早就聽說過這個 javascript framework Prototype 是一個基礎的 javascript 應用框架,先引用一段官方網(wǎng)站的介紹

          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.

          根據(jù)作者自己的介紹, Prototype 的目的是為了更方便的開發(fā) javascript 的應用,使用它可以更加方便簡單的使用 javascript 編程,開發(fā)出面向?qū)ο蟮?/span> javascript 程序, Prototype 中包含包含了一個功能強大好用的 ajax 框架, Prototype 是一個基礎性的框架,很多更高層次的框架都以它為基礎,例如 scriptaculous 效果庫

          Prototype 中包含一下幾個部分:

          base: Prototype 中應用的基本功能,基本上其他所有部分都依賴于它,包括用于面向?qū)ο箫L格的 Class.create Object.extend ,一個 Try 對象,函數(shù)綁定, number 擴展, PeriodicalExecuter( 周期性執(zhí)行某個函數(shù)的功能 )

          string: String 原型的擴展,為 string 添加了 strip,escapeHTML 等等好用的方法

          enumerable: 枚舉類型 (array, hash, range ) 的父類對象,提供枚舉類型的共同方法

          array: Array 原型的擴展,為 array 添加了 indexOf without 等方法

          hash: javascript 提供了一個好用簡單的 Hash 實現(xiàn)

          range: 繼承于 enumerable ,一個范圍 ( 例如 3 67) 對象

          ajax: 一個功能強大好用的 ajax 框架

          dom: 對基于瀏覽器的開發(fā)提供了很好的跨瀏覽器封裝,并添加很多強大的功能

          selector: 提供了使用 class css 等選擇元素的功能

          form: 關于表單的一些功能

          event: 簡單的夸平臺事件封裝

          position: 提供了一些關于元素位置方面的功能

          可以說 Prototype 就想一把瑞士軍刀,為 javascipt 封裝了很多通用的功能,大大簡化了 javascript 應用的開發(fā),給 javascript 開發(fā)人員增添了很大的信心, 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 面向?qū)ο箝_發(fā)的一些知識以后的文章將對 Prototype 中具體的每個功能中的方法做一個詳細的介紹,包括作用,實例等 Prototype 官方網(wǎng)站是: http://prototype.conio.net/ ,目前發(fā)布版還只是 1.4, 但是現(xiàn)在的 1.5 已經(jīng)發(fā)生了很大的變化,而且很多基于 prototype 的庫使用的都是 1.5 的,所以強烈建議通過 svn 下載最新版代碼

          ?

          ( ).Prototype 1.5 rc2) 使用指南之 base.js

          base.js 中包含下面的內(nèi)容

          類的創(chuàng)建與繼承:

          Class.create(): 創(chuàng)建一個類,例如 person=Class.create()

          Object.extend(destination, source): source 中方法屬性 copy destination( 使用 for property in source) ,需要注意的是, javascript 中除了基本類型 (Number, Boolean) 外都是引用類型,所以這種 copy 一般只是 copy 引用而已, destination source 還是指向同一個方法或?qū)ο髮傩?/span> (function array object)

          在面向?qū)ο蟮木幊讨校话阃ㄟ^ Class.create 新建一個類,如果這個類繼承于另一個類,一般使用 Object.extend (class.prototype, parentClass.prototype) 或者 Object.extend(class.prototype, aparentClassInstance)

          Object 構造函數(shù)的擴展:

          Object 是其他對象實例的構造函數(shù) (var a=new Object()) ,也是所有其他類的父類,對 Object 直接擴展 ( 注意不是擴展 Object.prototype ,擴展 Object.prototype 相當于添加實例方法 ) 相當于為 Object 類添加靜態(tài)方法

          Object.inspect(object): 調(diào)用 object inspect( 如果定義了 ) toString 方法,返回一個對象的字符串表示

          Object.keys(object): 返回一個對象的所有屬性和方法名稱組成的數(shù)組 , 例如 Object.keys(document.body)

          Object.values(object): 返回一個對象的所有屬性和方法的值組成的數(shù)組 , 例如 Object.values(docuement)

          Object.clone(object): 返回一個對象的 clone 版本,其實是執(zhí)行 Object.extent 方法把 object 中的方法屬性 copy 到一個新對象中,然后返回這個對象

          函數(shù)邦定:

          定義了 Function 對象的兩個方法, bind bindAsEventListener ,這兩個方法是一個函數(shù)的兩個方法,對于 java c# 程序員來說,看到這個也許感到很驚訝,因為在他們看來函數(shù)只是一個程序語句組織結構而已— > 怎么還有方法,而且還可以擴展?這也是 javascript 等腳本語言相對于 java 等一個非常強大的功能,函數(shù)也是一個對象,函數(shù)名就是這個對象的名稱,只要你愿意,你也可以使用 new Function( ) 來定義函數(shù),所以為函數(shù)定義方法也就很正常不過了

          這兩個函數(shù)的主要作用是為了解決使用 javascript 面向?qū)ο箫L格編程中 this 的引用問題,在 javasctipt this 關鍵字始終指向調(diào)用該函數(shù)的對象或者指向使用 call apply 方法指定的對象(具體這方面的知識可以自己 google 一下,以下系列對 prototype 的介紹也假設讀者對 javascript 語言比較熟悉了,如果不熟悉可以找本 javascript 權威指南這本書看看) 要理解這個問題首先要理解 始終指向這個問題,就是 this 這個關鍵字比較特殊,不能把他當成一般的變量名看待,最常見的一個錯誤就是在返回函數(shù)的調(diào)用中使用 this ,例如 return function(){this.aMethod()}, 當你下次調(diào)用這個返回的匿名方法時,這個 this 引用的內(nèi)容又指向了調(diào)用這個函數(shù)的對象了,記住的一點的 this 是個關鍵字,不是變量名,不會產(chǎn)生閉包

          Number 的擴展 ( 注意 num 也可以看成對象,其實是在使用的時候系統(tǒng)自動打包成 Number 對象 )

          toColorPart :把數(shù)字轉(zhuǎn)換為可以用于表示 color 16 進制值:例如 7.toColorPart()=>"07" 28.toColorPart()=>"1C"

          succ: 返回 num++, 但不改變 num 本身的值,其實就是 return this 1

          times :對從 0 到這個數(shù)字輪流調(diào)用一個函數(shù) , 例如 function a(n){docuement.write(n)}, 10.times(a), 將顯示 012345678910, 注意函數(shù)也是一個對象,而且與其他對象并沒有實質(zhì)的區(qū)別

          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, 這個方法接受一個函數(shù)類型的參數(shù)列表,然后輪流執(zhí)行這些函數(shù),當其中一個函數(shù)沒有產(chǎn)生錯誤時,就停止執(zhí)行,并且返回這個函數(shù)返回的值,自己慢慢體會吧

          PeriodicalExecuter( 周期性執(zhí)行器 ) 對象

          這個對象是對 setInterval 方法的簡單封裝,使用方法如下

          var a=new PeriodicalExecuter(callback, frequency ) ,其中 callback 指要執(zhí)行的函數(shù)名 frequency 每次執(zhí)行的時間間隔

          要停止的話,調(diào)用這個對象的 stop 方法就可以了 a.stop()?

          ?

          ( )Prototype 1.5 rc2) 使用指南之 string.js

          下面介紹 Prototype String 對象的擴展部分:

          這部分主要為 string 對象添加了幾個很有用的方法 :

          strip(): 去掉字符串兩邊的空白 , 例如 "? jj? ".strip() 返回 "jj"

          stripTags() :去掉字符串中的 html 標簽

          stripScripts(): 去掉字符串中的 javascript 代碼段

          extractScripts(): 返回字符串中的 javascript 代碼,返回數(shù)組

          evalScripts(): 執(zhí)行字符串中的 javascript 代碼

          escapeHTML() :將字符串中的 html 代碼轉(zhuǎn)換為可以直接顯示的格式 , 例如將 < 轉(zhuǎn)化為 &lt; ,在 ie6 中有 bug ,執(zhí)行這個操作返回的字符串,將多個連在一起的空白變成了一個,所以很多換行什么的都被去掉了

          unescapeHTML(): escapeHTML 的反向過程

          truncate(length, truncation): 截斷,例如 "abcdefghigkl".truncate(10) 返回 abcdefg , truncation 默認為 " " toQueryParams(separator)/parseQuery(separator) :將一個 querystring 轉(zhuǎn)化為一個 hash 表(其實是一個對象,在 javascript 中對象可以當成 hash 表來用,因為對象的屬性或方法可以通過 object[propertyName] 來訪問)

          toArray(): return this.split(' ), 轉(zhuǎn)化為一個字符數(shù)組

          camelize(): background-color 的形式轉(zhuǎn)化為 backgroundColor 形式,用在 style/css

          capitalize(): 返回一個首字母大寫的字符串

          inspect(useDoubleQuotes): 返回字符串的表示形式 , 例如 "sdfj\"sfa".inspect() 返回 “’ sdfj"sfa ’”

          gsub(pattern, replacement) pattern 是一個正則表達式, replacement 是一個函數(shù) ( 或者是一個 template 字符串 ) ,對于字符串中每個匹配 pattern 的部分使用 replacement 處理,然后將 replacement 返回的值將原來匹配的部分替換掉,例如 "skdjfAsfdjkAdk".gsub(/A/,function(match) {return match[0].toLowerCase()}), 將字符串所有的 A 轉(zhuǎn)化為 a, 注意 pattern 中不要添加 g 選項,因為 gsub 會遞歸的執(zhí)行 match 方法

          sub(pattern, replacement, count) gsub 的另一種形式,不過可以設置執(zhí)行的次數(shù)

          scan(pattern, iterator): gsub 差不多,但是返回的是字符串本身,也就是說對于 pattern 中的每個匹配執(zhí)行 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 中并沒有類的概念,所指的類也就是一個函數(shù),繼承一般指的是一個對象 ( ) 將它的方法屬性 copy( 通過 Object.extend, copy 的是引用 ) 到子類 ( 函數(shù) ) prototype 屬性 ( 一個對象 ) 中)

          Enumerable 不能直接使用,它被很多枚舉類型( Hash Array Range 等)所繼承,繼承的類型都要實現(xiàn)一個 _each 方法,提供具體類型的枚舉方法

          Enumerable 為其他子類提供了如下的方法:

          each(iterator): iterator 是一個函數(shù)對象 , 這個方法調(diào)用具體類型的 _each 方法對自身包含的每個對象調(diào)用 iterator ,例如如果 Enumerable 具體指的是一個 Array eg: var a=[2,3,4], a.each(iterator) 方法將依次調(diào)用 iterator(2,0) ,iterator(3,1), iterator(4,3) ,其中第二個參數(shù)指的是索引。這個方法幾乎在 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 類型中的每個值調(diào)用 iterator ,如果其中有一個返回 false ,則返回 false ,否則返回 true ,相當于判斷是否每個值執(zhí)行 iterator 都是 "true"

          any(iterator): all 相反,判斷是否每個值都是 "false" (是否有一個值是 true

          collect(iterator)/map: 對每個值調(diào)用 iterator ,將結果組成一個新的數(shù)組返回

          detect(iterator)/find: 對每個值調(diào)用 iterator ,如果有一個不為 false ,則返回這個執(zhí)行 iterator 后不為 false 的值 ( 不是返回執(zhí)行 iterator 后的值 ) ,相當于找出第一個真值

          findAll(iterator)/select: 相當于 detect, 但是找出所有的真值,返回一個數(shù)組

          grep(pattern, iterator) :返回所以符合 pattern 的值, iterator 提供的話,則返回執(zhí)行 iterator 的值

          include(object)/member: 數(shù)組中是否包含 object

          inGroupsOf(number, fillWith): eachSlice 的變異版本,按照 number 將對象分開,如果分開后的數(shù)組的最后一個值的 length 小于 number, 則用 fillwith 填充 , 例如 [1,2,3,4,5].inGroupsOf(3)=>[[1,2,3],[4,5,null]]

          inject(memo, iterator): 注入

          invoke(method): 調(diào)用

          max(iterator): 最大值

          min(iterator): 最小值

          partition(iterator): 分離

          pluck(property): 采集

          reject(iterator): 不合格的產(chǎn)品 , findAll 相反

          sortBy(iterator): 根據(jù) iterator 排序,如果調(diào)用的對象是 Array 的話,直接調(diào)用內(nèi)置的 sort(iterator) 就行了

          toArray()/entries: 將調(diào)用對象的每個值組成一個數(shù)組返回

          zip(): 例如 [2,3,4].zip([5,6,7])=>[[2,5],[3,6],[4,7]], 如果最后一個參數(shù)類型為 function ,將返回 [iterator([2,5]),iterator([3,6]),iterator([4,7])],

          inspect(): Enumerable 對象的字符串表示

          posted on 2008-07-03 21:32 Peter Pan 閱讀(264) 評論(0)  編輯  收藏 所屬分類: JS
          主站蜘蛛池模板: 阿拉善左旗| 汝州市| 九龙城区| 玛沁县| 射阳县| 延吉市| 浠水县| 华容县| 五华县| 当涂县| 新平| 乐东| 绥宁县| 法库县| 山东| 祁东县| 沙田区| 诸暨市| 噶尔县| 邯郸市| 金沙县| 兰西县| 蒲城县| 乐东| 大丰市| 奉新县| 吴川市| 剑河县| 彝良县| 甘肃省| 河东区| 永春县| 沂源县| 封丘县| 定远县| 集贤县| 霍林郭勒市| 凤翔县| 岑溪市| 德州市| 屯留县|