zoukankan      html  css  js  c++  java
  • JS常用的设计模式(8)——访问者模式

    GOF官方定义: 访问者模式是表示一个作用于某个对象结构中的各元素的操作。它使可以在不改变各元素的类的前提下定义作用于这些元素的新操作。我们在使用一些操作对不同的 对象进行处理时,往往会根据不同的对象选择不同的处理方法和过程。在实际的代码过程中,我们可以发现,如果让所有的操作分散到各个对象中,整个系统会变得 难以维护和修改。且增加新的操作通常都要重新编译所有的类。因此,为了解决这个问题,我们可以将每一个类中的相关操作提取出来,包装成一个独立的对象,这 个对象我们就称为访问者(Visitor)。利用访问者,对访问的元素进行某些操作时,只需将此对象作为参数传递给当前访问者,然后,访问者会依据被访问 者的具体信息,进行相关的操作。

    据统计,上面这段话只有5%的人会看到最后一句。那么通俗点讲,访问者模式先把一些可复用的行为抽象到一个函数(对象)里,这个函数我们就称为访问 者(Visitor)。如果另外一些对象要调用这个函数,只需要把那些对象当作参数传给这个函数,在js里我们经常通过call或者apply的方式传递 this对象给一个Visitor函数.

    访问者模式也被称为GOF总结的23种设计模式中最难理解的一种。不过这有很大一部分原因是因为《设计模式》基于C++和Smalltalk写成. 在强类型语言中需要通过多次重载来实现访问者的接口匹配。

    而在js这种基于鸭子类型的语言中,访问者模式几乎是原生的实现, 所以我们可以利用apply和call毫不费力的使用访问者模式,这一小节更关心的是这种模式的思想以及在js引擎中的实现。

    我们先来了解一下什么是鸭子类型,说个故事:

    很久以前有个皇帝喜欢听鸭子呱呱叫,于是他召集大臣组建一个一千只鸭子的合唱团。大臣把全国的鸭子都抓来了,最后始终还差一只。有天终于来了一只自告奋勇 的鸡,这只鸡说它也会呱呱叫,好吧在这个故事的设定里,它确实会呱呱叫。 后来故事的发展很明显,这只鸡混到了鸭子的合唱团中。— 皇帝只是想听呱呱叫,他才不在乎你是鸭子还是鸡呢。

    这个就是鸭子类型的概念,在js这种弱类型语言里,很多方法里都不做对象的类型检测,而是只关心这些对象能做什么。

    Array构造器和String构造器的prototype上的方法就被特意设计成了访问者。这些方法不对this的数据类型做任何校验。这也就是为什么arguments能冒充array调用push方法.

    看下v8引擎里面Array.prototype.push的代码:

    function ArrayPush() {  var n = TO_UINT32( this.length ); 
      var m = %_ArgumentsLength();    for (var i = 0; i < m; i++) {    this[i+n] = %_Arguments(i);    //属性拷贝  }  this.length = n + m;             //修正length  return this.length;} 

    可以看到,ArrayPush方法没有对this的类型做任何显示的限制,所以理论上任何对象都可以被传入ArrayPush这个访问者。

    不过在代码的执行期,还是会受到一些隐式限制,在上面的例子很容易看出要求:

    1、 this对象上面可储存属性. //反例: 值类型的数据

    2、 this的length属性可写. //反例: functon对象, function有一个只读的length属性, 表示形参个数.

    如果不符合这2条规则的话,代码在执行期会报错. 也就是说, Array.prototype.push.call( 1, ‘first’ )和Array.prototoype.push.call( function(){}, ‘first’ )都达不到预期的效果.

    利用访问者,我们来做个有趣的事情. 给一个object对象增加push方法.

    var Visitor = {} 
    Visitor .push  =  function(){ 
        return Array.prototype.push.apply( this, arguments ); 
    } 
    var obj = {}; 
    obj.push = Visitor .push; 
    obj.push( '"first" ); 
    alert ( obj[0] )  //"first" 
    alert ( obj.length );  //1 
  • 相关阅读:
    jsp 生成静态页面
    flash cs5
    sql 设置主键
    sql 分页查询
    java 获取系统时间
    android 源码 编译
    android 退出 activity
    广告平台
    android 引擎
    maya 花草 制作动画
  • 原文地址:https://www.cnblogs.com/jymz/p/4273902.html
Copyright © 2011-2022 走看看