10.第三篇：适配器模式

本文摘自 《JavaScript 设计模式》张容铭 著 版权归原作者所有

1.jQuery 适配器

// 框架适配器
window.A = A = jQuery; 
简单的适配了jQuery框架和A框架，可以同时用A来使用两个框架的方法。如果A框架有重写jQuery的方法的话，则会执行A框架。 

2.适配异类框架

// 定义框架
var A = A || {};
// 通过ID获取元素
A.g = function(id){
  return document.getElemenById(id);
}
// 为元素绑定事件
A.on = function(id,type,fn){
  // 如果传递参数是字符串则以id处理，否则以元素对象处理
  var dom = typeof id === 'string' ? this.g(id) : id;
  // 标准DOM2级天机事件方式
  if(dom.addEventListener){
    dom.addEventListener(type,fn,false);
  // IE Dom2级添加事件方式
  }else if(dom.attachEvent){
    dom.attachEvent('on'+type,fn);
  // 简易添加事件方式
  }else{
    dom['on'+type] = fn;
  }
}

// 窗口加载完成事件
A.on(window,'load',function(){
  // 按钮点击事件
  A.on('mybutton','click',function(){
    // to do
  })
})

A.g = function(id){
  // 通过jq获取jq对象，然后返回第一个成员
  return $(id).get(0)
}
A.on = function(id,type,fn){
  // 如果传递参数是字符串则以id处理，否则以元素对象处理
  var dom = typeof id === 'string' ? $('#'+id) : $(id);
  dom.on(type,fn);
}

3.数据适配

// 参数适配、数据适配， 其实就是把一个数据格式通过函数转化成另一种格式。
var arr = ['js模式',‘book’,'2018-12-7','前端语言']
function arrToObjAdapter(arr){
  return {
    name:arr[0],
    type:arr[1],
    title:arr[2],
    data:arr[3]
  }
}