property.js

***********************************************
property.js实例详解(一)
***********************************************
/**
 * @author zengaihui
 */
/*  Prototype JavaScript framework, version 1.4.0
 *  (c) 2005 Sam Stephenson <sam@conio.net>
 *
 *  Prototype is freely distributable under the terms of an MIT-style license.
 *  For details, see the Prototype web site: http://prototype.conio.net/
 *
/*--------------------------------------------------------------------------*/ 

var Prototype = {
  //仅仅是个版本号. 也许可以用来给你的编码适应版本之间的差异
  Version: '1.4.0', 
  
  //用来匹配script脚本的正则表达式,后面的String.stripScripts和String.extractScripts会用到
  ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)', 

  //创建一个空函数,空函数可以用于:在回调函数没有设置的情况下,调用空函数这样程序就不会出错., Ajax.Request里用到很多
  emptyFunction: function() {}, 

  //返回函数参数自身的函数,在有些情况下,如果没有函数体,你就没把参数传出来,比如叠代的时候. 参考xxx.each(iterator)的代码
  K: function(x) {return x}
} 

//类创建函数. 
// 一个
//  var TheClass = Class.create()
//  TheClass.prototype = {
//   initialize: function() {
//    初始化方法
//   }
//  }
// 就类似于传统的 
//  function TheClass(args) {
//    初始化方法
//  }; 
var Class = {
  create: function() {
    return function() {
      //运行Class对应对象(this)的initialize()方法,并带入arguments参数.
      this.initialize.apply(this, arguments);   
      //知识点: Javascript原生方法 apply和call 
      //JavaScript为函数对象定义了两个方法：apply和call，
      //它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数的方式有所区别：
      // Function.prototype.apply(thisArg,argArray);
      // Function.prototype.call(thisArg[,arg1[,arg2…]]);
    }
  }
} 

// Javascript没有传统oo语言中对抽象类的严格定义.因此Sam特别约定了一个叫Abstract的类.
// 他试图约定: 凡是在Abstract中定义的类都是抽象类.
var Abstract = new Object(); 

// Javascript没有类的感念, 当然也就没有严格的类继承的概念.因此,Sam采用"扩展"的方式,来实现
// 子类(子对象)对父类(父对象)方法和属性的继承.
// destination是子类, source是父类
Object.extend = function(destination, source) { 

  //遍历类对象source的所有属性
  //知识点: in操作符 ????????????? //TODO
  for (property in source) {
    //将父类对象全部赋予子类
    //知识点: "全都是数组"
    // 你过去在Javascript中用过obj[property]这样的方式访问过类的属性(方法)吗?
    // 这是你应该已经隐约感觉到数组在javascript中的重要地位了吧? 
    // javascript语言的整个内部文法文档结构全部都是用key=value和Array组成的,也就是用JSON
    //知识点: JSON
    // 参看 http://www.json.org/; 只需要10分钟就明白
    destination[property] = source[property];
  }
  return destination;
} 

// 返回object的可读化的信息, 如果object没有实现inspect方法,那么就返回toString().
// Object.inspect可以用于调试,比如:alert(Object.inspect(obj))能够看到更清晰的对象内的信息.
// 你以前是不是用alert(obj)?
// 当然,Object.inspect还可以用于其它的用途.
Object.inspect = function(object) {
  try {
    if (object == undefined) return 'undefined';
    if (object == null) return 'null';
    return object.inspect ? object.inspect() : object.toString();
  } catch (e) {
    if (e instanceof RangeError) return '';
    throw e;
  }
} 

// 返回一个函数在arguments所指对象中的方法函数
Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();  // arguments的第一个代表对象
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
} 


Function.prototype.bindAsEventListener = function(object) {
  var __method = this;
  return function(event) {
    return __method.call(object, event || window.event);
  }
} 


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

  succ: function() {
    return this + 1;
  }, 

  times: function(iterator) {
    $R(0, this, true).each(iterator);
    return this;
  }
}); 


//顺序的执行参数数组中对应的方法直到其中的一个成功执行，返回成功执行的那个方法的返回值
Try.these(fs);
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() {
    setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
  }, 

  onTimerEvent: function() {
    if (!this.currentlyExecuting) {
      try {
        this.currentlyExecuting = true;
        this.callback();
      } finally {
        this.currentlyExecuting = false;
      }
    }
  }
}


--------------------------------------------------------------------------------
小艺,2007-11-20 10:40:23

 
********************************************** 
property.js实例详解(二) 
********************************************** 
/*--------------------------------------------------------------------------*/ 
function $() { 
  var elements = new Array(); 
  for (var i = 0; i < arguments.length; i++) { 
    var element = arguments; //***1 
    if (typeof element == 'string')  //如果参数是个string 那么element需要getElementById一下 
      element = document.getElementById(element); 
    //如果参数不是string,那么element就是argument本身,参见 ***1 
    
    if (arguments.length == 1) //如果是输入1个参数,那么将返回参数所对应的element 
      return element; 
    elements.push(element);  // 如果输入很多参数,那么将返回一个element数组 
  } 
  return elements; 
} 

//对String的扩展 
Object.extend(String.prototype, { 
 //返回一个把所有的HTML或XML标记都移除的字符串。 
  stripTags: function() { 
    return this.replace(/<\/?[^>]+>/gi, ''); 
  }, 
 //返回一个把所有的script都移除的字符串。 
  stripScripts: function() { 
    return this.replace(new RegExp(Prototype.ScriptFragment, 'img'), ''); 
  }, 
 //返回一个包含在string中找到的所有<script>的数组。 
  extractScripts: function() { 
    var matchAll = new RegExp(Prototype.ScriptFragment, 'img'); 
    var matchOne = new RegExp(Prototype.ScriptFragment, 'im'); 
    return (this.match(matchAll) || []).map(function(scriptTag) { 
      return (scriptTag.match(matchOne) || ['', ''])[1]; 
    }); 
  }, 
 //执行在string中找到的所有<script> 
  evalScripts: function() { 
    return this.extractScripts().map(eval); 
  }, 
 //返回一个把所有的HTML标记合适的转义掉的字符串。 
  escapeHTML: function() { 
    var div = document.createElement('div'); 
    var text = document.createTextNode(this); 
    div.appendChild(text); 
    return div.innerHTML; 
  }, 
 //与escapeHTML()相反 
  unescapeHTML: function() { 
    var div = document.createElement('div'); 
    div.innerHTML = this.stripTags(); 
    return div.childNodes[0] ? div.childNodes[0].nodeValue : ''; 
  }, 
 //把querystring分割成一个用parameter name做index的联合Array，更像一个hash。 
  toQueryParams: function() { 
    var pairs = this.match(/^\??(.*)$/)[1].split('&'); 
    return pairs.inject({}, function(params, pairString) { 
      var pair = pairString.split('='); 
      params[pair[0]] = pair[1]; 
      return params; 
    }); 
  }, 
 //把字符串转换成字符数组 
  toArray: function() { 
    return this.split(''); 
  }, 
 //转换一个连接的字符串成一个骆驼法样式的字符串。比如，这个函数在写代码时，把它做为一个样式工具使用是很有用的。 
  camelize: function() { 
   //把字符串按照-分割成字符串的数组 
    var oStringList = this.split('-'); 
 //如果数组只有一个元素则直接返回 
    if (oStringList.length == 1) return oStringList[0]; 
 //如果字符串中含有-，则将字符串数组第一个元素的第一个字符转换成大写 
    var camelizedString = this.indexOf('-') == 0 
      ? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1) 
      : oStringList[0]; 
 //将字符串数组中从第二个元素开始，每个元素的第一个字母转换成大写然后拼接成一个字符串，并返回 
    for (var i = 1, len = oStringList.length; i < len; i++) { 
      var s = oStringList; 
      camelizedString += s.charAt(0).toUpperCase() + s.substring(1); 
    } 
    return camelizedString; 
  }, 
  inspect: function() { 
    return "'" + this.replace('\\', '\\\\').replace("'", '\\\'') + "'"; 
  } 
}); 
String.prototype.parseQuery = String.prototype.toQueryParams; 
var $break    = new Object(); 
var $continue = new Object(); 
  
// 此对象主要是对可枚举的类型进行各类操作 
var Enumerable = { 
 //对象数组通过调用each方法执行遍历操作，_each方法通过循环来执行iterator(迭代器)， 
 //这里的Iterator是一个function(value,index)，value为被遍历数组对应的值，index为值所在的位置。 
 //在执行function(value,index)时;如遇异常则抛出($continue为实例化的一个对象，此处意在表明继续执行下一次操作) 
 //在执行_each遍历时如遇异常则抛出($braak为实例化的一个对象，此处意在表明退出循环，结束遍历) 
 //可用于在数组中执行遍历操作 
  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; 
    } 
  }, 
  
  //对象数组通过each遍历执行迭代器所对应的函数，每次对函数的返回值进行＂与＂操作，如有返回值false的， 
  //则抛出一个$break对象，退出遍历，否则返回true 
  //可用于检测对象数组中是否全部符合某种条件 
  all: function(iterator) { 
    var result = true; 
    this.each(function(value, index) { 
      result = result && !!(iterator || Prototype.K)(value, index); 
      if (!result) throw $break; 
    }); 
    return result; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，每次对函数返回值进行检查，只要碰到返回值为true 
 //则退出遍历，返回true 
 //可用于检测数组中是否存在符合某种条件的对象 
  any: function(iterator) { 
    var result = true; 
    this.each(function(value, index) { 
      if (result = !!(iterator || Prototype.K)(value, index)) 
        throw $break; 
    }); 
    return result; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，每次将函数返回值放进数组，最后将数组返回 
 //可用于收集对象数组执行迭代函数后的返回值 
  collect: function(iterator) { 
    var results = []; 
    this.each(function(value, index) { 
      results.push(iterator(value, index)); 
    }); 
    return results; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，只要碰到第一个函数返回值为true的，则退出遍历 
 //将数组所对应的值返回 
 //可用于在对象数组中找出第一个符合某种条件的值 
  detect: function (iterator) { 
    var result; 
    this.each(function(value, index) { 
      if (iterator(value, index)) { 
        result = value; 
        throw $break; 
      } 
    }); 
    return result; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，当函数返回值为true时，则将所对应的值存入数组， 
 //最后将该数组返回 
 //可用于在对象数组中检索出符合某种条件的结果数组 
  findAll: function(iterator) { 
    var results = []; 
    this.each(function(value, index) { 
      if (iterator(value, index)) 
        results.push(value); 
    }); 
    return results; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，首先将数组中的值转换成字符串，然后按照所设定 
 //的正则表达式进行匹配，如果匹配则自动对此元素执行iterator操作，并将执行的结果以集合的形式返回。 
 //可用于在字符串数组中检索出符合某种匹配条件的字符串集合 
  grep: function(pattern, iterator) { 
    var results = []; 
    this.each(function(value, index) { 
      var stringValue = value.toString(); 
      if (stringValue.match(pattern)) 
        results.push((iterator || Prototype.K)(value, index)); 
    }) 
    return results; 
  }, 
 //对象数组通过调用该方法进行遍历查询，判断对象内部是否包含与object相同的元素，如果存在则退出遍历， 
 //返回true 
 //可用于检测对象数组中是否包含给定的对象 
  include: function(object) { 
    var found = false; 
    this.each(function(value) { 
      if (value == object) { 
        found = true; 
        throw $break; 
      } 
    }); 
    return found; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，同时将函数返回值传递给注入元素memo进行每次的迭代操作 
 //可用于在对象数组中注入某种元素执行迭代操作，并以该元素的形式返回 
  inject: function(memo, iterator) { 
    this.each(function(value, index) { 
      memo = iterator(memo, value, index); 
    }); 
    return memo; 
  }, 
 //对象数组通过该方法将所需调用的方法名作为第１个参数传入，通过使用collect收集函数，将对象数组中自身的值和参数 
 //列表数组作为参数传入所需调用的方法中执行，将返回值集合返回 
 //可用于对对象数组中每一元素执行某种方法，并将调用该方法后的返回值已集合形式返回 
  invoke: function(method) { 
    var args = $A(arguments).slice(1); 
    return this.collect(function(value) { 
      return value[method].apply(value, args); 
    }); 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，将每次执行的返回值进行比较，从而将返回值中的最大值返回 
 //可用于找出对象数组执行迭代函数后所返回的最大值 
  max: function(iterator) { 
    var result; 
    this.each(function(value, index) { 
      value = (iterator || Prototype.K)(value, index); 
      if (value >= (result || value)) 
        result = value; 
    }); 
    return result; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，将每次执行的返回值进行比较，从而将返回值中的最小值返回 
 //可用于找出对象数组执行迭代函数后所返回的最小值 
  min: function(iterator) { 
    var result; 
    this.each(function(value, index) { 
      value = (iterator || Prototype.K)(value, index); 
      if (value <= (result || value)) 
        result = value; 
    }); 
    return result; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，将执行结果为true的值放入第一个元素数组中，执行结果为false 
 //的值放入第二个元素数组中，最后将两数组先后存入一个新数组，以二维数组形式返回，该方法相当于findAll方法和reject 
 //方法的集合 
 //可用于通过执行迭代函数把对象数组中的值分割成一个二维数组 
  partition: function(iterator) { 
    var trues = [], falses = []; 
    this.each(function(value, index) { 
      ((iterator || Prototype.K)(value, index) ? 
        trues : falses).push(value); 
    }); 
    return [trues, falses]; 
  }, 
 //对象数组通过遍历将每一元素对应的属性值property取出存入数组，并将该数组返回 
 //可用于取得对象数组中某一属性值的集合 
  pluck: function(property) { 
    var results = []; 
    this.each(function(value, index) { 
      results.push(value[property]); 
    }); 
    return results; 
  }, 
 //对象数组通过调用该方法进行遍历执行迭代器对应的函数，当函数返回值为false时，则将所对应的值存入数组， 
 //最后将该数组返回，该方法与findAll方法相反，相当于取partition方法的返回的false成员 
 //可用于在对象数组中检索出不符合某种条件的结果数组 
  reject: function(iterator) { 
    var results = []; 
    this.each(function(value, index) { 
      if (!iterator(value, index)) 
        results.push(value); 
    }); 
    return results; 
  }, 
 //根据迭代执行结果的大小顺序,返回元素集合,升序返回。 
  sortBy: function(iterator) { 
    return this.collect(function(value, index) { 
      return {value: value, criteria: iterator(value, index)}; 
    }).sort(function(left, right) { 
      var a = left.criteria, b = right.criteria; 
      return a < b ? -1 : a > b ? 1 : 0; 
    }).pluck('value'); 
  }, 
 //可用于把一个对象转换成一个数组 
  toArray: function() { 
    return this.collect(Prototype.K); 
  }, 
 //合并每个给出的集合到当前集合。合并操作返回一个新的array，这个array的元素个数和原集合的元素个数一样， 
 //这个array的每个元素又是一个子array,它合并了所有集合中相同index的元素。如果为iterator指定了函数， 
 //那么array的每个元素还会调用iterator函数先做处理 
  zip: function() { 
    var iterator = Prototype.K, args = $A(arguments); 
    if (typeof args.last() == 'function') 
      iterator = args.pop(); 
    var collections = [this].concat(args).map($A); 
    return this.map(function(value, index) { 
      iterator(value = collections.pluck(index)); 
      return value; 
    }); 
  }, 
  
 //检测对象内部状态,多用于调试使用，以数组形式返回 
  inspect: function() { 
    return '#<Enumerable:' + this.toArray().inspect() + '>'; 
  } 
} 

//以下为一些继承自Enumerable对象的方法 
Object.extend(Enumerable, { 
  map:     Enumerable.collect, 
  find:    Enumerable.detect, 
  select:  Enumerable.findAll, 
  member:  Enumerable.include, 
  entries: Enumerable.toArray 
}); 
//把任何可枚举的对象转换成一个普通数组 
var $A = Array.from = function(iterable) { 
  if (!iterable) return []; 
  if (iterable.toArray) { 
    return iterable.toArray(); 
  } else { 
    var results = []; 
    for (var i = 0; i < iterable.length; i++) 
      results.push(iterable); 
    return results; 
  } 
} 
Object.extend(Array.prototype, Enumerable); 
Array.prototype._reverse = Array.prototype.reverse; 
Object.extend(Array.prototype, { 
  _each: function(iterator) { 
    for (var i = 0; i < this.length; i++) 
      iterator(this); 
  }, 
 //清空对象数组 
  clear: function() { 
    this.length = 0; 
    return this; 
  }, 
 //返回对象数组的第一个元素 
  first: function() { 
    return this[0]; 
  }, 
 //返回对象数组的最后一个元素 
  last: function() { 
    return this[this.length - 1]; 
  }, 
 //返回对象数组的紧凑模式，将数组中的空值或未定义的值去除 
  compact: function() { 
    return this.select(function(value) { 
      return value != undefined || value != null; 
    }); 
  }, 
 //将一个多维的数组并成一维数组 
  flatten: function() { 
    return this.inject([], function(array, value) { 
      return array.concat(value.constructor == Array ? 
        value.flatten() : [value]); 
    }); 
  }, 
 //将对象数组中不包含所传入的值的那部分内容返回 
  without: function() { 
    var values = $A(arguments); 
    return this.select(function(value) { 
      return !values.include(value); 
    }); 
  }, 
 //返回查找对象在数组中第一次出现的索引位置,找不到返回-1; 
  indexOf: function(object) { 
    for (var i = 0; i < this.length; i++) 
      if (this == object) return i; 
    return -1; 
  }, 
 //返回元素顺序被反转的Array对象，inline为Boolean型变量，true时对数组有影响，false时不影响数组 
  reverse: function(inline) { 
    return (inline !== false ? this : this.toArray())._reverse(); 
  }, 


--------------------------------------------------------------------------------
小艺,2007-11-20 10:40:58

 **************************************** 
property.js实例详解(三) 
**************************************** 
 //数组向左边推移一位,将左边第一个位置的成员挤出去 
  shift: function() { 
    var result = this[0]; 
    for (var i = 0; i < this.length - 1; i++) 
      this = this[i + 1]; 
    this.length--; 
    return result; 
  }, 
 //将数组成员内容组织成一个字符串返回 
  inspect: function() { 
    return '[' + this.map(Object.inspect).join(', ') + ']'; 
  } 
}); 
var Hash = { 
  _each: function(iterator) { 
    for (key in this) { 
      var value = this[key]; 
      if (typeof value == 'function') continue; 
      var pair = [key, value]; 
      pair.key = key; 
      pair.value = value; 
      iterator(pair); 
    } 
  }, 
  keys: function() { 
    return this.pluck('key'); 
  }, 
  values: function() { 
    return this.pluck('value'); 
  }, 
  merge: function(hash) { 
    return $H(hash).inject($H(this), function(mergedHash, pair) { 
      mergedHash[pair.key] = pair.value; 
      return mergedHash; 
    }); 
  }, 
  toQueryString: function() { 
    return this.map(function(pair) { 
      return pair.map(encodeURIComponent).join('='); 
    }).join('&'); 
  }, 
  inspect: function() { 
    return '#<Hash:{' + this.map(function(pair) { 
      return pair.map(Object.inspect).join(': '); 
    }).join(', ') + '}>'; 
  } 
} 
function $H(object) { 
  var hash = Object.extend({}, object || {}); 
  Object.extend(hash, Enumerable); 
  Object.extend(hash, Hash); 
  return hash; 
} 
ObjectRange = Class.create(); 
Object.extend(ObjectRange.prototype, Enumerable); 
Object.extend(ObjectRange.prototype, { 
  initialize: function(start, end, exclusive) { 
    this.start = start; 
    this.end = end; 
    this.exclusive = exclusive; 
  }, 
  _each: function(iterator) { 
    var value = this.start; 
    do { 
      iterator(value); 
      value = value.succ(); 
    } while (this.include(value)); 
  }, 
  include: function(value) { 
    if (value < this.start) 
      return false; 
    if (this.exclusive) 
      return value < this.end; 
    return value <= this.end; 
  } 
}); 
var $R = function(start, end, exclusive) { 
  return new ObjectRange(start, end, exclusive); 
} 
var Ajax = { 
 //屏敝不同浏览器的差异性,取得一个可用的XMLHTTPRequest对象 
  getTransport: function() { 
    return Try.these( 
      function() {return new ActiveXObject('Msxml2.XMLHTTP')}, 
      function() {return new ActiveXObject('Microsoft.XMLHTTP')}, 
      function() {return new XMLHttpRequest()} 
    ) || false; 
  }, 
  activeRequestCount: 0 
} 
Ajax.Responders = { 
  responders: [], 
 //对象数组中遍历执行iterator对应的方法 
  _each: function(iterator) { 
    this.responders._each(iterator); 
  }, 
 //被传入参数的对象应包含名如Ajax事件的系列方法（如onCreate,onComplete,onException）。 
 //通讯事件引发所有被注册的对象的合适名称的函数被调用。 
  register: function(responderToAdd) { 
    if (!this.include(responderToAdd)) 
      this.responders.push(responderToAdd); 
  }, 
  unregister: function(responderToRemove) { 
    this.responders = this.responders.without(responderToRemove); 
  }, 
 //遍历被注册的对象列表，找出有由callback参数决定的那个函数的对象。然后向这些函数传递其它的三个参数， 
 //如果Ajax响应中包含一个含有JSON 内容的X-JSON HTTP头，那么它会被执行并传入json参数。 
 //如果事件是onException,那么transport参数会被异常代替，json不会传递。 
  dispatch: function(callback, request, transport, json) { 
    this.each(function(responder) { 
      if (responder[callback] && typeof responder[callback] == 'function') { 
        try { 
          responder[callback].apply(responder, [request, transport, json]); 
        } catch (e) {} 
      } 
    }); 
  } 
}; 
 //继承自Enumerable对象 
Object.extend(Ajax.Responders, Enumerable); 
Ajax.Responders.register({ 
  onCreate: function() { 
    Ajax.activeRequestCount++; 
  }, 
  onComplete: function() { 
    Ajax.activeRequestCount--; 
  } 
}); 
Ajax.Base = function() {}; 
Ajax.Base.prototype = { 
  setOptions: function(options) { 
    this.options = { 
      method:       'post', 
      asynchronous: true, 
      parameters:   '' 
    } 
    Object.extend(this.options, options || {}); 
  }, 
 //由当前请求的http状态码判断AJAX操作是否成功,返回true表示成功 
  responseIsSuccess: function() { 
    return this.transport.status == undefined 
        || this.transport.status == 0 
        || (this.transport.status >= 200 && this.transport.status < 300); 
  }, 
 //判断AJAX操作是否失败，与responseIsSuccess方法相反 
  responseIsFailure: function() { 
    return !this.responseIsSuccess(); 
  } 
} 
//创建Ajax.Request类 
Ajax.Request = Class.create(); 
//在AJAX操作中所有可能报告的事件/状态的列表 
Ajax.Request.Events = 
  ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; 
//继承自Ajax.Base对象， 
Ajax.Request.prototype = Object.extend(new Ajax.Base(), { 
  initialize: function(url, options) { 
 //类初始化，获取一个可用的XMLHTTPRequest对象 
    this.transport = Ajax.getTransport(); 
 //设定AJAX操作想要的选项,调用Ajax.Base对象中的方法 
    this.setOptions(options); 
 //根据传入的url参数，调用request()方法 
    this.request(url); 
  }, 
  request: function(url) { 
   //根据设定的操作选项，取出参数属性，拼接成url的参数字符串 
    var parameters = this.options.parameters || ''; 
    if (parameters.length > 0) parameters += '&_='; 
    try { 
      this.url = url; 
   //如果操作选项中设定为get方法，并且参数字符串长度大于0，则把参数字符串拼接在传入的url后，组成新的url 
      if (this.options.method == 'get' && parameters.length > 0) 
        this.url += (this.url.match(/\?/) ? '&' : '?') + parameters; 
      Ajax.Responders.dispatch('onCreate', this, this.transport); 
  //创建xmlHttpRequest请求，传入调用的方法，url，以及是否异步调用 
      this.transport.open(this.options.method, this.url, 
        this.options.asynchronous); 
  //如果是异步方式调用， 
      if (this.options.asynchronous) { 
        this.transport.onreadystatechange = this.onStateChange.bind(this); 
        setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10); 
      } 
  //配置在HTTP请求要发送的HTTP头 
      this.setRequestHeaders(); 
      var body = this.options.postBody ? this.options.postBody : parameters; 
      this.transport.send(this.options.method == 'post' ? body : null); 
    } catch (e) { 
      this.dispatchException(e); 
    } 
  }, 
  setRequestHeaders: function() { 
    var requestHeaders = 
      ['X-Requested-With', 'XMLHttpRequest', 
       'X-Prototype-Version', Prototype.Version]; 
    if (this.options.method == 'post') { 
      requestHeaders.push('Content-type', 
        'application/x-www-form-urlencoded'); 
      /* Force "Connection: close" for Mozilla browsers to work around 
       * a bug where XMLHttpReqeuest sends an incorrect Content-length 
       * header. See Mozilla Bugzilla #246651. 
       */ 
      if (this.transport.overrideMimeType) 
        requestHeaders.push('Connection', 'close'); 
    } 
    if (this.options.requestHeaders) 
      requestHeaders.push.apply(requestHeaders, this.options.requestHeaders); 
    for (var i = 0; i < requestHeaders.length; i += 2) 
      this.transport.setRequestHeader(requestHeaders, requestHeaders[i+1]); 
  }, 
 //异步调用当状态初始化后调用respondToReadyState()方法 
  onStateChange: function() { 
    var readyState = this.transport.readyState; 
    if (readyState != 1) 
      this.respondToReadyState(this.transport.readyState); 
  }, 
 //根据name取得XMLHttpRequest中指定的HTTP头 
  header: function(name) { 
    try { 
      return this.transport.getResponseHeader(name); 
    } catch (e) {} 
  }, 
 //该方法不会被外部调用;执行HTTP头中'X-JSON'对应的内容 
  evalJSON: function() { 
    try { 
      return eval(this.header('X-JSON')); 
    } catch (e) {} 
  }, 
 //该方法不会被外部调用,执行AJAX响应返回的文本字符串(javascript函数) 
  evalResponse: function() { 
    try { 
      return eval(this.transport.responseText); 
    } catch (e) { 
      this.dispatchException(e); 
    } 
  }, 
 //根据xmlHttpRequest请求的状态作出响应 
  respondToReadyState: function(readyState) { 
   //获取当前状态名 
    var event = Ajax.Request.Events[readyState]; 
  //获取当前的xmlHttpRequest对象，执行HTTP头中'X-JSON'对应的内容 
    var transport = this.transport, json = this.evalJSON(); 
  
  //数据接收完毕 
    if (event == 'Complete') { 
      try { 
        (this.options['on' + this.transport.status] 
         || this.options['on' + (this.responseIsSuccess() ? 'Success' : 'Failure')] 
         || Prototype.emptyFunction)(transport, json); 
      } catch (e) { 
        this.dispatchException(e); 
      } 
  
  //如果Ajax响应含有一个值为text/javascript的Cotent-Type头，那么这个方法就被调用执行响应体 
      if ((this.header('Content-type') || '').match(/^text\/javascript/i)) 
        this.evalResponse(); 
    } 
    try { 
      (this.options['on' + event] || Prototype.emptyFunction)(transport, json); 
      Ajax.Responders.dispatch('on' + event, this, transport, json); 
    } catch (e) { 
      this.dispatchException(e); 
    } 
    /* Avoid memory leak in MSIE: clean up the oncomplete event handler */ 
    if (event == 'Complete') 
      this.transport.onreadystatechange = Prototype.emptyFunction; 
  }, 
  dispatchException: function(exception) { 
    (this.options.onException || Prototype.emptyFunction)(this, exception); 
    Ajax.Responders.dispatch('onException', this, exception); 
  } 
}); 

--------------------------------------------------------------------------------
小艺,2007-11-20 10:41:29

 ********************************************** 
property.js实例详解(四) 
********************************************** 
//AjaxRequest的一个增强处理,实现Ajax请求响应后的HTML结果自动放到指定的container 
Ajax.Updater = Class.create(); 
//继承自Ajax.Updater.prototype, Ajax.Request.prototype类 
Object.extend(Object.extend(Ajax.Updater.prototype, Ajax.Request.prototype), { 
  initialize: function(container, url, options) { 
   //初始化容器对象 
    this.containers = { 
      success: container.success ? $(container.success) : $(container), 
      failure: container.failure ? $(container.failure) : 
        (container.success ? null : $(container)) 
    } 
 //获取一个xmlHttpRequest请求 
    this.transport = Ajax.getTransport(); 
 //设定AJAX操作想要的选项,调用Ajax.Base对象中的方法 
    this.setOptions(options); 
    var onComplete = this.options.onComplete || Prototype.emptyFunction; 
    this.options.onComplete = (function(transport, object) { 
      this.updateContent(); 
      onComplete(transport, object); 
    }).bind(this); 
    this.request(url); 
  }, 
  updateContent: function() { 
   //如果AJAX请求响应成功，则获取接收的容器对象 
    var receiver = this.responseIsSuccess() ? 
      this.containers.success : this.containers.failure; 
  
 //获取响应文本 
 var response = this.transport.responseText; 
 //如果选项中设定不执行脚本，则把响应文本中的脚本script去除 
    if (!this.options.evalScripts) 
      response = response.stripScripts(); 
 //如果接收对象存在 
    if (receiver) { 
      if (this.options.insertion) { 
   //判断是否允许将响应文本插入到对象中 
        new this.options.insertion(receiver, response); 
      } else { 
    //用响应的文本替换接收对象的innerHTML,如果文本中包含<script>，那么它们不会被包含进去，但是会执行。 
        Element.update(receiver, response); 
      } 
    } 
 //如果响应成功并且选项onComplete属性为true，则每隔10ms执行onComplete()方法 
    if (this.responseIsSuccess()) { 
      if (this.onComplete) 
        setTimeout(this.onComplete.bind(this), 10); 
    } 
  } 
}); 
//定时周期性的执行一个Ajax请求类 
Ajax.PeriodicalUpdater = Class.create(); 
Ajax.PeriodicalUpdater.prototype = Object.extend(new Ajax.Base(), { 
  initialize: function(container, url, options) { 
    this.setOptions(options); 
    this.onComplete = this.options.onComplete; 
    this.frequency = (this.options.frequency || 2); 
    this.decay = (this.options.decay || 1); 
    this.updater = {}; 
    this.container = container; 
    this.url = url; 
    this.start(); 
  }, 
  start: function() { 
    this.options.onComplete = this.updateComplete.bind(this); 
    this.onTimerEvent(); 
  }, 
  stop: function() { 
    this.updater.onComplete = undefined; 
    clearTimeout(this.timer); 
    (this.onComplete || Prototype.emptyFunction).apply(this, arguments); 
  }, 
  updateComplete: function(request) { 
    if (this.options.decay) { 
      this.decay = (request.responseText == this.lastText ? 
        this.decay * this.options.decay : 1); 
      this.lastText = request.responseText; 
    } 
    this.timer = setTimeout(this.onTimerEvent.bind(this), 
      this.decay * this.frequency * 1000); 
  }, 
  onTimerEvent: function() { 
    this.updater = new Ajax.Updater(this.container, this.url, this.options); 
  } 
}); 
document.getElementsByClassName = function(className, parentElement) { 
  var children = ($(parentElement) || document.body).getElementsByTagName('*'); 
  return $A(children).inject([], function(elements, child) { 
    if (child.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)"))) 
      elements.push(child); 
    return elements; 
  }); 
} 
/*--------------------------------------------------------------------------*/ 
if (!window.Element) { 
  var Element = new Object(); 
} 
Object.extend(Element, { 
 //返回对象是否可见的布尔值 
  visible: function(element) { 
    return $(element).style.display != 'none'; 
  }, 
 //切换传入的每一个元素的可视性 
  toggle: function() { 
    for (var i = 0; i < arguments.length; i++) { 
      var element = $(arguments); 
      Element[Element.visible(element) ? 'hide' : 'show'](element); 
    } 
  }, 
 //将传入的每一个元素隐藏 
  hide: function() { 
    for (var i = 0; i < arguments.length; i++) { 
      var element = $(arguments); 
      element.style.display = 'none'; 
    } 
  }, 
 //将传入的每一个元素显示 
  show: function() { 
    for (var i = 0; i < arguments.length; i++) { 
      var element = $(arguments); 
      element.style.display = ''; 
    } 
  }, 
 //将传入的元素从它的父节点中删除 
  remove: function(element) { 
    element = $(element); 
    element.parentNode.removeChild(element); 
  }, 
 //用给出的HTML参数替换对象的innerHTML,如果HTML参数中包含<script>，那么它们不会被包含进去，但是会执行。 
  update: function(element, html) { 
    $(element).innerHTML = html.stripScripts(); 
    setTimeout(function() {html.evalScripts()}, 10); 
  }, 
 //返回元素的offsetHeight属性值 
  getHeight: function(element) { 
    element = $(element); 
    return element.offsetHeight; 
  }, 
 //返回一个元素的css名称类对象 
  classNames: function(element) { 
    return new Element.ClassNames(element); 
  }, 
 //如果元素的css名称对象中有给定的css名，则返回true 
  hasClassName: function(element, className) { 
    if (!(element = $(element))) return; 
    return Element.classNames(element).include(className); 
  }, 
 //将给定的css名添加到元素的css名称对象数组中 
  addClassName: function(element, className) { 
    if (!(element = $(element))) return; 
    return Element.classNames(element).add(className); 
  }, 
 //从元素的css名称对象数组中删除给定的css名 
  removeClassName: function(element, className) { 
    if (!(element = $(element))) return; 
    return Element.classNames(element).remove(className); 
  }, 
  //清除对象子元素中所有空白的text node 
  cleanWhitespace: function(element) { 
    element = $(element); 
    for (var i = 0; i < element.childNodes.length; i++) { 
      var node = element.childNodes; 
      if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
        Element.remove(node); 
    } 
  },
--------------------------------------------------------------------------------
小艺,2007-11-20 10:41:44

 
*********************************************** 
property.js实例详解(五) 
*********************************************** 
 //返回一个布尔值指示对象为空或只有空白字符 
  empty: function(element) { 
    return $(element).innerHTML.match(/^\s*$/); 
  }, 
 //滚动window到对象的位置。 
  scrollTo: function(element) { 
    element = $(element); 
    var x = element.x ? element.x : element.offsetLeft, 
        y = element.y ? element.y : element.offsetTop; 
    window.scrollTo(x, y); 
  }, 
 //返回给定对象的CSS属性值或没有指定cssProperty时返回null。 
  getStyle: function(element, style) { 
    element = $(element); 
    var value = element.style[style.camelize()]; 
    if (!value) { 
      if (document.defaultView && document.defaultView.getComputedStyle) { 
        var css = document.defaultView.getComputedStyle(element, null); 
        value = css ? css.getPropertyValue(style) : null; 
      } else if (element.currentStyle) { 
        value = element.currentStyle[style.camelize()]; 
      } 
    } 
    if (window.opera && ['left', 'top', 'right', 'bottom'].include(style)) 
      if (Element.getStyle(element, 'position') == 'static') value = 'auto'; 
    return value == 'auto' ? null : value; 
  }, 
 //依照css PropertyHash参数给对象设置CSS属性值。 
  setStyle: function(element, style) { 
    element = $(element); 
    for (name in style) 
      element.style[name.camelize()] = style[name]; 
  }, 
 //返回对象的尺寸，返回值有两个属性，height和width。 
  getDimensions: function(element) { 
    element = $(element); 
    if (Element.getStyle(element, 'display') != 'none') 
      return {width: element.offsetWidth, height: element.offsetHeight}; 
    // All *Width and *Height properties give 0 on elements with display none, 
    // so enable the element temporarily 
    var els = element.style; 
    var originalVisibility = els.visibility; 
    var originalPosition = els.position; 
    els.visibility = 'hidden'; 
    els.position = 'absolute'; 
    els.display = ''; 
    var originalWidth = element.clientWidth; 
    var originalHeight = element.clientHeight; 
    els.display = 'none'; 
    els.position = originalPosition; 
    els.visibility = originalVisibility; 
    return {width: originalWidth, height: originalHeight}; 
  }, 
 //更改对象的style.position为'relative'。 
  makePositioned: function(element) { 
    element = $(element); 
    var pos = Element.getStyle(element, 'position'); 
    if (pos == 'static' || !pos) { 
      element._madePositioned = true; 
      element.style.position = 'relative'; 
      // Opera returns the offset relative to the positioning context, when an 
      // element is position relative but top and left have not been defined 
      if (window.opera) { 
        element.style.top = 0; 
        element.style.left = 0; 
      } 
    } 
  }, 
 //清除对象的 style.position 为 '' 
  undoPositioned: function(element) { 
    element = $(element); 
    if (element._madePositioned) { 
      element._madePositioned = undefined; 
      element.style.position = 
        element.style.top = 
        element.style.left = 
        element.style.bottom = 
        element.style.right = ''; 
    } 
  }, 
 //给设定内容溢出的元素，剪辑内容 
  makeClipping: function(element) { 
    element = $(element); 
    if (element._overflow) return; 
    element._overflow = element.style.overflow; 
    if ((Element.getStyle(element, 'overflow') || 'visible') != 'hidden') 
      element.style.overflow = 'hidden'; 
  }, 
 //style.overflow的值返回上一个设定值。 
  undoClipping: function(element) { 
    element = $(element); 
    if (element._overflow) return; 
    element.style.overflow = element._overflow; 
    element._overflow = undefined; 
  } 
}); 
var Toggle = new Object(); 
Toggle.display = Element.toggle; 
/*--------------------------------------------------------------------------*/ 
Abstract.Insertion = function(adjacency) { 
  this.adjacency = adjacency; 
} 
Abstract.Insertion.prototype = { 
  initialize: function(element, content) { 
    this.element = $(element); 
    this.content = content.stripScripts(); 
    if (this.adjacency && this.element.insertAdjacentHTML) { 
      try { 
        this.element.insertAdjacentHTML(this.adjacency, this.content); 
      } catch (e) { 
        if (this.element.tagName.toLowerCase() == 'tbody') { 
          this.insertContent(this.contentFromAnonymousTable()); 
        } else { 
          throw e; 
        } 
      } 
    } else { 
      this.range = this.element.ownerDocument.createRange(); 
      if (this.initializeRange) this.initializeRange(); 
      this.insertContent([this.range.createContextualFragment(this.content)]); 
    } 
    setTimeout(function() {content.evalScripts()}, 10); 
  }, 
  contentFromAnonymousTable: function() { 
    var div = document.createElement('div'); 
    div.innerHTML = '<table><tbody>' + this.content + '</tbody></table>'; 
    return $A(div.childNodes[0].childNodes[0].childNodes); 
  } 
} 
var Insertion = new Object(); 
Insertion.Before = Class.create(); 
Insertion.Before.prototype = Object.extend(new Abstract.Insertion('beforeBegin'), { 
  initializeRange: function() { 
    this.range.setStartBefore(this.element); 
  }, 
  insertContent: function(fragments) { 
    fragments.each((function(fragment) { 
      this.element.parentNode.insertBefore(fragment, this.element); 
    }).bind(this)); 
  } 
}); 
Insertion.Top = Class.create(); 
Insertion.Top.prototype = Object.extend(new Abstract.Insertion('afterBegin'), { 
  initializeRange: function() { 
    this.range.selectNodeContents(this.element); 
    this.range.collapse(true); 
  }, 
  insertContent: function(fragments) { 
    fragments.reverse(false).each((function(fragment) { 
      this.element.insertBefore(fragment, this.element.firstChild); 
    }).bind(this)); 
  } 
}); 
Insertion.Bottom = Class.create(); 
Insertion.Bottom.prototype = Object.extend(new Abstract.Insertion('beforeEnd'), { 
  initializeRange: function() { 
    this.range.selectNodeContents(this.element); 
    this.range.collapse(this.element); 
  }, 
  insertContent: function(fragments) { 
    fragments.each((function(fragment) { 
      this.element.appendChild(fragment); 
    }).bind(this)); 
  } 
}); 
Insertion.After = Class.create(); 
Insertion.After.prototype = Object.extend(new Abstract.Insertion('afterEnd'), { 
  initializeRange: function() { 
    this.range.setStartAfter(this.element); 
  }, 
  insertContent: function(fragments) { 
    fragments.each((function(fragment) { 
      this.element.parentNode.insertBefore(fragment, 
        this.element.nextSibling); 
    }).bind(this)); 
  } 
}); 
/*--------------------------------------------------------------------------*/ 
//元素css名称类 
Element.ClassNames = Class.create(); 
Element.ClassNames.prototype = { 
 //初始化，获得元素对象 
  initialize: function(element) { 
    this.element = $(element); 
  }, 
  _each: function(iterator) { 
    this.element.className.split(/\s+/).select(function(name) { 
      return name.length > 0; 
    })._each(iterator); 
  }, 
 //设定元素的css名 
  set: function(className) { 
    this.element.className = className; 
  }, 
 //把css名添加到对象的css名列表中 
  add: function(classNameToAdd) { 
    if (this.include(classNameToAdd)) return; 
    this.set(this.toArray().concat(classNameToAdd).join(' ')); 
  }, 
 //把css名从对象的css名列表中删除 
  remove: function(classNameToRemove) { 
    if (!this.include(classNameToRemove)) return; 
    this.set(this.select(function(className) { 
      return className != classNameToRemove; 
    }).join(' ')); 
  }, 
 //将数组转换成字符串 
  toString: function() { 
    return this.toArray().join(' '); 
  } 
} 
Object.extend(Element.ClassNames.prototype, Enumerable); 
//这个对象提供操作表单中的输入项目的功能性方法 
var Field = { 
 //清除传入表单中项目元素的值 
  clear: function() { 
    for (var i = 0; i < arguments.length; i++) 
      $(arguments).value = ''; 
  }, 
 //将焦点设到传入的元素上 
  focus: function(element) { 
    $(element).focus(); 
  }, 
 //当表单中所有元素的值都不为空时返回true 
  present: function() { 
    for (var i = 0; i < arguments.length; i++) 
      if ($(arguments).value == '') return false; 
    return true; 
  }, 
 //将当前选中区置为当前对象 
  select: function(element) { 
    $(element).select(); 
  }, 
 //激活元素 
  activate: function(element) { 
    element = $(element); 
    element.focus(); 
    if (element.select) 
      element.select(); 
  } 
} 
/*--------------------------------------------------------------------------*/ 
//表单辅助操作类 
var Form = { 
 //将表单中所有元素的名称和值以url参数形式返回 
  serialize: function(form) { 
    var elements = Form.getElements($(form)); 
    var queryComponents = new Array(); 
    for (var i = 0; i < elements.length; i++) { 
      var queryComponent = Form.Element.serialize(elements); 
      if (queryComponent) 
        queryComponents.push(queryComponent); 
    } 
    return queryComponents.join('&'); 
  }, 
 //获得一个表单的所有元素的对象数组 
  getElements: function(form) { 
    form = $(form); 
    var elements = new Array(); 
    for (tagName in Form.Element.Serializers) { 
      var tagElements = form.getElementsByTagName(tagName); 
      for (var j = 0; j < tagElements.length; j++) 
        elements.push(tagElements[j]); 
    } 
    return elements; 
  }, 
 //如果第2、3两个参数为空时，返回表单中所有的input元素，数组形式返回 
 //如果这两个参数有一个不为空，可以根据它从而过滤input元素，返回所需input元素的数组 
  getInputs: function(form, typeName, name) { 
    form = $(form); 
    var inputs = form.getElementsByTagName('input'); 
    if (!typeName && !name) 
      return inputs; 
    var matchingInputs = new Array(); 
    for (var i = 0; i < inputs.length; i++) { 
      var input = inputs; 
      if ((typeName && input.type != typeName) || 
          (name && input.name != name)) 
        continue; 
      matchingInputs.push(input); 
    } 
    return matchingInputs; 
  },
--------------------------------------------------------------------------------
小艺,2007-11-20 10:42:05

 *********************************************** 
property.js实例详解(六) 
*********************************************** 
 //使表单中所有元素失去焦点并无效 
  disable: function(form) { 
    var elements = Form.getElements(form); 
    for (var i = 0; i < elements.length; i++) { 
      var element = elements; 
      element.blur(); 
      element.disabled = 'true'; 
    } 
  }, 
 //与disable方法相反 
  enable: function(form) { 
    var elements = Form.getElements(form); 
    for (var i = 0; i < elements.length; i++) { 
      var element = elements; 
      element.disabled = ''; 
    } 
  }, 
 //返回表单中第一个有效的、可视的、可输入的元素,元素类型在('input', 'select', 'textarea')之中 
  findFirstElement: function(form) { 
    return Form.getElements(form).find(function(element) { 
      return element.type != 'hidden' && !element.disabled && 
        ['input', 'select', 'textarea'].include(element.tagName.toLowerCase()); 
    }); 
  }, 
 //将焦点设到findFirstElement()方法找出的元素上 
  focusFirstElement: function(form) { 
    Field.activate(Form.findFirstElement(form)); 
  }, 
 //重至表单 
  reset: function(form) { 
    $(form).reset(); 
  } 
} 
//操作表单元素的辅助类 
Form.Element = { 
 //返回元素的 名称=值 对，以&相连(如果值不是单一时，例如select多选等) 
  serialize: function(element) { 
    element = $(element); 
    var method = element.tagName.toLowerCase(); 
 //根据元素的类型取得元素名称和对应的值的数组，0下标对应名称，1下标对应值 
    var parameter = Form.Element.Serializers[method](element); 
    if (parameter) { 
  //取得元素的名称 
  //encodeURIComponent()将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件 
      var key = encodeURIComponent(parameter[0]); 
      if (key.length == 0) return; 
  //constructor 属性是所有具有 prototype 的对象的成员，保存了对构造特定对象实例的函数的引用 
  //如果元素值不是数组形式 
      if (parameter[1].constructor != Array) 
        parameter[1] = [parameter[1]]; 
  //map继承自Enumerable对象collect方法，将元素值的数组通过迭代，以'elementName=elementValue' 
  //的字符串形式返回一个新数组，最后通过join()方法，将该数组拼接成 
  //'elementName=elementValue1&elementName=elementValue2形式的字符串 
      return parameter[1].map(function(value) { 
        return key + '=' + encodeURIComponent(value); 
      }).join('&'); 
    } 
  }, 
 //获得元素的值 
  getValue: function(element) { 
    element = $(element); 
    var method = element.tagName.toLowerCase(); 
    var parameter = Form.Element.Serializers[method](element); 
    if (parameter) 
      return parameter[1]; 
  } 
} 
//这个对象提供了内部使用的用来协助解析出表单元素的当前值的一些有用的方法 
Form.Element.Serializers = { 
 //针对input元素类型，返回该元素的名称和对应的值，以数组形式返回 
  input: function(element) { 
    switch (element.type.toLowerCase()) { 
      case 'submit': 
      case 'hidden': 
      case 'password': 
      case 'text': 
        return Form.Element.Serializers.textarea(element); 
      case 'checkbox': 
      case 'radio': 
        return Form.Element.Serializers.inputSelector(element); 
    } 
    return false; 
  }, 
 //针对checkbox和radio元素，如果checked属性为true则返回带有元素名称和值的数组 
  inputSelector: function(element) { 
    if (element.checked) 
      return [element.name, element.value]; 
  }, 
 //针对文本输入类的元素，返回带有元素名称和值的数组 
  textarea: function(element) { 
    return [element.name, element.value]; 
  }, 
 //针对select元素单选或者多选时取得该元素的名称和值，以数组形式返回 
  select: function(element) { 
    return Form.Element.Serializers[element.type == 'select-one' ? 
      'selectOne' : 'selectMany'](element); 
  }, 
 //针对select元素单选，返回元素的名称，和所选的值(如果值为空则取选项的文本)的数组 
  selectOne: function(element) { 
    var value = '', opt, index = element.selectedIndex; 
    if (index >= 0) { 
      opt = element.options[index]; 
      value = opt.value; 
      if (!value && !('value' in opt)) 
        value = opt.text; 
    } 
    return [element.name, value]; 
  }, 
 //针对select元素多选，返回元素名称，和所选的值(如果值为空则取选项的文本)的数组，其中值以数组形式存放 
  selectMany: function(element) { 
    var value = new Array(); 
    for (var i = 0; i < element.length; i++) { 
      var opt = element.options; 
      if (opt.selected) { 
        var optValue = opt.value; 
        if (!optValue && !('value' in opt)) 
          optValue = opt.text; 
        value.push(optValue); 
      } 
    } 
    return [element.name, value]; 
  } 
} 

--------------------------------------------------------------------------------
小艺,2007-11-20 10:42:38

 /*--------------------------------------------------------------------------*/ 
var $F = Form.Element.getValue; 
/*--------------------------------------------------------------------------*/ 
//基于定时机制的侦听对象内容变更的抽象类 
//主要用于监听一个对象内部内容发生变更时回调指定的方法 
Abstract.TimedObserver = function() {} 
Abstract.TimedObserver.prototype = { 
 //初始化元素对象、时间频率、回调函数 
  initialize: function(element, frequency, callback) { 
    this.frequency = frequency; 
    this.element   = $(element); 
    this.callback  = callback; 
    this.lastValue = this.getValue(); 
    this.registerCallback(); 
  }, 
 //注册回调方法 
  registerCallback: function() { 
    setInterval(this.onTimerEvent.bind(this), this.frequency * 1000); 
  }, 
 //定时触发的方法 
 //getValue()获得元素对象的值 
  onTimerEvent: function() { 
    var value = this.getValue(); 
    if (this.lastValue != value) { 
      this.callback(this.element, value); 
      this.lastValue = value; 
    } 
  } 
} 
Form.Element.Observer = Class.create(); 
Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), { 
  getValue: function() { 
    return Form.Element.getValue(this.element); 
  } 
}); 
Form.Observer = Class.create(); 
Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), { 
  getValue: function() { 
    return Form.serialize(this.element); 
  } 
}); 
/*--------------------------------------------------------------------------*/ 
//基于事件机制侦听对象内容变更的抽象类,与TimedObserver的区别在于后者是定时轮循时侦听Value变更并执行回调， 
//前者是事件发生时才执行回调 
Abstract.EventObserver = function() {} 
Abstract.EventObserver.prototype = { 
  initialize: function(element, callback) { 
    this.element  = $(element); 
    this.callback = callback; 
    this.lastValue = this.getValue(); 
 //如果元素是表单，则调用表单回调函数 
    if (this.element.tagName.toLowerCase() == 'form') 
      this.registerFormCallbacks(); 
    else 
      this.registerCallback(this.element); 
  }, 
  onElementEvent: function() { 
    var value = this.getValue(); 
    if (this.lastValue != value) { 
      this.callback(this.element, value); 
      this.lastValue = value; 
    } 
  }, 
  registerFormCallbacks: function() { 
    var elements = Form.getElements(this.element); 
    for (var i = 0; i < elements.length; i++) 
      this.registerCallback(elements); 
  }, 
  registerCallback: function(element) { 
    if (element.type) { 
      switch (element.type.toLowerCase()) { 
        case 'checkbox': 
        case 'radio': 
          Event.observe(element, 'click', this.onElementEvent.bind(this)); 
          break; 
        case 'password': 
        case 'text': 
        case 'textarea': 
        case 'select-one': 
        case 'select-multiple': 
          Event.observe(element, 'change', this.onElementEvent.bind(this)); 
          break; 
      } 
    } 
  } 
} 
Form.Element.EventObserver = Class.create(); 
Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), { 
  getValue: function() { 
    return Form.Element.getValue(this.element); 
  } 
}); 
Form.EventObserver = Class.create(); 
Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), { 
  getValue: function() { 
    return Form.serialize(this.element); 
  } 
}); 
if (!window.Event) { 
  var Event = new Object(); 
} 
Object.extend(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, 
  element: function(event) { 
    return event.target || event.srcElement; 
  }, 
  isLeftClick: function(event) { 
    return (((event.which) && (event.which == 1)) || 
            ((event.button) && (event.button == 1))); 
  }, 
  pointerX: function(event) { 
    return event.pageX || (event.clientX + 
      (document.documentElement.scrollLeft || document.body.scrollLeft)); 
  }, 
  pointerY: function(event) { 
    return event.pageY || (event.clientY + 
      (document.documentElement.scrollTop || document.body.scrollTop)); 
  }, 
  stop: function(event) { 
    if (event.preventDefault) { 
      event.preventDefault(); 
      event.stopPropagation(); 
    } else { 
      event.returnValue = false; 
      event.cancelBubble = true; 
    } 
  }, 
  // find the first node with the given tagName, starting from the 
  // node the event was triggered on; traverses the DOM upwards 
  findElement: function(event, tagName) { 
    var element = Event.element(event); 
    while (element.parentNode && (!element.tagName || 
        (element.tagName.toUpperCase() != tagName.toUpperCase()))) 
      element = element.parentNode; 
    return element; 
  }, 
  observers: false, 
  _observeAndCache: function(element, name, observer, useCapture) { 
    if (!this.observers) this.observers = []; 
    if (element.addEventListener) { 
      this.observers.push([element, name, observer, useCapture]); 
      element.addEventListener(name, observer, useCapture); 
    } else if (element.attachEvent) { 
      this.observers.push([element, name, observer, useCapture]); 
      element.attachEvent('on' + name, observer); 
    } 
  }, 
  unloadCache: function() { 
    if (!Event.observers) return; 
    for (var i = 0; i < Event.observers.length; i++) { 
      Event.stopObserving.apply(this, Event.observers); 
      Event.observers[0] = null; 
    } 
    Event.observers = false; 
  }, 
  observe: function(element, name, observer, useCapture) { 
    var element = $(element); 
    useCapture = useCapture || false; 
    if (name == 'keypress' && 
        (navigator.appVersion.match(/Konqueror|Safari|KHTML/) 
        || element.attachEvent)) 
      name = 'keydown'; 
    this._observeAndCache(element, name, observer, useCapture); 
  }, 
  stopObserving: function(element, name, observer, useCapture) { 
    var element = $(element); 
    useCapture = useCapture || false; 
    if (name == 'keypress' && 
        (navigator.appVersion.match(/Konqueror|Safari|KHTML/) 
        || element.detachEvent)) 
      name = 'keydown'; 
    if (element.removeEventListener) { 
      element.removeEventListener(name, observer, useCapture); 
    } else if (element.detachEvent) { 
      element.detachEvent('on' + name, observer); 
    } 
  } 
}); 

--------------------------------------------------------------------------------
小艺,2007-11-20 10:42:55

/* prevent memory leaks in IE */
Event.observe(window, 'unload', Event.unloadCache, false);
var Position = {
  // set to true if needed, warning: firefox performance problems
  // NOT neeeded for page scrolling, only if draggable contained in
  // scrollable elements
  includeScrollOffsets: false,
  // must be called before calling withinIncludingScrolloffset, every time the
  // page is scrolled
  prepare: function() {
    this.deltaX =  window.pageXOffset
                || document.documentElement.scrollLeft
                || document.body.scrollLeft
                || 0;
    this.deltaY =  window.pageYOffset
                || document.documentElement.scrollTop
                || document.body.scrollTop
                || 0;
  },
  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];
  },
  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];
  },
  positionedOffset: function(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
      if (element) {
        p = Element.getStyle(element, 'position');
        if (p == 'relative' || p == 'absolute') break;
      }
    } while (element);
    return [valueL, valueT];
  },
  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
  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);
  },
  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
  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;
  },
  clone: function(source, target) {
    source = $(source);
    target = $(target);
    target.style.position = 'absolute';
    var offsets = this.cumulativeOffset(source);
    target.style.top    = offsets[1] + 'px';
    target.style.left   = offsets[0] + 'px';
    target.style.width  = source.offsetWidth + 'px';
    target.style.height = source.offsetHeight + 'px';
  },
  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 {
      valueT -= element.scrollTop  || 0;
      valueL -= element.scrollLeft || 0;
    } while (element = element.parentNode);
    return [valueL, valueT];
  },
  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';
  },
  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';;
  },
  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];
  }
}