This Is A FineDay

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  93 随笔 :: 0 文章 :: 69 评论 :: 0 Trackbacks

资料来源于网上.版权属于原作者,不知道原作者及翻译者是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 代码转换为可以直接显示的格式 , 例如将 < 转化为 &lt; ,在 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 对象的字符串表示

posted on 2008-07-03 21:32 Peter Pan 阅读(254) 评论(0)  编辑  收藏 所属分类: JS

只有注册用户登录后才能发表评论。


网站导航: