访问者模式

##前言

访问者模式（visitor）:针对于对象结构的元素，定义在不改变的该对象的前提下访问结构中的元素的新方法。

case1: 访问操作元素

function bindEvent(ele,type,fn,data={}){
  ele.attachEvent('on' + type,function(e){
    fn.call(ele,e,data);
  });
}
//核心在于调用了一次call方法，即回调函数访问的this指向就是事件源元素对象

实例: 事件自定义数据

function $(id){return document.getElementById(id);};
bindEvent($('btn'),
'click',
function(e,d){
$('text').innerHTML = e.type + d.text + this.tagName;
},{text: 'text demo'});

//点击btn输出 click text deno BUTTON id为text的容器元素新增一行内容

case2: 对象访问器

在原生对象构造器中为我们提供了`Object.prototype.toString.call`的方式，

判断返回来的字符串确定该数据的确切类型，如 '[object,Array]',数组对象，

利用该原理实现处理数组的方式处理对象。

const Visitor = (function (){
return {
splice : function (){
  /*截取方法
  * splice方法参数，从原参数的第二个开始算起
  */
   let args = Array.prototype.splice.call(arguments,1);
   return Array.prototype.splice.apply(arguments[0],args);
 },
push: function(){
let len = arguments[0].length || 0;
let args = this.splice(arguments,1);
/*校正length属性*/
arguments[0].length = len + arguments.length-1};
/*对第一次参数对象进行push操作*/
return Array.prototype.push.apply(arguments[0],args);

},
/*弹出第一次添加的元素*/
pop:function(){
 return Array.prototype.pop.apply(arguments[0]);
}
})();

实例: 对象类数组

let obj = new Object();
console.log(obj.length); //undefined
Visitor.push(obj,1,2,3,4);
console.log(obj.length); //4
console.log(obj); //Object{0:1,1:2,2:3,3:4,length:4};
Visitor.pop(obj);//Object{0:1,1:2,2:3,length:3};

Visitor.splice(obj,2);//Object{0:1,1:2,length:2};

TIPS:  访问者模式解决数据与数据的操作方式之间的耦合，将数据的操作方法独立于数据，使其可以自由化演变。访问者更适合那些数据稳定，但是数据操作容易改变的环境下。