Basic - 基础代码

在开始所有的Prototype学习之旅之前，我们首先对Prototype中最常用的一些公用函数做一些研究，这些JavaScript函数将贯穿整个Prototype框架，熟练使用它们不仅有助于我们学习Prototype框架，同时也为我们自己编写JavaScript应用提供了独特的思路。

Source View - 源码解析

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

Field & Function Reference - 属性方法一览

Prototype ( 静态 )

$() ( 静态 )

Abstract ( 静态 )

Try ( 静态 )

PeriodicalExecuter ( 实例 )

Analysis & Usage - 分析与使用

Extension - 扩展

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

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