国产亚洲美日韩AV中文字幕无码成人,亚洲av无码不卡私人影院,国产亚洲玖玖玖在线观看

prototype源码分析(�?)

hummer — Fri, 30 May 2008 05:56:00 GMT

Function - 对Function�cȝ��扩展

Prototype�?span class="object">Function对象的扩展比较简�? 但却是非帔R��要且非常有用的扩展。扩展主要包�?个方�? 他们被加��C��Function.prototype�? �q�样��׃��得�Q意的函数对象都具备了�q�两个方法�?�q�两个方法的主要用途在于将某个函数�l�定到特定的函数之上��L��行�?

Knowledge Prepare - 知识准备

Source View - 源码解析

Function.prototype.bind = function() {
var __method = this;  // �q�里的this表示bind�Ҏ��的调用�? 是一个函数对�?/span>
var args = $A(arguments);  // �q�里�?A(arguments)表示传入�?span class="method">bind�Ҏ��的参�? 不要与下面的$A(arguments)��h��
var object = args.shift(); // 调用args.shift()�Ҏ���q�回�W�一个参�? 即目标对�? 此时args为除�ȝ��一个参数的一个参数数�l?/span>
return function() {  // 不带有�Q何的参数的函�? 注意函数内部�?A(arguments)的含�?/span>
// 调用函数的apply�Ҏ��执行函数, 其中的object为目标对�? args�?span class="method">bind�Ҏ��中的参数列表(除了�W�一个参��C��外的参数构成的数�l?
return __method.apply(object, args.concat($A(arguments)));// 事实�? �q�里�?A(arguments)一定是一个空数组
}
}
Function.prototype.bindAsEventListener = function(object) {
var __method = this;  // �q�里的this表示bind�Ҏ��的调用�? 是一个函数对�?/span>
return function(event) {  // 带有一个全局event参数的函�?/span>
// 调用函数的call�Ҏ��执行函数, 其中的object为目标对�? 全局的event对象作�ؓ参数
return __method.call(object, event || window.event);
}
}

Field & Function Reference - 属性方法一�?/h4>

Function ( 实例 ) - 扩展

Method / Property	Kind	Arguments	Description
bind(object[, arg1, arg2...])	�Ҏ��	object�Q�目标对�? 函数��绑定到该对象上��L��?br /> argument list: 以参数列表的方式传入, 函数执行时所带的参数	一个实例方�? 其调用者是一个函数对�? 表示��某个对象绑定到该函��C��L��? 其中的第一个参数表�C�目标对�? 其他参数��作为函数执行时的参��C��?/td>
bindAsEventListener(object)	�Ҏ��	object�Q�目标对�?/td>	一个实例方�? 其调用者是一个函数对�? 表示��某个对象绑定到该函��C��L��? 参数为目标对�? 在函数执行时��全局的Event对象作�ؓ参数传入

Analysis & Usage - 分析与��?/h4>

hummer 2008-05-30 13:56 发表评论

prototype源码分析(�?)

hummer — Fri, 30 May 2008 05:53:00 GMT

Object - 对Object�cȝ��扩展

Prototype�?span class="object">Object�c�进行的扩展主要通过一个静态函�?span class="method">Object.extend(destination, source)实现了JavaScript中的�l�承�?从语义的角度, Object.extend(destination, source)�Ҏ��有些不和逻辑, 因�ؓ它事实上仅仅实现了从源对象到目标对象的全息拷贝。不�q�你也可以这栯��为：�׃��目标对象拥有了所有源对象所拥有的特�? 所以看上去��像目标对象�l�承了源对象(�q�加以扩�?一栗��另�? Prototype�?span class="object">Object扩展了几个比较有用的静态方�? 所有其他的�c�d��以通过调用�q�些静态方法获取支持�?

Source View - 源码解析

Object.extend = function(destination, source) {  // 一个静态方法表�C����? 目标对象���拥有源对象的所有属性和�Ҏ��
for (var property in source) {
destination[property] = source[property];   // 利用动态语�a�的特�? 通过赋值动态添加属性与�Ҏ��
}
return destination;   // �q�回扩展后的对象
}
Object.extend(Object, {
inspect: function(object) {   // 一个静态方�? 传入一个对�? �q�回对象的字�W�串表示
try {
if (object == undefined) return 'undefined';  // 处理undefined情况
if (object == null) return 'null';     // 处理null情况
// 如果对象定义了inspect�Ҏ��, 则调用该�Ҏ���q�回, 否则�q�回对象的toString()�?/span>
return object.inspect ? object.inspect() : object.toString();
} catch (e) {
if (e instanceof RangeError) return '...';  // 处理异常情况
throw e;
}
},
keys: function(object) {     // 一个静态方�? 传入一个对�? �q�回该对象中所有的属�? 构成数组�q�回
var keys = [];
for (var property in object)
keys.push(property);     // ���每个属性压入到一个数�l�中
return keys;
},
values: function(object) {   // 一个静态方�? 传入一个对�? �q�回该对象中所有属性所对应的�? 构成数组�q�回
var values = [];
for (var property in object)
values.push(object[property]);   // ���每个属性的值压入到一个数�l�中
return values;
},
clone: function(object) {    // 一个静态方�? 传入一个对�? 克隆一个新对象�q�返�?/span>
return Object.extend({}, object);
}
});

Field & Function Reference - 属性方法一�?/h4>

Object ( 静�?) - 扩展

Method / Property	Kind	Arguments
extend(destination, source)	静态方�?/td>	��L��对象
inspect(object)	静态方�?/td>	��L��对象
keys(object)	静态方�?/td>	��L��对象
values(object)	静态方�?/td>	��L��对象
clone(object)	静态方�?/td>	��L��对象

Analysis & Usage - 分析与��?/h4>

Object.extend(destination, source)是Prototype实现的一个静态方�? 在JavaScript中模拟了�l�承�?事实�? �q�个�Ҏ��的语义更加們֐�于：动态地为某个对象添加属性或�Ҏ��。这个函数诏�I�了整个Prototype的框�? 虽然核心思想是一致的, 但是在��用中�q�是能够看到一些不同之�? �q�些不同之处很微��但是却值得一提�?

1. 扩展现有对象的功�?- ��Z��们添加新的函�?

Object.extend(Number.prototype, {
toColorPart: function() {
var digits = this.toString(16);
if (this < 16) return '0' + digits;
return digits;
},
......
});

�q�是非常典型的对Number�cȝ��扩展, �?span class="object">Number.prototype加入了一些额外的函数, 从而每个Number对象的实例都拥有�q�些�Ҏ��?

2. 定义�q�实现抽象类

var Enumerable = {
each: function(iterator) {
var index = 0;
try {
this._each(function(value) {
try {
iterator(value, index++);
} catch (e) {
if (e != $continue) throw e;
}
});
} catch (e) {
if (e != $break) throw e;
}
},
......
}
Object.extend(Array.prototype, Enumerable);
Object.extend(Array.prototype, {
_each: function(iterator) {
for (var i = 0; i < this.length; i++)
iterator(this[i]);
},
......
}

�q�是Prototype中的代码�D? 它向我们展示了定义�ƈ实现抽象�cȝ��完整�q�程。这里首先定义了一�?span class="object">Enumerable�c? �q�是一个抽象类。这个抽象类的内�? 有一�?span class="method">_each�Ҏ��被调用来完成一些逻辑。但是在整个Enumerable的范围内, 你无法找�?span class="method">_each�Ҏ��的具体实现。也��是�? Enumerable是一个抽象类, ��h��一�?span class="method">_each的抽象函数�?所�? 如果你还没有实现_each�q�个抽象函数, 你是无法直接使用Enumerable�cȝ��。之后的代码��比较明朗了, 使用Object.extend�Ҏ��, ��所�?span class="object">Enumerable的函数复制给Array.prototype, 然后�?span class="object">Array.prototype中实�?span class="method">_each�Ҏ��, �q�样��׃��?span class="object">Array对象具备�?span class="object">Enumerable�q�个抽象�cȝ��所有特性�?

hummer 2008-05-30 13:53 发表评论

prototype源码分析(�?)

hummer — Fri, 30 May 2008 05:52:00 GMT

Class - �c�d��?/h3>
Class�c�d��C��在JavaScript中声明一个新的类, �q��过构造函数实例化�q�个�cȝ��机制。通过使用Class.create()�Ҏ��, 你实际上声明了一个新的类, �q�定义了一�?span class="method">initialize()�Ҏ��作�ؓ构造函�? 一旦你在这个声明的�cȝ��prototype中实��C��改该�Ҏ��, 你就可以使用new操作�W�来创徏�q�实例化一个类�?

Knowledge Prepare - 知识准备

在JavaScript�? 当你定义了一个新的函�? 你实际上声明了一个新的类, 而这个函数本�w�就相当于类的构造函数�?下面的代码向你展�C�Z��两种不同的方式来创徏一个新�?span class="object">Person�c? �?span class="method">Person.prototype的定义也紧跟在函数定义之后�?

var Person = function(name) {  // 一个匿名函�? �q�将�q�个函数赋值给一�?span class="object">Person变量, 此时Person成�ؓ一个类
this.name = name;
}
function Person(name) {  // 直接定义一个叫�?span class="object">Person的函数表�C?span class="object">Person�c?/span>
this.name = name;
}
Person.prototype = {  // 定义Person的prototype�?/span>
printName: function() {   // 定义一个print函数
alert(this.name);
}
}

当你通过函数的方式声明了一个类之后, 你就可以通过new操作�W�来实例化这个类。这�? 你就可以调用�cȝ��成员函数来完成你的逻辑�?

var person = new Person("Joe Smith"); // 使用new操作�W�来新徏一�?span class="Object">Person的实�? �q�赋�l�变�?span class="method">person
person.printName(); // person���可以看作是一个实例的引用(reference), 所以可以通过�q�个引用来调�?span class="Object">Person�c�M��的成员函�?/span>

我们来�ȝ��一下创��Z��个新的类的实例的整个��程和步骤：

1. 通过定义一个函数的方式(匿名或者实�?来声明一个新的类.
2. 如果有必�? 定义�q�个新的�cȝ��prototype�?
3. 使用new操作�W�紧跟你所定义的函数来创徏一个新的类的实�? 一旦JavaScript�~�译器碰��C��new操作�W? 它实际上创徏了一个空的类实例变量.
4. ��所有这个类的prototype域中的属性与�Ҏ��复制到这个新的实例中, �q�将其成员函��C��所有的this指针指向�q�个新创建的实例.
5. 接下�? 执行紧跟�?span class="method">new操作�W�后面的那个函数.
6. 当你执行�q�个函数�? 如果你试囑֯�一个不存在的属性进行赋�? JavaScript�~�译器将自动��Z��在这个实例范围内新创��个属�?
7. 函数执行完毕�? ��这个初始化完成的实例返�?

在Prototype�? 使用Class对象, 你可以以一个比较简单的方式来声明一个新的对象。通过使用Class.create(), prototype��Z��创徏了一个默认的构造函数initialize(), 一旦你实现�q�一函数, ��可以以一个类似Java中构造函数的方式来创��Z��个新的类的实例�?

Source View - 源码解析

var Class = {  // 全局静态类, 用于声明一个新的类�q�提供构造函数支�?/span>
create: function() {
return function() { // �q�回一个函�? 代表着�q�个新声明的�cȝ��构造函�?/span>
// 一个命名�ؓinitialize的函数将被这个类实现作�ؓ�cȝ��构造函�?/span>
this.initialize.apply(this, arguments);// initialize函数���在你实例化一个变量的时候被调用执行(即上�?个步骤中的第5�?
}
}
}

Field & Function Reference - 属性方法一�?/h4>

Class ( 静�?)

Method / Property	Kind	Arguments	Description
create()	静态方�?/td>	/	用于声明一个新的类�q�提供了一个名为initialize构造函数支�?/td>

Analysis & Usage - 分析与��?/h4>

通过Class�c? 你可以很�Ҏ��C��用构造函数的方式创徏一个新的类, �q�对于Java�E�序员来说或许更加容易被接受。下面我们列��Z��Java和JavaScript各自声明和创��Z��个新的类的代码对�? 我们可以看到, 他们是如此相��|��

var Person = Class.create(); // �cȝ��声明              |public class Person { // �cȝ��声明
Person.prototype = {                                 |    private String name;
initialize: function(name) {  // 构造函�?/span>          |    public Person(String name){ // 构造函�?/span>
this.name = name;                               |       this.name = name;
}                                                 |    }
printName: function() {  // 成员函数               |    public void printName(){  // 成员函数
alert(this.name);                               |       System.out.println(name);
}                                                 |    }
}                                                    |}
var person = new Person("Joe Smith");// 创徏实例      |Person person = new Person("Joe Smith");// 创徏实例
person.printName(); // 函数调用                       |person.printName(); // 函数调用

hummer 2008-05-30 13:52 发表评论

prototype源码分析(�?)

hummer — Fri, 30 May 2008 05:51:00 GMT

Basic - 基础代码

在开始所有的Prototype学习之旅之前�Q�我们首先对Prototype中最常用的一些公用函数做一些研�IӞ��q�些JavaScript函数��诏�I�整�?span class="Object">Prototype框架�Q�熟�l��用它们不仅有助于我们学习Prototype框架�Q�同时也为我们自��q��写JavaScript应用提供了独特的思�\�?

Source View - 源码解析

var Prototype = {     // 定义一�?span class="Object">Prototype对象�Q�封装了一些简单的静态函数和变量
Version: '1.5.0_rc1',     // 定义当前Prototype框架的版本号
ScriptFragment: '(?:
)((\n|\r|.)*?)(?:<\/script>)',   // �q�回一个正则表辑ּ��Q�判断是否�ؓScript�?/span>
emptyFunction: function() {},    // �q�回一个空的函�? 该函��C��么都不做, 在编写一些复杂流�E�中会��用此功能
K: function(x) {return x}     // �q�回参数本��n, 在编写一些复杂流�E�中会��用此功能
}
/*****************************************************************************************************************/
function $() {   // 一个根据id��d��对象的快捷函�? �Ҏ��id�q�回所对应的对�?/span>
var results = [], element;
for (var i = 0; i < arguments.length; i++) { // 可以接受多个参数, �q�回由每个id所对应的对象构成的数组
element = arguments[i];
if (typeof element == 'string')    // 可以接受非string参数�Q�直接返回对象本�w?/span>
element = document.getElementById(element);  // 通过DOM操作��d��对象
results.push(Element.extend(element)); // 参见Element.extend的解�? �����回的对象��d��了一些额外特性，�q�压入到�l�果数组�?/span>
}
return results.reduce(); // �Ҏ��参数的个数返回对象或者对象数�l?/span>
}
/*****************************************************************************************************************/
var Abstract = new Object();  // 定义了一个全局的对�? 可以理解��Z��个命名空�? 成�ؓ一个抽象基�c?/span>
/*****************************************************************************************************************/
var Try = {
these: function() {  // 一个静态的函数, 接受多个函数作�ؓ参数, 依次执行�q�返回第一个成功执行的函数的结�?/span>
var returnValue;
for (var i = 0; i < arguments.length; i++) {
var lambda = arguments[i];   // 每个参数都是一个将被执行的函数
try {
returnValue = lambda();    // 执行函数�q�记录返回�?/span>
break;                     // �W�一�ơ成功执行后, 即退�?/span>
} catch (e) {}   // 捕获每个函数执行�q�程中的异常
}
return returnValue;
}
}
/*****************************************************************************************************************/
var PeriodicalExecuter = Class.create();  // 定义一个定时器, 重复执行某一函数
PeriodicalExecuter.prototype = {
initialize: function(callback, frequency) {  // 构造函�? 定义需要重复执行的函数和执行周�?/span>
this.callback = callback;      // 需要重复执行的函数
this.frequency = frequency;    // 重复执行的周�? 单位是秒
this.currentlyExecuting = false;   // 是否当前执行标志
this.registerCallback();    // 调用重复执行的函�?/span>
},
registerCallback: function() { // 调用window.setInterval函数完成重复执行, �q�回一个标志留作被stop函数调用, 以停止定时器
// �W�一个参数��y妙地使用�?span class="method">bind�Ҏ��, ��?span class="Object">this作�ؓbind的参�? �q�样onTimeEvent�Ҏ��内部可以通过this获取当前对象的引�?/span>
this.timer = setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
},
stop: function() {
if (!this.timer) return;   // 通过setInterval函数的返回值来判断是否当前执行
clearInterval(this.timer);   // 当前执行�? 调用clearInterval�Ҏ��来中止当前的执行
this.timer = null;    // ���当前执行的标志讄����?span class="Object">null
},
onTimerEvent: function() {
if (!this.currentlyExecuting) {  // 判断是否当前执行, 否则跌���, 相当于一个同步信号量
try {
this.currentlyExecuting = true;  // 讄���是否当前执行的标�?/span>
this.callback(this);   // 调用callback完成真正的函数执�?/span>
} finally {
this.currentlyExecuting = false;  // 无论是否成功执行, 最�l�设�|�当前执行标志�ؓfalse
}
}
}
}

Field & Function Reference - 属性方法一�?/h4>

Prototype ( 静�?)

Method / Property	Kind	Arguments	Description
Version	静态属�?/td>	/	表示Prototype框架的版本号
ScriptFragment	静态属�?/td>	/	表示script代码�D늚�正则表达�?/td>
emptyFunction	静态方�?/td>	/	�q�回一个什么都不做的空函数
K	静态方�?/td>	��L��对象	�q�回传入的参�?/td>

$() ( 静�?)

Method / Property	Kind	Arguments	Description
$()	静态方�?/td>	string或者�Q意对�? 参数数量不限	�Ҏ��参数的类型和数量�q�回DOM操作的结�? 传入的参��Cؓstring�Ӟ��q�回document.getElementById所��d��的对�? 传入的参��Cؓ非string�c�d��的对象时, 直接�q�回参数本��n; 当参��C��数是1个时, 直接�q�回上述操作所得的�l�果; 当参��C��数大�?个时, ��每个参数操作的�l�果�l�成一个对象数�l�返�?/td>

Abstract ( 静�?)

Method / Property	Kind	Arguments	Description
Abstract	�c?/td>	/	一个全局的对�? 可以理解��Z��个命名空�? 成�ؓ一个抽象基�c?/td>

Try ( 静�?)

Method / Property	Kind	Arguments	Description
these	静态方�?/td>	多个有待依次执行的函�?/td>	�q�回�W�一个成功执行的函数的执行结�?/td>

PeriodicalExecuter ( 实例 )

Method / Property	Kind	Arguments	Description
callback	属�?/td>	/	构造函数实例化时初始化的属�? 定义定时器重复执行时真正需要调用的函数
frequency	属�?Number)	/	构造函数实例化时初始化的属�? 定义定时器重复执行的旉��间隔
currentlyExecuting	属�?Boolean)	/	在整个定时器执行�q�程中表�C�是否当前执行的标志, 可以作�ؓ执行�q�程中的同步信号�?/td>
timer	属�?/td>	/	一个内部变�? 在registerCallback�Ҏ��调用window.setInterval时记录该函数的返回�? 用以�l�stop�Ҏ��使用
registerCallback	�Ҏ��	/	在构造函数初始化完成时调用执�? 也可以直接调用该函数启动定时�? 在函数内部通过调用window.setInterval�Ҏ��完成定时器功�?/td>
stop	�Ҏ��	this.timer, 即重复执行时调用setInterval的返回�?/td>	用于暂停定时�? 通过实例变量调用完成
onTimerEvent	�Ҏ��	/	一个内部方�? 真正调用callback完成函数执行

Analysis & Usage - 分析与��?/h4>

Extension - 扩展

$()为我们提供了一个快��L��方式�Q�通过id来读取一个对象，从而避免了我们在编写JavaScript代码时的重复而又冗长的代码段。然而，在某些情况下�Q�我们需要通过对象的name属性来��d��对象�Q��ƈ对对象进行一定的操作�Q�此�Ӟ��$()�Ҏ��显得有些力不从心了。因而在�q�里�Q�我针对�q�种需求，�q�模�?()�Ҏ��Q�实��C��一个通过name来读取对象的函数�?

事实上，getElementsByName()已经帮我们解决了大多数的问题。由于name在HTML的document中可以不唯一�Q�因而我们需要对此进行简单的处理�Q�当name唯一�Ӟ��直接�q�回单一对象�Q�当name不唯一�Ӟ��q�回一个数�l?�q�已�l�与getElementsByName()本��n的含义不同了�Q�当然这仅仅是�ؓ了方便编�E�而已)�?

hummer 2008-05-30 13:51 发表评论

prototype源码分析�q�接

hummer — Fri, 30 May 2008 05:48:00 GMT

http://www.demo2do.com/prototype/reference/zh-cn/Base.htm

http://p-x1984.javaeye.com/blog/196906

hummer 2008-05-30 13:48 发表评论

prototype.js开发笔�?�?

hummer — Thu, 29 May 2008 01:55:00 GMT

摘要: Table of Contents 1. Programming Guide 1.1. Prototype是什�? 1.2. 兌��文章 1.3. 通用性方�? 1.3.1. 使用 $()�Ҏ�� 1.3.2. 使用$F()�Ҏ�� 1.3.3. 使用$A()�Ҏ�� 1.3.4. 使用$H()�Ҏ�� 1.3.5. 使用$R()�Ҏ�� 1.3.6. 使用Try.these()�?.. 阅读全文

hummer 2008-05-29 09:55 发表评论

prototype.js的学习资�?�?

hummer — Thu, 29 May 2008 01:48:00 GMT

1.prototype.js的官方网�?br /> http://www.prototypejs.org/

2.prototype.js 官方api文档
http://prototypejs.org/api/

3.开始学习prototype.js
http://www.prototypejs.org/learn

4.prototype.js sample
http://prototype-window.xilinus.com/samples.html

5.prototype.js讨论�?br /> http://groups.google.com/group/Prototypejs/topics

6.precipitant的学习笔讎ͼ�貌似看到一�Q��ƈ没有扑ֈ�二？^_^
http://blog.csdn.net/precipitant/archive/2007/10/13/1823220.aspx

7.phphot写的prototype.js教程
http://blog.csdn.net/phphot/archive/2007/10/10/1818938.aspx

8.一个ajax的讨��?br /> http://bbs.okajax.com/forum-13-1.html

9.prototype.js开发应用手�?br /> http://bbs.blueidea.com/thread-2812502-1-1.html

10.一个ajax框架介绍的网�?br /> http://ajaxian.com/resources/

11.以下几个�|�站也是学习prototype.js的不错的�|�站,含有prototype.js中文教程
https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html
http://www.lvjiyong.com/item/jquery-with-prototype-using-ajax
http://591wap.cn/works/prototype/using_ajax_request.html

12.JAVA.NET上的prototype.js学习�W�记
https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html

13.prototype.js源文件以及中英文手册下蝲,��L��步这�?br /> prototype.js教程及prototype中文手册

hummer 2008-05-29 09:48 发表评论

Prototype�Q?.5 rc2)使用指南�Q�五�Q?�?

hummer — Thu, 29 May 2008 01:42:00 GMT

(十三).Prototype1.5 rc2�Q?/span>1.5 rc2)版指南最后一��之Position

Position�?/span>prototype中定义的一个对象，提供了操�?/span>DOM中与位置相关的方法，要很好的理解元素在页面中的位�|�，可以参考这��文章：Relatively Absolute

具体代码如下�Q�按照代码说��_��其中英文是作者的注释�Q�中文红色的才是偶的说明或翻译英文的注释�Q�采用顶式注释法(注释在要说明的代码的上面)说明

// set to true if needed, warning: firefox performance problems
// NOT neeeded for page scrolling, only if draggable contained in
// scrollable elements
//只有在��用拖动的时候元素包含在有滚动条的元素中才需要设�|��ؓtrue
includeScrollOffsets: false,

// must be called before calling withinIncludingScrolloffset, every time the
// page is scrolled
//当页面被scrolled后，使用withinIncludingScrolloffset的时候需要先调用�q�个�Ҏ��
prepare: function() {
    //横向滚动条滚动的距离
    this.deltaX = window.pageXOffset
                || document.documentElement.scrollLeft
                || document.body.scrollLeft
                || 0;
    //�U�向滚动条滚动的距离
    this.deltaY = window.pageYOffset
                || document.documentElement.scrollTop
                || document.body.scrollTop
                || 0;
},

//元素�׃��滚动条偏�Uȝ��总距��?/span>
realOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.scrollTop || 0;
      valueL += element.scrollLeft || 0;
      element = element.parentNode;
    } while (element);
    return [valueL, valueT];
},

//元素在页面中�?/span>offsetParent累积�?/span>offset�Q�当offsetParent都没有滚动条�Ӟ��是元素在页面中的位�|?/span>
cumulativeOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
    } while (element);
    return [valueL, valueT];
},

//元素相对�?/span>containing block("nearest positioned ancestor")的位�|�，也就是相对于最�q�的一�?/span>position讄��?/span>relative或�?/span>absolute的祖先节点的位置�Q�如果没有就是相对于 body的位�|�，�?/span>style.top�Q?/span>style.left一��P��
positionedOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
      if (element) {
        if(element.tagName==’BODY’) break;
        var p = Element.getStyle(element, 'position’);
        if (p == 'relative’ || p == 'absolute’) break;
      }
    } while (element);
    return [valueL, valueT];
},

//offsetParent
offsetParent: function(element) {
    if (element.offsetParent) return element.offsetParent;
    if (element == document.body) return element;

    while ((element = element.parentNode) && element != document.body)
      if (Element.getStyle(element, 'position’) != ’static’)
        return element;

    return document.body;
},

// caches x/y coordinate pair to use with overlap
//判断指定的位�|�是否在元素�?/span>
within: function(element, x, y) {
    if (this.includeScrollOffsets)
      return this.withinIncludingScrolloffsets(element, x, y);
    this.xcomp = x;
    this.ycomp = y;
    this.offset = this.cumulativeOffset(element);

    return (y >= this.offset[1] &&
            y < this.offset[1] + element.offsetHeight &&
            x >= this.offset[0] &&
            x < this.offset[0] + element.offsetWidth);
},

//�?/span>within差不多，不过考虑到滚动条�Q�也许是在元素上面，但不是直接在上面�Q�因为滚动条也许已经使元素不可见�?/span>
withinIncludingScrolloffsets: function(element, x, y) {
var offsetcache = this.realOffset(element);

    this.xcomp = x + offsetcache[0] - this.deltaX;
    this.ycomp = y + offsetcache[1] - this.deltaY;
    this.offset = this.cumulativeOffset(element);

    return (this.ycomp >= this.offset[1] &&
            this.ycomp < this.offset[1] + element.offsetHeight &&
            this.xcomp >= this.offset[0] &&
            this.xcomp < this.offset[0] + element.offsetWidth);
},

// within must be called directly before
//在调用这个方法前�Q�必��d��调用within�Q�返回在with指定的位�|�在水��^或者垂直方向上占用的百分比
overlap: function(mode, element) {
    if (!mode) return 0;
    if (mode == 'vertical’)
      return ((this.offset[1] + element.offsetHeight) - this.ycomp) /
        element.offsetHeight;
    if (mode == 'horizontal’)
      return ((this.offset[0] + element.offsetWidth) - this.xcomp) /
        element.offsetWidth;
},

//�q�回元素相对��面的真实位�|?/span>
page: function(forElement) {
var valueT = 0, valueL = 0;

    var element = forElement;
    do {
      valueT += element.offsetTop || 0;
      valueL += element.offsetLeft || 0;

      // Safari fix
      if (element.offsetParent==document.body)
        if (Element.getStyle(element,’position’)==’absolute’) break;

} while (element = element.offsetParent);

    element = forElement;
    do {
      if (!window.opera || element.tagName==’BODY’) {
        valueT -= element.scrollTop || 0;
        valueL -= element.scrollLeft || 0;
      }
    } while (element = element.parentNode);

return [valueL, valueT];
},

//讄��target�?/span>source的位�|�，大小
clone: function(source, target) {
    var options = Object.extend({
      setLeft:    true,
      setTop:     true,
      setWidth:   true,
      setHeight: true,
      offsetTop: 0,
      offsetLeft: 0
    }, arguments[2] || {})

    // find page position of source
    source = $(source);
    var p = Position.page(source);

    // find coordinate system to use
    target = $(target);
    var delta = [0, 0];
    var parent = null;
    // delta [0,0] will do fine with position: fixed elements,
    // position:absolute needs offsetParent deltas
    if (Element.getStyle(target,’position’) == 'absolute’) {
      parent = Position.offsetParent(target);
      delta = Position.page(parent);
    }

    // correct by body offsets (fixes Safari)
    if (parent == document.body) {
      delta[0] -= document.body.offsetLeft;
      delta[1] -= document.body.offsetTop;
    }

    // set position
    if(options.setLeft)   target.style.left = (p[0] - delta[0] + options.offsetLeft) + 'px’;
    if(options.setTop)    target.style.top   = (p[1] - delta[1] + options.offsetTop) + 'px’;
    if(options.setWidth) target.style.width = source.offsetWidth + 'px’;
    if(options.setHeight) target.style.height = source.offsetHeight + 'px’;
},

//��?/span>element�?/span>position讄��?/span>absolute的模�?/span>
absolutize: function(element) {
    element = $(element);
    if (element.style.position == 'absolute’) return;
    Position.prepare();

    var offsets = Position.positionedOffset(element);
    var top     = offsets[1];
    var left    = offsets[0];
    var width   = element.clientWidth;
    var height = element.clientHeight;

    element._originalLeft   = left - parseFloat(element.style.left || 0);
    element._originalTop    = top - parseFloat(element.style.top || 0);
    element._originalWidth = element.style.width;
    element._originalHeight = element.style.height;

    element.style.position = 'absolute’;
    element.style.top    = top + 'px’;;
    element.style.left   = left + 'px’;;
    element.style.width = width + 'px’;;
    element.style.height = height + 'px’;;
},

//��?/span>element�?/span>position讄��?/span>absolute的模�?/span>
relativize: function(element) {
    element = $(element);
    if (element.style.position == 'relative’) return;
    Position.prepare();

    element.style.position = 'relative’;
    var top = parseFloat(element.style.top || 0) - (element._originalTop || 0);
    var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0);

    element.style.top    = top + 'px’;
    element.style.left   = left + 'px’;
    element.style.height = element._originalHeight;
    element.style.width = element._originalWidth;
}
}

// Safari returns margins on body which is incorrect if the child is absolutely
// positioned. For performance reasons, redefine Position.cumulativeOffset for
// KHTML/WebKit only.
if (/Konqueror|Safari|KHTML/.test(navigator.userAgent)) {
Position.cumulativeOffset = function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop || 0;
      valueL += element.offsetLeft || 0;
      if (element.offsetParent == document.body)
        if (Element.getStyle(element, 'position’) == 'absolute’) break;

      element = element.offsetParent;
    } while (element);

    return [valueL, valueT];
}
}

�l�于�?/span>Prototype的所有部分都写完了，哈哈�Q�越来越佩服自己的耐力�?/span>

下一步决定写�?/span>Scriptaculous�q�个��񔋹�行的效果库

Prototype1.5的下载�ؓ什么不��单点

�q�几天在论坛和博客上看到很多人问Prototype1.5怎么下蝲�Q��ؓ什么下载这么困隑֑��Q?/span>
Prototype的官方网站是�Q?/span>http://prototype.conio.net/�Q�如果你一下子找不刎ͼ��?/span>google上搜�?/span>Prototype��找��C��
下蝲当然要到官方�|�站下蝲了，但是问题�?/span>Prototype官方�|�站更新太慢�Q�首��上的下载连接还�?/span>prototype1.4的，而且只是一个单独的js文�g
那么怎么下蝲最新版本的呢？
1�Q�如果你只想得到一个单独的js文�g使用的话�Q�其实官方网站提供了最新版1.5的下�?/span>, 下面�q�接��是下蝲地址�?/span>http://dev.rubyonrails.org/browser/trunk/railties/html/javascripts/prototype.js?format=raw
2�Q�如果你惛_��到详�l�的源文件以及测试代码，需要通过svn下蝲�Q��用下面的命��o��可以了�Q?/span>svn co http://dev.rubyonrails.org/svn/rails/spinoffs/prototype
如果你没�?/span>svn的话�Q�我已经下蝲打包了传�?/span>51js论坛中，查看下面�q�接的帖子中有下载的�Q?/span>http://bbs.51js.com/viewthread.php?tid=65070&highlight=prototype

惛_��很多prototype爱好者都一直在�{�待着prototype1.5的发布，虽然�{�待的时间很长，但是�q�一令�h�Ȁ动的一天终于到来了
因�ؓ�|�友提醒�Q�今天访�?/span>prototype�|�站�Q�发现原来的�|�址已经自动跌��{到新的网站去了，作者��用了一个独立的域名http://www.prototypejs.org/
刚才�?/span>google里搜�?/span>prototype�Q�发现搜索结果中出现的已�l�是新网站了�Q?/span>google爬虫也蛮勤快的嘛
更让人高兴的是，一向被��病的文档问题�q�一版有了非常大的提高，可以说是有了质的飞跃�Q�以前的版本基本上没有文档，要��用只有自��q��解了�Q?/font>
现在在它的官方网站上有专门的API参考以及一些��用的例子�Q�看来作者真正的关于�q�个问题来了�Q?/span>prototype爱好者应该高兴一把了哈哈�Q�赶快到prototype官方�|�站下蝲�?/span>Engoy�?/span>如果感觉阅读英文是一�U�折��的话，可以参考我以前写的prototype 1.5使用指南�p�d��文章.

�Q�－声明�Q�该使用指南文章��{载，�׃��是来源于多次转蝲�Q�未扑ֈ�原出处。再�ơ感谢作者与��译人员�?/font>

hummer 2008-05-29 09:42 发表评论

Prototype�Q?.5 rc2)使用指南�Q�四�Q?�?

hummer — Thu, 29 May 2008 01:41:00 GMT

(十一).Prototype�Q?/span>1.5 rc2)使用指南�?/span>form

�q�一部分提供了很多与表单操作有关的功能，包括以下部分�Q�当通过$�Ҏ��q�回元素�Ӟ��可以直接通过$(element).method()调用�Q?/span>

Form对象�Q�提供了操作整个表单的一些方�?/span>
Form.Element对象�Q�提供了操作某个表单元素的方�?/font>
TimedObserver�c�：周期性表单监视器�Q�当表单元素值改变的时候执行一个回调函敎ͼ��?/span>Form�?/span>Element两种�c�d��
EventObserver�c�：利用事�g来监视表单元素，当表单元素值改变的时候执行一个回调函敎ͼ��?/span>Form�?/span>Element两种�c�d��

Form对象�Q?/span>

reset(form)�Q?/span>form.reset()
serializeElements(elements)�Q�将elements中的元素序列化，��是�q�回指定的所有元素的queryString的�Ş式，便于�?/span>xmlhttp或其他地方��?/span>
serialize(form)�Q�序列化整个表单
getElements(form)�Q�返回表单的所有可序列化元�?/font>
getInputs(form, typeName, name)�Q�返回所有符�?/span>typeName�?/span>name�?/span>input元素
disable(form)�Q��整个表单处于不可用状�?/font>
enable(form) �Q�是整个表单可用
findFirstElement(form)�Q�返回类型�ؓ'input’, ’select’, 'textarea’的第一个可用的非隐藏元�?/span>
focusFirstElement(form)�Q��findFirstElement(form)�q�回的元素得到焦�?/span>

Form.Element对象�Q?/span>

focus(element) select(element)�Q?/span>html元素内置�Ҏ��的封装，除了�q�回元素本��n
serialize(element)�Q�序列化指定的表单元素，�q�回key=value的�Ş式，�q�回�?/span>string已经encodeURIComponent�?/span>
getValue(element)�Q�返回元素的�?/font>
clear(element)�Q�清除元素的�?/font>
present(element)�Q�判断元素的值是否非�I?/font>
activate(element)�Q��元素获得焦点
disable(element)�Q��元素不可�?/font>
enable(element)�Q�是元素可用

$F = Form.Element.getValue 方便使用

Form.Element.Observer以及Form.Observer�c�：

周期性监视表单元素，如果表单或表单元素的值有改变�Ӟ��执行执行一个回调函敎ͼ�使用方式如下�Q?/font>

var oser=new Form.Element.Observer(element, frequency, callback)
or oser=new Form.Observer(form, frequency, callback)
callback可以定义两个参数 form/element�?/span>Form.serialize()/value

Form.Element.EventObserver�?/span>Form.EventObserver�c�：

�q�两个类跟上面的差不多，只是不是周期性的监视�Q�而是利用元素�?/span>change�?/span>click事�g来监视表单元素的变化�Q�当发生变化时执�?/span>callback�Q�参数跟上面一�?/span>

(十二).Prototype�Q?/span>1.5 rc2)使用指南�?/span>event.js

在介�l?/span>Prototype�?/span>Event对象前先介绍一下浏览器中的事�g模型�Q�浏览器中的事�g主要�?/span>HTML事�g、鼠标事件和键盘事�g�Q�前两种事�g比较好理解，�q�里主要解释一下键盘事件以及它�?/span>IE�?/span>firefox中的区别

键盘事�g包括keydown�?/span>kepress�?/span>keyup三种�Q�每�ơ敲击键盘都�?/span>(依次�Q?/span>)触发�q�三�U�事�Ӟ��其中keydown�?/span>keyup是比较低�U�的接近于硬件的事�g�Q�通俗的理解是�q�两个事件可以捕获到你敲��M��键盘中某个键�Q��?/span>keypress是相对于字符层面的较为高�U�点的事�Ӟ��q�个事�g能够捕捉��C��键入了哪个字�W�。可以这��L��解，如果你敲��M��A键，keydown�?/span>keyup事�g只是知道你敲��M��A键，它�ƈ不知道你敲的是大写的A(你同时按下了Shift�?/span>)�q�是敲的是小�?/span>a�Q�它是以"�?/span>"为单位，你敲入了大写�?/span>A�Q�它只是当成你敲下了shift�?/span>A两个键而已�Q�但�?/span>keypress可以捕捉��C��是敲入的大写�?/span>A�q�是��写�?/span>a

�q�要理解一个概忉|��键盘中的键分为字�W?/span>(可打�?/span>)键和功能�?/span>(不可打印)�Q�功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 �{?/span>

下面说一下键盘事件的具体使用�Ҏ��Q?/font>

键盘事�g�?/span>event对象中包含一�?/span>keyCode属性，IE中只有这一个属性，当�ؓkeydown�?/span>keyup 事�g是，keycode属性表�C�Z��具体按下的键(也称�?/span>virtual keycode)�Q�当捕捉的是keypress事�g�?/span>keyCode属性指的是你键入的字符(character code)

�?/span>firefox中情冉|��些不同，event对象包含一�?/span>keyCode属性和一�?/span>charCode属性，keydown�?/span>keyup事�g的时候，keyCode表示的就是你具体按的键，charCode�?/span>0�Q�当捕捉的是keypress事�g�Ӟ��keyCode�?/span>0�Q?/span>charCode指的是你按下的字�W?/span>

当捕捉的�?/span>keypress事�g�Ӟ��当你按的是可打印字符�Ӟ��keyCode�?/span>0�Q?/span>charCode指的是你按下的字�W�的键��|��当你按的是不可打印字�W�时�Q?/span>keyCode为按下的键的键��|��charCode�?/span>0

注意�Q�功能键不会触发keypress事�g�Q�因�?/span>keypress对应的就是可打印的字�W�，但是有一�?/span>IE�?/span>FF 中的区别�Q�你按下一个字�W�键的同时按�?/span>alt键，�?/span>IE中不触发keypress事�g�Q�但是在ff中可触发�Q�我发现�?/span>IE中按�?/span>ctrl键的时候只有按�?/span> q键会触发事�g其他的要么不会触发事�Ӟ��要么被浏览器IE自��n捕获了，例如你按�?/span>ctrl_A�Q�全选某个东西，你按ctrl_S保存文�g�Q�但是在FF中就好多了，事�g都是先传递到�|�页�Q�再向外传�?/span>

鉴于IE�?/span>FF中的区别�Q�如果你比较懒的话，��只��?/span>keydow�?/span>keyup事�g�Q�这两种事�g的��用在IE�?/span>FF中基本上没有区别�Q�也不要捕获ctrl_A�{�被��览器定义�ؓ快捷键的事�g

键盘事�gevent对象�q�有三个其他的属�?/span>altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt�{�键�Q�这三个属性��用比较简单，三种事�g都可以��用，也不存在ie�?/span>ff的兼�Ҏ��问�?/span>

�?/span>Prototype中的Event中又如下属性：

KEY_BACKSPACE: 8,
KEY_TAB:       9,
KEY_RETURN:   13,
KEY_ESC:      27,
KEY_LEFT:     37,
KEY_UP:       38,
KEY_RIGHT:    39,
KEY_DOWN:     40,
KEY_DELETE:   46,
KEY_HOME:     36,
KEY_END:      35,
KEY_PAGEUP:   33,
KEY_PAGEDOWN: 34,

以及下面的方法：

element(event) �Q�返回触发事件的元素
isLeftClick(event) �Q�判断是否按下的左键
pointerX(event) �Q�事件触发时鼠标的横坐标�Q�对于非鼠标事�g�Q�在ff中没有此信息�Q�但�?/span>ie中有�Q?/span>
pointerY(event)�Q�事件触发时鼠标所在位�|�的�U�坐�?/font>
stop(event)�Q�阻止事件向上传播和��览器的默认处理�Ҏ��
findElement(event, tagName) �Q�找到触发事件的元素的所有祖先元素中�?/span>tagName�?/span>tagName的一个元�?/span>
observe(element, name, observer, useCapture)�Q�注册事件处理函�?/font>
stopObserving(element, name, observer, useCapture)�Q�撤销注册的事�?/font>

hummer 2008-05-29 09:41 发表评论

Prototype�Q?.5 rc2)使用指南�Q�三�Q?�?

hummer — Thu, 29 May 2008 01:40:00 GMT

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>dom.js

�q�部分提供了很多(写的都有点烦�?/span>)方便的操�?/span>dom的方法：包含有名�?/span>$�Ҏ��?/span>document.getElementsByClassName�Ҏ��Q�以�?/span>Element对象�?/span>Insertion对象

以下部分一个一个的详细介绍�Q?/font>

$(element)�Q?/span>getElementById的封装，element可以是一个元素的id或元素本�w�，也可以是一个数�l�，�q�时�q�回一个数�l�，使用$�Ҏ��Q�会自动调用Element.extend(element)�Ҏ��Q�这��L��话��元素可以直接调用 Element中的�Ҏ��, 例如Element.hide(element)可以写成�q�样$(element).hide()

document.getElementsByClassName(className, parentElement): �Ҏ��class选择元素

Element.extend(element): 扩展element�Q��element可以直接调用Element�?/span>Form.Element�?/span>Form中定义的�Ҏ��

Element对象的方法：

visible: function(element)�Q�判�?/span>element是否可见, 参数element可以是元素本�w�或元素id(下面的方面的参数基本上都是这��L��)

toggle: function(element)�Q�反�?/span>element的可见�?/span>

hide: function(element)�Q�隐藏元�?/span>

show: function(element)�Q�显�C�元�?/span>

remove: function(element)�Q�移除元�?/span>

update: function(element, html) �Q��?/span>html更新element的内容，html中的script会执�?/span>(下同)

replace: function(element, html)�Q�将element替换�?/span>html

inspect: function(element)�Q?/span>element的字�W�串表示

recursivelyCollect: function(element, property): 递归攉��, 例如Element.recursivelyCollect(element, "parentNode")�q�回element所有的��先节点, 注意只返�?/span>nodeType == 1的元素，也就是不�q�回文本元素

ancestors: function(element): �{�同于上面的例子�Q�返回元素的所有祖先节�?/span>

descendants: function(element): �q�回所有子孙节�?/span>

immediateDescendants: function(element)�Q�返回元素的直接的子孙节�?/span>(子节�?/span>)的数�l?/span>

previousSiblings: function(element)�Q�返回元素前面的兄弟节点

nextSiblings: function(element)�Q�返回位于元素后面的兄弟节点

siblings: function(element)�Q�返回元素所有的兄弟节点

match: function(element, selector)�Q��?/span>Selector�?/span>match�Ҏ��匚w��元素(Selector��在后面介绍), selector参数是一�?/span>css selector表达式或�?/span>Prototype中的一�?/span>Selector实例�Q�如�?/span>element匚w��selector则返�?/span>true�Q�否则返�?/span> false�Q�例如对于一�?/span>className�?/span>logcss�?/span>div来说�Q�下面的表达式返�?/span>true, $(element).match("div.logcss") 待箋。�?/span>

up(element, expression, index)�Q�利�?/span>Selector.findElement�Ҏ��扑ֈ�element元素的祖先节点中�W�合表达�?/span>expression的所有元素组成的数组索引�?/span>index的元素，也可以忽�?/span>expression(默认�?/span>*�Q�表�C�匹配所有元�?/span>)�?/span>index(默认�?/span>0)�Q�直接这栯��?/span>up(element, index)�?/span>up(element)

down(element, expression, index)�Q�跟up一��P��只是�q�回的是子孙节点

previous(element, expression, index)�Q�返回前面的兄弟节点

next(element, expression, index)�Q�返回后面的兄弟节点

getElementsBySelector(element,args)�Q?/span>Selector.findChildElements(element, args)的封装，args表示可以传递多个参敎ͼ�每个参数是一�?/span>css selector表达式，�q�回element的子孙节点中�W�合��M��一�?/span>css selector表达式的元素�l�成的数�l?/span>

getElementsByClassName(element, className)�Q�返�?/span>element中的子孙节点中符�?/span>clsssName的元�?/span>

readAttribute(element, name)�Q?/span>return $(element).getAttribute(name)�Q�之所以添加这个方法是因�ؓ�?/span>IE�?/span>Safari(Mac)�?/span>getAttribute不是一个真正的函数�Q�它没有call�?/span>apply�{�方法，所以在很多时候调用会出现错误(Prototype中很多地方��用了函数的这两个�Ҏ��)�Q�例如下面的例子(官方文档中的一个例�?/span>)�Q�就只能使用readAttribute�Q?/span>

$$(’div.widget’).invoke(’readAttribute’, 'widget_id’)

// ["7", "8", "9"]

getHeight: function(element)�Q�返回元素高度，return element.offsetHeight

classNames: function(element)�Q�返回一�?/span>Element.ClassNames对象�Q�改对象提供对元�?/span>class的操作，包括add�?/span>remove�?/span>set�{�，一般很��用，使用Element.addClassName�{�方法就可以�?/span>(��在下面)

hasClassName: function(element, className) �Q�判�?/span>element是否含有className

addClassName: function(element, className) �Q�给element��d��一�?/span>class

removeClassName: function(element, className) �Q�移除元素中的一�?/span>class

observe()�Q�调�?/span>Event对象(Prototype中的�Q�将在后面介�l?/span>)�?/span>observe�Ҏ��为元素注册事�?/span>handle

stopObserving() �Q�移除注册的事�ghandle

cleanWhitespace: function(element)�Q�移除元素中�I�白的文本子节点

empty: function(element)�Q�判断元素是否�ؓ�I?/span>

childOf: function(element, ancestor) �Q�判�?/span>element是否�?/span>ancestor的子孙节�?/span>

scrollTo: function(element) �Q�滚动条�U�d��到元素所在的地方

getStyle: function(element, style) �Q�得到元素某�?/span>css样式的��|��例如$(element).getStyle("float")

setStyle: function(element, style) �Q�设�|�元素的css样式�Q?/span>style十一个对象，例如element.setStyle({left: "40px", "background-color":"#666"})

getDimensions: function(element) �Q�得到元素的��寸�Q�即使元素是隐藏的也可以正确的返回，�q�回 return {width: originalWidth, height: originalHeight}�q�样的关联数�l?/span>

makePositioned: function(element) �Q�当元素�?/span>position css属性�ؓstatic或不存在使，��次属性更改�ؓrelative

undoPositioned: function(element) �Q�跟makePositioned相反的操�?/span>

makeClipping: function(element) �Q�把元素变成clipping(切片)�Q�也��是讄��元素�?/span>overflow属性�ؓhidden

undoClipping: function(element)�Q�反转上面的�Ҏ��对元素所做的修改

hasAttribute(element)�Q�判断元素是否有某个属�?/span>

Element对象的方法是不是不少啊，哈哈�Q�下面介�l�有�?/span>Insertion的四个类

Insertion.Before�Q�将内容插入到元素的前面�Q�内容在元素外面

Insertion.Top�Q�将内容插入到元素的�剙��Q�内容在元素里面

Insertion.Bottom�Q�将内容插入到元素的底部�Q�内容在元素里面

Insertion.After�Q�将内容插入到元素后面，内容在元素外�?/span>

使用它们的方法比较简单：new Insertion.where(element, content)�Q�其�?/span>where表示上面�?/span>Before�?/span>Top�{�，content�?/span>html字符�Ԍ��注意其中javascript片断会执�?/span>

�l�于写完了，Prototype�?/span>Element�Ҏ��q�真不少

虽然以前觉得自己�?/span>Prototype�q�比较熟悉，写的也有点篏�Q�但是发现自己收获仍然挺大的�Q��ؓ了写��些方法的具体作用和用法，必须��自己一行行的把Prototype的代码弄清楚�Q��自己�?/span>Prototype中很多精巧的写法有了更深�ȝ��认识和理�?/span>

写这个教�E�的主要目的是�ؓ了给大家一个快速的参考，大家�q�是对照着源代码看才会真正有所提高

�q�时我第一�ơ写比较完整的一个教�E�，错误�q�稚的地方在所隑օ��Q�希望大家批评指正，互相学习提高�Q?/font>

(�?/span>).Prototype使用指南�?/span>Selector

Selector是利�?/span>css selector来匹配选择��面元素的，所以要理解Selector首先应该�?/span>css selector有所理解�Q�下面是css2 selector的语法，当然很多��览器只是支持其中的一部分�Q?/span>Prototype 中的Selector主要支持tag选择器�?/span>class选择器和id选择器，�q�有属�?/span>(attribute)选择器，基本上包含我们��^时所用的所有类�?/span>

The following table summarizes CSS2 selector syntax, 详细的可以看http://www.w3.org/TR/REC-CSS2/selector.html:

Pattern	Meaning	Described in section
*	Matches any element.	Universal selector
E	Matches any E element (i.e., an element of type E).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E > F	Matches any F element that is a child of an element E.	Child selectors
E:first-child	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	Matches any F element immediately preceded by an element E.	Adjacent selectors
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).	Attribute selectors
E[foo=”warning”]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.	Attribute selectors
E[foo~=”warning”]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.	Attribute selectors
E[lang\|=”en”]	Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.	Attribute selectors
DIV.warning	HTML only. The same as DIV[class~=”warning”].	Class selectors
E#myid	Matches any E element ID equal to “myid”.	ID selectors

Selector中包�?/span>Selector对象和类�Q?/span>

Selector对象��h��下面两个�Ҏ��Q?/span>

match(element)�Q�元素是否与�?/span>selector匚w��Q�在Element中已�l�介�l�了
findElements(parentNode)�Q?/span>parentNode中所有匹配本selector的子孙元素列�?/span>

使用�Ҏ��也很��?/span> var s=new Selector(expression); s.match(element); s.findElements($(element))�Q�其�?/span>expression可以是如下方�?/span> "div"�?/span>"#id"�?/span>".class"�?/span>"div#id"�?/span>"div[attribute]"�?/span>"div[attribute=fff]"�?/span>"div[attribute!=sdf]"

其中Selector也有几个静态方法，它们分别是：

matchElements(elements, expression)�Q�返�?/span>elements中符�?/span>expression的元素列�?/span>
findElement(elements, expression, index)�Q�返�?/span>elements中符�?/span>expression的元素列表中索引�?/span>index的元�?/span>
findChildElements(element, expressions)�Q�找�?/span>element的子孙元素中�W�合expressions的元素列表，其中expressions是一�?/span>expression数组�Q�其中的expression支持"div li.#id"形式

$$�Ҏ��Q�只是简单的调用return Selector.findChildElements(document, $A(arguments))

虽然Selector有这么多�Ҏ��Q�但是大部分都是内部调用的，我们一般都很少使用�Q�因为我们有个一个方便的�Ҏ��$$�Q�对于绝大部分情况已�l��够了

hummer 2008-05-29 09:40 发表评论

hummer — Thu, 29 May 2008 01:37:00 GMT

(一).序言

在写�q�个指南之前�Q�先介绍一�?/span>Prototype主要是干吗的�Q�如果你比较��x��ajax/javascipt斚w��的应用，你应该早��听说过�q�个 javascript framework�?/span> Prototype是一个基��?/span>javascript应用框架�Q�先引用一�D�官方网站的介绍

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.

�Ҏ��作者自��q��介绍�Q?/span>Prototype的目的是��Z��更方便的开�?/span>javascript的应用，使用它可以更加方便简单的使用javascript�~�程�Q�开发出面向对象�?/span>javascript�E�序�Q?/span>Prototype中包含包含了一个功能强大好用的ajax框架�Q?/span>Prototype是一个基��性的框架�Q�很多更高层�ơ的框架都以它�ؓ基础�Q�例�?/span>scriptaculous效果�?/span>

Prototype中包含一下几个部分：

base: Prototype中应用的基本功能�Q�基本上其他所有部分都依赖于它�Q�包括用于面向对象风格的Class.create�?/span>Object.extend�Q�一�?/span>Try对象�Q�函数绑定，number扩展�Q?/span>PeriodicalExecuter(周期性执行某个函数的功能)�{?/span>

string: �?/span>String原型的扩展，�?/span>string��d��?/span>strip,escapeHTML�{�等好用的方�?/span>

enumerable: 枚�D�c�d��(array, hash, range�{?/span>)的父�c�d��象，提供枚�D�c�d��的共同方�?/span>

array: �?/span>Array原型的扩展，�?/span>array��d��?/span>indexOf�?/span>without�{�方�?/span>

hash: �?/span>javascript提供了一个好用简单的Hash实现

range: �l�承�?/span>enumerable�Q�一个范�?/span>(例如3�?/span>67)对象

ajax: 一个功能强大好用的ajax框架

dom: 对基于浏览器的开发提供了很好的跨��览器封装，�q�添加很多强大的功能

selector: 提供了��?/span>class�Q?/span>css�{�选择元素的功�?/span>

form: 关于表单的一些功�?/span>

event: ��单的夸��^��C��件封�?/span>

position: 提供了一些关于元素位�|�方面的功能

可以�?/span>Prototype��想一把瑞士军刀�Q��ؓjavascipt��装了很多通用的功能，大大��化了javascript应用的开发，�l?/span>javascript开发�h员增��M��很大的信心，Prototype可以�q�行于以下��^収ͼ�使用它再也不用各�U�跨�q�_��{�问题烦��g��

* 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

不过要注意的是：要想很好的理�?/span>Prototype�Q�应该首先理解一�?/span>javascript面向对象开发的一些知识以后的文章��对Prototype中具体的每个功能中的�Ҏ��做一个详�l�的介绍�Q�包括作用，实例�{?/span>Prototype官方�|�站是：http://prototype.conio.net/ �Q�目前发布版�q�只�?/span>1.4, 但是现在�?/span>1.5已经发生了很大的变化�Q�而且很多��Z��prototype的库使用的都�?/span>1.5的，所以强烈徏议通过svn下蝲最新版代码

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>base.js

base.js中包含下面的内容

�cȝ��创徏与��承：

Class.create(): 创徏一个类�Q�例�?/span> person=Class.create()

Object.extend(destination, source): �?/span>source中方法属�?/span>copy�?/span>destination(使用for property in source)�Q�需要注意的是，javascript中除了基本类�?/span>(Number, Boolean)外都是引用类型，所以这�U?/span>copy一般只�?/span>copy引用而已�Q?/span>destination�?/span>source�q�是指向同一个方法或对象属�?/span> (function array object)

在面向对象的�~�程中，一般通过Class.create新徏一个类�Q�如果这个类�l�承于另一个类�Q�一般��?/span>Object.extend (class.prototype, parentClass.prototype)或�?/span>Object.extend(class.prototype, aparentClassInstance)

Object构造函数的扩展�Q?/span>

Object是其他对象实例的构造函�?/span>(var a=new Object())�Q�也是所有其他类的父�c�，�?/span>Object直接扩展(注意不是扩展Object.prototype�Q�扩�?/span> Object.prototype相当于添加实例方�?/span>)相当于�ؓObject�c�L��加静态方�?/span>

Object.inspect(object): 调用object�?/span>inspect(如果定义�?/span>)�?/span>toString�Ҏ��Q�返回一个对象的字符串表�C?/span>

Object.keys(object): �q�回一个对象的所有属性和�Ҏ��名称�l�成的数�l?/span>, 例如Object.keys(document.body)

Object.values(object):�q�回一个对象的所有属性和�Ҏ��的值组成的数组, 例如Object.values(docuement)

Object.clone(object): �q�回一个对象的clone版本�Q�其实是执行Object.extent�Ҏ��?/span>object中的�Ҏ��属�?/span>copy��C��个新对象中，然后�q�回�q�个对象

函数邦定�Q?/font>

定义�?/span>Function对象的两个方法，bind�?/span>bindAsEventListener�Q�这两个�Ҏ��是一个函数的两个�Ҏ��Q�对�?/span>java�?/span>c#�E�序员来��_��看到�q�个也许感到很惊�Ӟ��因�ؓ在他们看来函数只是一个程序语句组�l�结构而已�?/span>>怎么�q�有�Ҏ��Q�而且�q�可以扩展？�q�也�?/span>javascript�{�脚本语�a�相对�?/span>java�{�一个非常强大的功能�Q�函��C��是一个对象，函数名就是这个对象的名称�Q�只要你愿意�Q�你也可以��?/span> new Function(…)来定义函敎ͼ�所以�ؓ函数定义�Ҏ��也就很正�怸��q�了

�q�两个函数的主要作用是�ؓ了解决��?/span>javascript面向对象风格�~�程�?/span>this的引用问题，�?/span>javasctipt�?/span>this关键字始�l�指向调用该函数的对象或者指向��?/span>call�Q?/span>apply�Ҏ��指定的对象（具体�q�方面的知识可以自己google一下，以下�p�d��?/span>prototype的介�l�也假设读者对javascript语言比较熟悉了，如果不熟悉可以找�?/span>javascript权威指南�q�本书看看）要理解这个问题首先要理解始终指向�q�个问题�Q�就�?/span>this�q�个关键字比较特�D�，不能把他当成一般的变量名看待，最常见的一个错误就是在�q�回函数的调用中使用this�Q�例�?/span>return function(){this.aMethod()}, 当你下次调用�q�个�q�回的匿名方法时�Q�这�?/span>this引用的内容又指向了调用这个函数的对象了，��C��的一点的this是个关键字，不是变量名，不会产生闭包

�?/span>Number的扩�?/span>(注意num也可以看成对象，其实是在使用的时候系�l�自动打包成Number对象)�Q?/span>

toColorPart�Q�把数字转换为可以用于表�C?/span>color�?/span>16�q�制��|��例如 7.toColorPart()=>"07"�Q?/span>28.toColorPart()=>"1C"

succ: �q�回num++, 但不改变num本��n的��|��其实��是 return this�Q?/span>1

times�Q�对�?/span>0到这个数字轮��调用一个函�?/span>, 例如function a(n){docuement.write(n)}, 10.times(a), ��显�C?/span>012345678910, 注意函数也是一个对象，而且与其他对象�ƈ没有实质的区�?/span>

Try对象�Q?/span> Try对象提供了一个很有趣的功�?/span>, 先看一下如下的代码�Q?/span>

var Ajax = {

getTransport: function() {

return Try.these(

function() {return new XMLHttpRequest()},

function() {return new ActiveXObject(’Msxml2.XMLHTTP’)},

function() {return new ActiveXObject(’Microsoft.XMLHTTP’)} )

|| false;

}

�?/font>

Try对象提供了一个方�?/span>these, �q�个�Ҏ��接受一个函数类型的参数列表�Q�然后轮��执行这些函敎ͼ�当其中一个函数没有��生错误时�Q�就停止执行�Q��ƈ且返回这个函数返回的��|��自己慢慢体会�?/span>

PeriodicalExecuter(周期性执行器)对象

�q�个对象是对setInterval�Ҏ��的简单封装，使用�Ҏ��如下

var a=new PeriodicalExecuter(callback, frequency ) �Q�其�?/span>callback指要执行的函数名 frequency�?/span>每次执行的时间间�?/span>

要停止的话，调用�q�个对象�?/span>stop�Ҏ��可以了 a.stop()

(�?/span>)Prototype�Q?/span>1.5 rc2)使用指南�?/span>string.js

下面介绍Prototype�?/span>String对象的扩展部分：

�q�部分主要�ؓstring对象��d��了几个很有用的方�?/span>:

strip(): ��L��字符串两边的�I�白, 例如" jj ".strip()�q�回"jj"

stripTags()�Q�去掉字�W�串中的html标签

stripScripts(): ��L��字符串中�?/span>javascript代码�D?/span>

extractScripts(): �q�回字符串中�?/span>javascript代码�Q�返回数�l?/span>

evalScripts(): 执行字符串中�?/span>javascript代码

escapeHTML()�Q�将字符串中�?/span>html代码转换为可以直接显�C�的格式, 例如��?/span>< 转化�?/span> < �Q�在ie6中有bug�Q�执行这个操作返回的字符�Ԍ��多个连在一��L��I�白变成了一个，所以很多换行什么的都被��L��?/span>

unescapeHTML(): escapeHTML的反向过�E?/span>

truncate(length, truncation): 截断�Q�例�?/span>"abcdefghigkl".truncate(10)�q�回abcdefg…, truncation默认�?/span>"…" toQueryParams(separator)/parseQuery(separator)�Q�将一�?/span>querystring转化��Z��?/span>hash表（其实是一个对象，�?/span>javascript中对象可以当�?/span>hash表来用，因�ؓ对象的属性或�Ҏ��可以通过object[propertyName]来访问）

toArray(): return this.split('’), 转化��Z��个字�W�数�l?/span>

camelize(): ��?/span>background-color的�Ş式�{化�ؓbackgroundColor形式�Q�用�?/span>style/css�?/span>

capitalize(): �q�回一个首字母大写的字�W�串

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

gsub(pattern, replacement)�Q?/span>pattern是一个正则表辑ּ��Q?/span>replacement是一个函�?/span>(或者是一�?/span>template字符�?/span>)�Q�对于字�W�串中每个匹�?/span>pattern的部分��?/span>replacement处理�Q�然后将 replacement�q�回的值将原来匚w��的部分替换掉�Q�例�?/span>"skdjfAsfdjkAdk".gsub(/A/,function(match) {return match[0].toLowerCase()}), ��字�W�串所有的A转化�?/span>a, 注意pattern中不要添�?/span>g选项�Q�因�?/span>gsub会递归的执�?/span>match�Ҏ��

sub(pattern, replacement, count) �Q?/span>gsub的另一�U��Ş式，不过可以讄��执行的次�?/span>

scan(pattern, iterator): �?/span>gsub差不多，但是�q�回的是字符串本�w�，也就是说对于pattern中的每个匚w��执行iterator�Q�但是不�q�回替换的字�W�串"skdjfAsfdjkAdk".gsub(/A/,function(){alert have a A’})

underscore(): 'borderBottomWidth’.underscore() -> 'border_bottom_width’

dasherize(): 'Hello_World’.dasherize() -> 'Hello-World’

Template模板�c�：

使用�Ҏ��Q?/font>

var template = new Template(replacement, pattern);

template.evaluate(object) 有点�?/span>php中的模板�Q�默�?/span>(没有提供pattern)��?/span>{propertyName}形式的东西替换了object的属性�?/span>

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>Enumerable.js

Enumerable是一个抽象对象（需要说明的是，javascript中�ƈ没有�cȝ��概念�Q�所指的�c�M��是一个函敎ͼ��l�承一般指的是一个对�?/span>(�?/span>)��它的方法属�?/span>copy(通过Object.extend, copy的是引用)到子�c?/span>(函数)�?/span>prototype属�?/span>(一个对�?/span>)中）

Enumerable不能直接使用�Q�它被很多枚丄��型（Hash�?/span>Array�?/span>Range�{�）所�l�承�Q��承的�c�d��都要实现一�?/span>_each�Ҏ��Q�提供具体类型的枚�D�Ҏ��

Enumerable为其他子�c�L��供了如下的方法：

each(iterator): iterator是一个函数对�?/span>, �q�个�Ҏ��调用具体�c�d��?/span>_each�Ҏ��对自�w�包含的每个对象调用iterator�Q�例如如�?/span>Enumerable具体指的是一�?/span>Array�Q?/span>eg: var a=[2,3,4], �?/span>a.each(iterator)�Ҏ��依�ơ调�?/span>iterator(2,0) ,iterator(3,1), iterator(4,3)�Q�其中第二个参数指的是烦引。这个方法几乎在Enumerable中的每个�Ҏ��中都要用�?/span>

eachSlice(number, iterator)�Q�将Enumerable �c�d��对象每个每个按照number分开�Q�例�?/span>[1,2,3,4,5].eachSlice(3)=>[[1,2,3],[4,5]], 没有提供iterator, �?/span>iterator=Prototype.K: function(k){return k}�Q?/span>Prototype中的很多iterator默认值都是这个，或者是Prototype.emptyFunction: function() {},其实实际上返回的�?/span>[iterator([1,2,3]),iterator([4,5])]

all(iterator): �?/span>Enumerable�c�d��中的每个��D��?/span>iterator�Q�如果其中有一个返�?/span>false�Q�则�q�回false�Q�否则返�?/span>true�Q�相当于判断是否每个值执�?/span>iterator都是"true"

any(iterator): �?/span>all相反�Q�判断是否每个值都�?/span>"false"�Q�是否有一个值是true�Q?/span>

collect(iterator)/map: �Ҏ��个��D��?/span>iterator�Q�将�l�果�l�成一个新的数�l�返�?/span>

detect(iterator)/find: �Ҏ��个��D��?/span>iterator�Q�如果有一个不�?/span>false�Q�则�q�回�q�个执行iterator后不�?/span>false的�?/span>(不是�q�回执行iterator后的�?/span>)�Q�相当于扑և��W�一个真�?/span>

findAll(iterator)/select: 相当�?/span>detect, 但是扑և�所有的真��|��q�回一个数�l?/span>

grep(pattern, iterator)�Q�返回所以符�?/span>pattern的��|��iterator提供的话�Q�则�q�回执行iterator的�?/span>

include(object)/member: 数组中是否包�?/span>object

inGroupsOf(number, fillWith): eachSlice的变异版本，按照number��对象分开�Q�如果分开后的数组的最后一个值的length��于number, 则用fillwith填充, 例如[1,2,3,4,5].inGroupsOf(3)=>[[1,2,3],[4,5,null]]

inject(memo, iterator): 注入

invoke(method): 调用

max(iterator): 最大�?/span>

min(iterator): 最��?/span>

partition(iterator): 分离

pluck(property): 采集

reject(iterator): 不合格的产品, �?/span>findAll相反

sortBy(iterator): �Ҏ��iterator排序�Q�如果调用的对象�?/span>Array的话�Q�直接调用内�|�的sort(iterator)��p��?/span>

toArray()/entries: ��调用对象的每个值组成一个数�l�返�?/span>

zip(): 例如[2,3,4].zip([5,6,7])=>[[2,5],[3,6],[4,7]], 如果最后一个参数类型�ؓfunction�Q�将�q�回[iterator([2,5]),iterator([3,6]),iterator([4,7])],

inspect(): Enumerable对象的字�W�串表示

hummer 2008-05-29 09:37 发表评论

Prototype�Q?.5 rc2)使用指南�Q�二�Q?(�?

hummer — Thu, 29 May 2008 01:36:00 GMT

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>array.js

$A = Array.from(iterable): ��?/span>iterable转化为数�l�，如果iterable定义�?/span>toArray�Ҏ��Q�就调用�q�个�Ҏ��Q�否则利�?/span>iterable�?/span>length属性进行枚�?/span>, 如果iterable没有length属性的话就�q�回�I�数�l?/span>[]

Array对象除了扩展Enumerable对象的方法外�Q�另外扩展了如下的几个方法，

注意以下�Ҏ��除了clear外都不改变原来数�l�，而是�q�回一个新数组�Q?/span>

clear(): 清除数组�Q�利�?/span>arr.length=0

first(): �q�回�W�一个元�?/span>

last()�Q�返回最后一个元�?/span>

compact(): 去除数组中��gؓnull�?/span>undefined的元�?/span>

flatten(): ��数�l�扁�q�_��Q�例�?/span>[3,4,[6,7]]变�ؓ[3,4,6,7]

without(): 去除指定的元�?/span>, 可以指定多个�?/span>, 例如[4,56,7,8].without(4,7) �q�回[56�Q?/span>8]

indexOf(object): �q�回指定的元素在数组中的索引�Q�不包含则返�?/span>-1

reverse(inline)�Q?/span>Array内置函数reverse的增强，�?/span>inline�?/span>true�Ӟ��跟内�|�的reverse函数效果一��P��改变原数�l�的��|��否则不改变原来的�?/span>

reduce(): 如果数组只有一个元素，则返回这个元素，否则�q�回数组本��n

uniq(): �q�回没有重复元素的数�l?/span>

clone(): �q�回一个跟数组相同的数�l�，Array中的toArray�Ҏ��覆盖�?/span>Enumerable中的toArray�Ҏ��Q�指向了�q�个�Ҏ��

inspect(): 跟数�l�的toString�Ҏ��c�M��Q�返回对象的字符串表�C�，例如[2,3].inspect() �q�回 "[2,3]"

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>hash.js

Hash对象(兌��数组)�?/span>Prototype新徏的一个对象，要创��Z��?/span>Hash对象可以调用$H(object)�Ҏ��Q��用这个方法将生成一个基�?/span> object对象�?/span>Hash对象�Q�生成的Hash对象��?/span>object的属性名作�ؓkey�Q�将object的属性值最为键��|��因�ؓjavascript本��n的特�?/span>(对象本��n��是兌��数组) �Q�所以实�?/span>Hash也很��单，Prototype中的Hash只是javascript的关联数�l?/span>(对象)而已

Prototype中的Hash对象�l�承�?/span>Enumerable对象�Q�所以也��h��Enumerable对象的所有属性和�Ҏ��Q�另外它��h��以下的方法：

keys(): �q�回hash的键值数�l?/span>

values(): �q�回值得数组

merge(hash): 合�ƈ两个hash

toQueryString(): �?/span>string�?/span>toQueryParams�Ҏ��x��Q�将hash转化��Z��?/span>querystring, 会调�?/span>encodeURIComponent寚w��和��D��行编�?/span>

inspect(): hash的字�W�串表示

因�ؓhash只是javascript的一个普通的对象而已�Q�所以添加一个键值对使用�Q?/span> hash[key]=value��可以了�Q�删除一个键值对使用 detele hash[key]��可以了

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>range.js

Range对象是一个��承自Enumerable�?/span>"范围"对象�Q�你可以把它看成[x,x+1,x+2,x+3……x+n]的数�l�看待，但是比这��L��数组更节省存储空��_��因�ؓrange对象只是保存x�?/span>x+n而已

要创��Z��?/span>Range对象调用$R(start, end, exclusive) 函数��可以了�Q?/span>exclusive指定是否包含end本��n�Q�如果没有指定或�?/span>false则包�?/span>end�Q�否则不包含,你可以利�?/span>Enumerable中定义的�Ҏ��来操�?/span>range对象�Q?/span>range对象只是实现�?/span>Enumerable对象需要的枚�D逻辑_each和覆盖了include�Ҏ��而已

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>ajax

Prototype中的ajax.js提供了一个非常好用的ajax框架�Q�一般应用中��单的调用以下代码��可以了

new Ajax.Request(

url, {method: “get”,

onSuccess: showFilter,

onFailure: function(request){alert(”Server error!”)},

onException: showError}

);

�q�个框架中提供了如下的对象和�Ҏ��{�：

Ajax对象�Q?/span>

只有一�?/span>getTransport�Ҏ��Q�返回一�?/span>XMLHttpRequest对象�Q�另外有一�?/span>activeRequestCount属性，反映当前正在处理�?/span>ajax数量

Ajax.Responders对象�Q?/span>

�l�承�?/span>Enumerable�Q�管理全局Ajax的请求，��h��如下�Ҏ��

unregister(responder)�Q�撤销一个管�?/span>ajax��h��的对�?/span>

dispatch(callback, request, transport, json)�Q�触发注册的处理对象的方�?/span>

�q�个对象一般很��用，�pȝ��中已�l��用如下的代码注册了一个处理对�?/font>

Ajax.Responders.register({

onCreate: function() {

Ajax.activeRequestCount++;

onComplete: function() {

Ajax.activeRequestCount–;

}

});

Ajax.Base�c�：

Ajax的基�c?/span>, 只有一个方�?/span>setOptions(options), 默认request参数如下�Q�你可以在新�?/span>Ajax.request时指定：

method: 'post’,

asynchronous: true,

contentType: 'application/x-www-form-urlencoded’,

encoding: 'UTF-8′,

Ajax.Request�c�：

ajax主要的类�Q��承自ajax.base�c�，客户端��?/span> new Ajax.Request(url,options) 调用�Q?/span>options是一个对�?/span>(兌��数组), �?/span>options中可以指�?/span>method�Q?/span>asynchronous�Q?/span>contentType�Q?/span>encoding�Q?/span>parameters�Q?/span> postBody�Q?/span>username,password�{�选项�Q�其�?/span>parameters可以是字�W�传或者关联数�l�象�Q?/span>

另外�?/span>options中还可以通过requestHeaders指定request heads�Q�其�?/span>requestHeaders可以是数�l?/span>(例如[”Connection”,”Close”,”aheadkey”,”aheadvalue”])或一个关联数�l�；

options中最重要的选项��是指定ajax的回调方法，可以定义onComplete, onSuccess, onFailure, onException(执行�q�程中发生异常调用的�Ҏ��Q�主要�ؓonComplete, onSuccess, onFailure�{�回调方法��生的)�Q�甚臛_��以定�?/span>on404,on503�q�样的回调方法，它们的参��Cؓ(transport, json),其中transport��求的XMLHttpRequest对象, json�?/span>evalJSON的结�?/span>

如果�q�回的是一�?/span>javascript文�g(�Ҏ��q�回�?/span>Content-type头判�?/span>)��会执行evalResponse�Ҏ��Q�另�?/span>Ajax.Request对象�q�有一�?/span>evalJSON�Ҏ��Q�取得文件的时候就会执�?/span>

�q�个对象的方法列表如下：

request(url) : 发送请求，new的时候就已经调用了，所以一般不需要��?/span>

success(): 判断request是否成功�?/span>

getHeader(name)�Q�根�?/span>name得到request head

evalJSON(): 执行getHeader(”X-JSON”),�q�返回结�?/span>

evalResponse(): 执行�q�回�?/span>responseText�q�返�?/span>

Ajax.Updater�c?/span>:

�l�承�?/span>Ajax.Request�Q�只是比Ajax.Request增加了更�?/span>html元素的功能，一般��用方法是new Ajax.Updater(element, url, options), element可以是一个元素，也可以是{success:e1,failure:e2}�q�种形式,

默认情况下不会执行返回结果中�?/span>javascript�Q�如果你先执行，你可以指�?/span>options中的evalScripts�?/span>true

默认情况下是替换指定元素的内容，如果你希望是��d��Q�可以指�?/span>options�?/span>insertion参数, insertion是一�?/span>Insertion.Before�?/span>Insertion.Top�?/span>Insertion.Bottom�?/span> Insertion.After(��在dom.js中介�l?/span>)

Ajax.PeriodicalUpdater�c?/span>:

�l�承�?/span>Ajax.Base�Q�周期性的更新一�?/span>html元素的内容，�q�个�c�M��调用Ajax.Updater�?/span>html元素�q�行周期性的更新�Q��用方法�ؓnew Ajax.PeriodicalUpdater(container, url, options), 参数�?/span>Ajax.Updater差不多，其中options可以讄��frequency(默认�?/span>2)�Q?/span>decay�Q?/span>decay指的是当��h��的内�Ҏ��有变化的时候，frequency需要�g长的倍数�Q�默认是1�Q�例如如�?/span>decay设�ؓ2�Q?/span>frequency设�ؓ3而内容一直没有变化，则请求的旉��依次会变�?/span> 3,6,12,24�{?/span>

start(): 开始更�?/span>, 初始化的时候会自动调用

stop(): 停止更新

hummer 2008-05-29 09:36 发表评论

国产亚洲美日韩AV中文字幕无码成人,亚洲av无码不卡私人影院,国产亚洲玖玖玖在线观看

prototype源码分析(�?)

Function - 对Function�cȝ��扩展

Knowledge Prepare - 知识准备

Source View - 源码解析

Field & Function Reference - 属性方法一�?/h4>

Function ( 实例 ) - 扩展

Analysis & Usage - 分析与���?/h4>

prototype源码分析(�?)

Object - 对Object�cȝ��扩展

Source View - 源码解析

Field & Function Reference - 属性方法一�?/h4>

Object ( 静�?) - 扩展

prototype源码分析(�?)

Knowledge Prepare - 知识准备

Source View - 源码解析

Field & Function Reference - 属性方法一�?/h4>

Class ( 静�?)

prototype源码分析(�?)

Basic - 基础代码

Source View - 源码解析

Field & Function Reference - 属性方法一�?/h4>

Prototype ( 静�?)

$() ( 静�?)

Abstract ( 静�?)

Try ( 静�?)

PeriodicalExecuter ( 实例 )

Analysis & Usage - 分析与���?/h4>

Extension - 扩展

prototype源码分析�q�接

prototype.js开发笔�?�?

prototype.js的学习资�?�?

Prototype�Q?.5 rc2)使用指南�Q�五�Q?�?

(十三).Prototype1.5 rc2�Q?/span>1.5 rc2)版指南最后一���之Position

Prototype�Q?.5 rc2)使用指南�Q�四�Q?�?

(十一).Prototype�Q?/span>1.5 rc2)使用指南�?/span>form

(十二).Prototype�Q?/span>1.5 rc2)使用指南�?/span>event.js

Prototype�Q?.5 rc2)使用指南�Q�三�Q?�?

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>dom.js

(�?/span>).Prototype使用指南�?/span>Selector

(一).序言

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>base.js

(�?/span>)Prototype�Q?/span>1.5 rc2)使用指南�?/span>string.js

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>Enumerable.js

Prototype�Q?.5 rc2)使用指南�Q�二�Q?(�?

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>array.js

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>hash.js

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>range.js

(�?/span>).Prototype�Q?/span>1.5 rc2)使用指南�?/span>ajax

Analysis & Usage - 分析与��?/h4>

Analysis & Usage - 分析与��?/h4>

(十三).Prototype1.5 rc2�Q?/span>1.5 rc2)版指南最后一��之Position