• prototype1.4.0注释版源代码


    prototype框架最早是出于方便Ruby开发人员进行JavaScript开发所构建的,从这个版本上更加体现的淋漓尽致。
    比起1.3.1版本,1.4.0中的编程思想和技巧更加令人拍案叫绝,对于开拓编程思路很有帮助。

    该版本主要加入了迭代器思想,也是Ruby中的一个核心概念,从而使用此框架进行JavaScript开发几乎可以避免for循环的使用。

    下面是部分代码:

    /*  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/
     *
    /*--------------------------------------------------------------------------*/
    /*
    prototype-1.4.0注释版本 by http://www.x2blog.cn/supNate//*
    定义prototype对象,告知版本信息,有利于程序的自动检测
    ScriptFragment是正则表达式,用于捕获字符串中的<script>标记及其中的内容
    emptyFunction:空函数
    K:返回参数自身的函数,后面会有应用

    在这里使用了直接定义对象的语法:
    var obj={
     property1:value1,
     property2:value2,
     ....
    }
    后面会经常用到
    */
    var Prototype = {
      Version: ’1.4.0’,
      ScriptFragment: ’(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)’,

      emptyFunction: function() {},
      K: function(x) {return x}
    }

    /*
    定义创建类的模式,使用此模式创建的类能够实现构造函数
    其中initialize是一个抽象方法,apply使得能对其保持参数。
    如果直接调用this.initialize(arguments),则整个参数数组作为了一个参数。
    */
    var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }

    //表示命名空间或者抽象类的东西,使代码逻辑更加清楚
    var Abstract = new Object();

    /*
    将source的所有属性复制到destination
    例如:
    var a={};
    var b={p:1};
    Object.extent(a,b);
    alert(a.p);
    可以看到a具有了属性p且值等于1。
    如果属性相同则覆盖。
    */
    Object.extend = function(destination, source) {
      for (property in source) {
        destination[property] = source[property];
      }
      return destination;
    }
    /*
    相比prototype-1.3.1这里少了下面的函数:
    Object.prototype.extend = function(object) {
      return Object.extend.apply(this, [this, object]);
    }
    所以原先基于1.3.1框架的js脚本升级到1.4.0时会产生兼容性问题。只要在1.4.0里加上上述函数即可。
    去掉的原因大概因为为每个object都增加extend方法显的很浪费,毕竟95%的对象是不会用到的。
    而且增加了extend方法也为反射枚举带来一定的麻烦,这从后面Hash对象的用法可以看到。
    */

    /*
    将对象转换为字符串,这里能够更详细一些,只要对象自定义了inspect函数。而不是原来对象的toString总是[object]。
    例如后面对数组定义了inspect函数,使得
    var arr=[1,2,3];
    -》arr.inspect()=="[1,2,3]";
    */
    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;
      }
    }

    /*
    一个很重要的方法,能够将函数绑定到某个对象运行
    和1.3.1版本相比,原来不能在绑定的时候就添加参数,而现在可以。
    例如:
    var obj1={p:"obj1"};
    var obj2={
     p:"obj2",
     method:function(arg){
      alert(arg+this.p);
     }
    }
    obj2.method("this is ");//显示“this is obj2”;
    obj2.method.bind(obj1,"now this is ");//显示“now this is obj1”;
    最后一句在1.3.1中必须写为:
    obj2.method.bind(obj1)("now this is ");//显示“now this is obj1”;
    */
    Function.prototype.bind = function() {
      var __method = this, args = $A(arguments), object = args.shift();
      return function() {
        return __method.apply(object, args.concat($A(arguments)));
      }
    }
    /*
    将函数作为对象的事件监听,这样可以产生独立而且通用的事件处理程序,例如要对单击事件进行处理:
    function clickHandler(element){
     //处理element的单击事件
    }

    假设有节点node1,则:
    node1.onclick=function(){
     clickHandler.bindAsEventListener(this)(event||window.event);
    }
    */
    Function.prototype.bindAsEventListener = function(object) {
      var __method = this;
      return function(event) {
        return __method.call(object, event || window.event);
      }
    }

    /*
    所有的数字类型都是Number类的实例,下面就是给Number类定义一些方法
    */
    Object.extend(Number.prototype, {
     /*
     将数字转换为颜色的形式
     */
      toColorPart: function() {
        var digits = this.toString(16);
        if (this < 16) return ’0’ + digits;
        return digits;
      },
     //加1
      succ: function() {
        return this + 1;
      },
     /*
     执行指定次数的循环,例如获取10个随机数
     var ran=[]
     var c=10;
     c.times(function(){
      ran.push(Math.random());
     });
     $R是ObjectRange对象的快捷创建形式,后面会有介绍。
     */
      times: function(iterator) {
        $R(0, this, true).each(iterator);
        return this;
      }
    });

    /*
    Try对象,仅有一个方法these
    */
    var Try = {
     /*
     根据参数指定的函数进行调用,返回第一个调用成功的值
     在后面跨浏览器建立XMLHttpRequest对象时就用到了。
     如果所有都不成功则返回undefined
     */
      these: function() {
        var returnValue;

        for (var i = 0; i < arguments.length; i++) {
          var lambda = arguments[i];
          try {
            returnValue = lambda();
            break;
          } catch (e) {}
        }

        return returnValue;
      }
    }

    /*--------------------------------------------------------------------------*/


    /*
    定时器类,比起window.setInterval函数,该类能够使得回调函数不会被并发调用,见onTimerEvent的注释。
    */
    var PeriodicalExecuter = Class.create();
    PeriodicalExecuter.prototype = {
     /*
     构造函数,指定回调函数和执行频率,单位为秒
     */
      initialize: function(callback, frequency) {
        this.callback = callback;
        this.frequency = frequency;
        this.currentlyExecuting = false;
        this.registerCallback();
      },
     /*
     开始执行定时器,一般不要显示调用,在构造函数中被调用
     注意这里写为:
     this.onTimerEvent.bind(this)
     如果写为:
     this.onTimerEvent
     则onTimerEvent中的函数的this指针将指向window对象,即setInterval的默认对象。
     */
      registerCallback: function() {
        setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
      },
     /*
     相当于回调函数的一个代理。
     在传统的setInterval函数中,时间一到,便强制执行回调函数,而这里加入了currentlyExecuting属性判断,
     则如果callback函数的执行时间超过了一个时间片,则阻止其被重复执行。
     */
      onTimerEvent: function() {
        if (!this.currentlyExecuting) {
          try {
            this.currentlyExecuting = true;
            this.callback();
          } finally {
            this.currentlyExecuting = false;
          }
        }
      }
    }

    /*--------------------------------------------------------------------------*/
    /*
    很方便的一个快速链接函数,能够获得参数所指定的页面节点,如果有多个参数则返回数组。
    参数的形式既可以是节点的id值,也可以是节点的引用,即$($("someId"))和$("someId")是等价的;
    */
    function $() {
      var elements = new Array();

      for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == ’string’)
          element = document.getElementById(element);

        if (arguments.length == 1)
          return element;

        elements.push(element);
      }

      return elements;
    }

    /*
    为字符串对象添加方法,和前面为Number添加方法的原理相同
    */
    Object.extend(String.prototype, {
     /*
     将Html转换为纯文本,例如:
     var s="<font color=’red’>hello</font>";
     s.stripTags()将得到“hello”。
     */
      stripTags: function() {
        return this.replace(/<\/?[^>]+>/gi, ’’);
      },
     /*
     删除文本中的脚本代码(<script xxx>...</script>)
     */
      stripScripts: function() {
        return this.replace(new RegExp(Prototype.ScriptFragment, ’img’), ’’);
      },
     //提取字符串中的脚本,返回所有脚本内容组成的数组
      extractScripts: function() {
        var matchAll = new RegExp(Prototype.ScriptFragment, ’img’);//先找到所有包括<script>的代码标记
        var matchOne = new RegExp(Prototype.ScriptFragment, ’im’); //再对每个脚本删除<script>标记
        return (this.match(matchAll) || []).map(function(scriptTag) {
          return (scriptTag.match(matchOne) || [’’, ’’])[1];
        });
      },
     //先提取字符串中的脚本块,再执行这些脚本
      evalScripts: function() {
        return this.extractScripts().map(eval);
      },
     /*
     利用浏览器本身的机制对Html字符串进行编码,例如将<转换为&lt;
     */
      escapeHTML: function() {
        var div = document.createElement(’div’);
        var text = document.createTextNode(this);
        div.appendChild(text);
        return div.innerHTML;
      },
     /*
     对Html进行解码
     */
      unescapeHTML: function() {
        var div = document.createElement(’div’);
        div.innerHTML = this.stripTags();
        return div.childNodes[0] ? div.childNodes[0].nodeValue : ’’;
      },
     //获取查询字符串数组,例如通过document.location.toQueryParams()就可以得到由键和值组成的哈希表(用对象表示)。
      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(’’);
      },
     /*
     将用"-"连接的字符串骆驼化。例如:
     var s="background-color";
     alert(s.camelize());
     将得到“backgroundColor”。
     */
      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[i];
          camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
        }

        return camelizedString;
      },
     /*
     inspect是观察的意思。这里大概就是将字符串转换为可观察的形式。这里将转义字符写成转义前的字符串形式,
     例如:
     var s="abc\ndef";

     alert(s);
     将得到两行字符串,上一行是abc,下一行是def
     而
     alert(s.inspect());
     将得到abc\ndef
     即给字符串赋值时的形式,这和数组的inspect作用类似。
     */
      inspect: function() {
        return "’" + this.replace(’\\’, ’\\\\’).replace("’", ’\\\’’) + "’";
      }
    });

    //做一个名称链接
    String.prototype.parseQuery = String.prototype.toQueryParams;

    //定义了两个异常对象,主要用于迭代控制
    var $break    = new Object();
    var $continue = new Object();

    /*
    这是一个非常Ruby的机制,事实上可以将Enumerable看作一个枚举接口,
    而_each是必须实现的方法,只要实现了此方法的类,都可以调用接口类中的其他成员。
    例如后面Array就实现了此接口,也是最典型的应用
    */
    var Enumerable = {
     /*
     对可枚举对象的每个成员调用iterator(迭代器)方法,
     如果迭代器方法抛出$continue异常,则继续执行,如果抛出$break异常,则不再继续迭代
     
     其中调用了_each这个抽象方法,
     _each是由具体的继承于Enumerable的类实现的

     index计数器的作用是用于告诉迭代器当前执行到第几个元素,是迭代器可选实现的。
     */
      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;
        }
      },
     /*
     判断枚举对象中的所有元素是否都能使得迭代器返回true。如果没有指定迭代器,则判断所有元素是否都对应于布尔类型的true
     如果所有都满足,则返回true;否则返回false;
     注意这里就使用了$break异常,用于实现“逻辑与”操作的短路效果
     另外值得注意的一个技巧是使用了!!将一个变量强制转换为布尔类型,可以参考:http://www.x2blog.cn/supNate/?tid=4669
     */
    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,否则返回false
     其原理和all方法类似

     如果数组为空,仍然返回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的枚举元素的值,如果没有true,则返回"undefined",即result未被赋值
     这有可能是作者考虑的一个小失误,毕竟返回"undefined"并不是一个好的风格(仅是猜测)
     */
      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;
      },
     /*
     grep是unix类操作系统下的一个经典命令,而这里则是JavaScript的一个类似实现
     pattern是正则模式,对所有符合此模式的枚举元素进行迭代器运算,并将运算结果保存到数组中并返回。
     需要注意,这里的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;
      },
     /*
     判断枚举对象中是否包含指定值的枚举元素,这里仍然使用了each方法,而不是循环,可见prototype致力于提供一种ruby化的编程方式,
     如果用循环实现,则是类似于以下的代码:
     for(var i=0;i<this.length;i++){
      if(this[i]==object)return true;
     }
     而该函数中,定义了迭代器:
     function(value) {
          if (value == object) {
            found = true;
            throw $break;
          }
        }
     这个迭代器作为each方法的参数。
     
     */
      include: function(object) {
        var found = false;
        this.each(function(value) {
          if (value == object) {
            found = true;
            throw $break;
          }
        });
        return found;
      },

     /*
     字面意思是“注入”,其作用相当于将memo作为联系各个迭代器的全局变量,每次迭代都对其进行操作,返回操作的最后结果。例如对于数组:
     var arr=[1,2,3];
     现在想将其字符串化为:123
     如果不调用join方法,传统做法是:
     var s="";
     for(var i=0;i<arr.length;i++){
      s+=arr[i];
     }
     现在通过调用inject函数,则:
     var s=arr.inject("",function(memo,value){return memo+value});
     两者运行的结果是完全相同的。
     */
      inject: function(memo, iterator) {
        this.each(function(value, index) {
          memo = iterator(memo, value, index);
        });
        return memo;
      },

     /*
     在所有枚举元素上调用method方法,并可以给这个方法传递参数
     返回所有method的执行结果,作为数组返回
     */
      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;
      },
     /*
     按照迭代器的返回结果,将枚举元素分为两个数组trues和falses,其中trues包括迭代器返回true的枚举元素,falses则相反。
     */
      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的枚举元素
     */
      reject: function(iterator) {
        var results = [];
        this.each(function(value, index) {
          if (!iterator(value, index))
            results.push(value);
        });
        return results;
      },
     /*
     结构复杂的一个函数,作用是根据迭代器iterator的结果对枚举元素进行排序。使iterator执行结果小的元素排在前面。
     主要包括三个函数的调用:
     1。collect方法,返回的每个数组元素包括:值和迭代器运行该值的结果,用{value:value,criteria:iterator(value,index)}得到
     2。对collect返回的数组执行sort方法,这时数组对象内置的对象,参数是一个委托函数,用于指定排序规则。其标准是对迭代器返回的值排序,小的在前面
     3。对sort的结果执行pluck方法,即返回value属性的值,于是最后还是返回的枚举对象中的原有值,只是根据迭代器iterator的结果对这些元素进行排序
     */
      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’);
      },

     /*
     将枚举对象转换为数组,使用了collect方法和Prototype.K函数,减少了重复代码
     */
      toArray: function() {
        return this.collect(Prototype.K);
      },
     /*
     压缩函数,实现复杂,作用尚不能体会-_-。
     接收的参数需要是可枚举对象,可以有多个参数。最后一个参数是迭代器,可选。
     作用是将自身和参数组成的二维阵列进行行列对换,并切除多余的数据,或补充缺少的数据(用undefined)。切换后的行数由调用者中元素的个数决定,而列数是数组参数的个数加1。
     每个数组参数的第一个元素顺序组成第一行,第二个元素顺序组成第二行,依次类推。直到调用者中的元素用完为止。
     迭代器的作用就是对转换后的每一行进行一次运算。
     例如:
     var arr1=[1,2,3];
     var arr2=[4,5,6];
     var arr3=[7,8,9];
     var arr=arr1.zip(arr2,arr3);

     //使用迭代器输出结果,inspect用于输出数组语法表示的数组字符串,后面有介绍
     arr.each(function(s){
       document.write(s.inspect());
       document.write("<br/>");
      }
     );
     得到的结果为:
     [1, 4, 7]
     [2, 5, 8]
     [3, 6, 9]

     如果让arr1=[1,2],其他不变,则执行结果为:
     [1, 4, 7]
     [2, 5, 8]

     */
      zip: function() {
        var iterator = Prototype.K, args = $A(arguments);
        if (typeof args.last() == ’function’)
          iterator = args.pop();
     //将自身枚举对象作为一个元素,与参数(也是可枚举的)组成一个数组,并将枚举对象转换为数组(通过$A迭代器)
        var collections = [this].concat(args).map($A);

        return this.map(function(value, index) {
          iterator(value = collections.pluck(index));
          return value;
        });
      },
     /*
     这实际上这是一个待实现的抽象方法,在Array对象中有对其进行的重定义
     所以将this转换为数组(toArray()),再调用inspect。
     对于非数组形式的枚举对象,则会加上’#<Enumerable:....>’这样的形式
     */
      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
    });

    /*
    将一个对象转换为数组。
    对于字符串则直接变为字符数组,例如$A("abc")将得到,["a","b","c"]
    否则集合对象变为数组,这类对象包括函数的参数集合arguments,<select>的options集合,
    <form>的elements集合等等,一个节点的所有子结点childNodes等等。
    */
    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[i]);
    return results;
    }
    }
    /*
    让数组继承于Enumarable对象(基类)
    */
    Object.extend(Array.prototype, Enumerable);
    /*
    做一个链接,prototype中一般私有的成员或抽象成员都用下划线开头,这里的_reverse大概就是起一个说明性的作用,将其作为抽象方法使用。
    */
    Array.prototype._reverse = Array.prototype.reverse;
    ......

  • 相关阅读:
    java软件设计模式只单例设计模式
    IOS疯狂基础之观察者模式
    IOS之UIColor
    UITableView与UITableViewCell
    UILabel的各种属性和方法
    iOS TextField
    【IPHONE开发-OBJECTC入门学习】对象的归档和解归档
    【IPHONE开发-OBJECTC入门学习】复制对象,深浅复制
    【IPHONE开发-OBJECTC入门学习】文件的操作,读写复制文件
    虚拟机VMware 9安装苹果MAC OSX 10.8图文教程
  • 原文地址:https://www.cnblogs.com/treasurelife/p/1077379.html
Copyright © 2020-2023  润新知