《JavaScript设计模式》读书笔记——Day2.1

接下来就是第三篇啦！！！更加的复杂了我感觉。。休息一下开始。

第三篇 结构型设计模式

//外观模式实现
    function addEvent( dom , type , fn ) {
        // 对于支持DOM2级事件处理程序addEvenListener方法的浏览器
        if ( dom.addEventListener) {
            dom.addEventListener( type , fn , false );
        } else if ( dom.attachEvent) {  // 对于支持attachEvent方法的浏览器
            dom.attachEvent('on' + type , fn);
        } else { // 对于这2种方法都不支持的浏览器
            dom [ 'on' + type ] = fn;
        }
    }
    var myInput = document.getElementById('myinput');
    addEvent( myInput , 'click' , function () {
        console.log ( '绑定我的第一个事件' );
    } );
    addEvent( myInput , 'click' , function () {
        console.log ( '绑定我的第二个事件' );
    } );

这样子这个函数就可以复用了，而且不会与后来其他的事件起冲突。

接下来是参数适配器：

/*
  * obj.name : name
  * obj.age : age
  * obj.title : title
  * obj.color : color
  * obj.size : size
  * obj.price : price
  */
  function doSomething( obj ) {
      var _adapter = {
          name   :   '罗浩浩',
          age    :    18,
          title  :   '设计模式',
          color  :   'red',
          size   :    100,
          price  :    30
      };
      for ( var i in _adapter) {
          _adapter[i] = obj[i] || _adapter[i];
      } 
  }

目的呢是调用的时候不知道参数传递的是否完整，所以用适配器来传入参数对象。

下面一个是数据适配，一般的数组我们会发现每个成员代表的意义不明确，我们就可以用下面这样的形式：

var obj = {
      name   :  '' ,
      type   :  '' ,
      title  :  '' ,
      time   :  ''
  };

  function arrToObjectAdapter( arr ) {
      return {
          name  :  arr[0],
          type  :  arr[1],
          title :  arr[2],
          data  :  arr[3]
      }
  }
  var arr = ['js','book','前端编程语言','8月1日'];
  var adapterData = arrToObjectAdapter( arr );
        console.log ( adapterData ); // name: "js" type: "book" title: "前端编程语言" time: "8月1日"

装饰者模式：

var decorator = function ( input , fn ) {
     // 获取事件源
     var input = document.getElementById(input);
     // 若事件源是已经绑定的事件
     if ( typeof input.onclick === 'function' ) {
         // 缓存事件原有的回调函数
         var oldClickFn = input.onclick;
         // 为事件源添加新的事件
         input.onclick = function () {
             // 事件源原有回调函数
             oldClickFn();
             // 执行事件源新增回调函数
             fn();
         }
     } else {
         // 事件源未绑定事件，直接为事件源添加新增回调函数
         input.onclick = fn;
     }
 };
 // 电话输入框功能装饰
 decorator( 'tel_input' , function () {
        document.getElementById( 'tel_demo_text' ).style.display = 'none' ;
 } )

着实是。。有点摸不着头脑，这里我要去问问啦~

下一个！我已经要死了。。桥接模式：

 var spans = document.getElementsByTagName('span');
    spans[0].onmouseover = function () {
        this.style.color = 'pink';
        this.style.bakcground = '#ccc';
    };
    spans[0].onmouseout = function () {
        this.style.color = '';
        this.style.bakcground = '';
    };

    spans[1].onmouseover = function () {
        this.getElementsByTagName('strong')[0].style.color = 'red';
        this.style.bakcground = '#pink';
    };
    spans[1].onmouseout = function () {
        this.getElementsByTagName('strong')[0].style.color = '';
        this.style.bakcground = '';
    };

html和css我局不写了。。偷个懒，主要是js。。。
这么写，好恶心啊，看着很不爽啊！那我么就用抽象化的思维，提取一下共同点。说白了，就是要有一个标签，然后要让他变色，那就再给他一个方法。那就是。。function(dom,color,bg)

 function changeColor ( dom , color , bg ) {
        dom.style.color = color;
        dom.style.background = bg;
    }
    var spans = document.getElementsByTagName('span');
    spans[0].onmouseover = function () {
        changeColor( this , 'pink' , '#ccc' )
    };

这一下就舒服多了嘛！！！

接下来是多元化对象！！！！疯了！！记不住那么多啊！

// 运动单元
    function Speed( x , y ) {
        this.x = x;
        this.y = y;
    }
    Speed.prototype.run = function () {
        console.log ( '动起来' );
    };
    // 着色单元
    function Color( cl ) {
        this.color = cl;
    }
    Color.prototype.draw = function () {
        console.log ( '绘制色彩' );
    };
    //说话单元
    function Speak( wd ) {
        this.word = wd;
    }
    Speak.prototype.say = function () {
        console.log ( '书写字体' );
    };

    // 创建一个球类，并且它可以运动，可以着色
    function Ball( x ,y, c ) {
        this.speed = new Speed ( x , y );
        this.color = new Color ( c );
    }
    Ball.prototype.init = function () {
        this.speed.run();
        this.color.draw();
    };

    // 创建一个人，它可以说话，可以运动
    function Human( x , y , f ) {
        this.speed = new Speed ( x , y );
        this.font = new Speak ( f );
    }
    Human.prototype.init = function () {
        this.speed.run();
        this.font.say();
    };

    var person = new Human ( 10 , 12 , 16 );  // 动起来
    person.init();  // 书写字体

这就是多元化对象。。其中当我们想做什么的时候，就实例化一个人物对象，这样他就有运动和说话的动作了。

桥接模式可以实现将元素的事件与业务逻辑之间解耦。也可以更加灵活的创建一个对象。他最大的特点就是将实现层（如元素绑定的事件）与抽象层（如修饰页面的UI逻辑）相分离，使得两边都可以有独立的变化。避免需求的改变而对对象内部的修改，体现了面向对象对括展的开放和对修改的关闭的原则。

受不鸟啦！！！明天再接着来！！