适配器形式

JavaScript的一大特性就是库多，更新快！如今前端顺序猿运用上了npm今后，哪一个不是install了十几个包（devDependencies就得5，6个吧，grunt/gulp）.

• 针对这个背景，适配器形式关于JSer来讲就迥殊主要！为甚么怎么说呢？之前公司用了本身写的DOM操纵库，厥后JQuery吊炸天，性能好的一比，那我们如今想要运用JQuery的话，然则已经有许多顺序都基于本来的库了，那写个适配器吧！

• 更主要的是js的库平常火了今后，更新迥殊快，有时候不免api就会修正，所以在运用较新的库时，你最好写个适配器，你的代码基于本身的api，假如背面库更新的话，你只须要修正适配器就能够了。这类另有一个优点，就是经由过程适配器，变动某些api的默认设置，今后更新库，也不会影响！横竖一句话：适配器算是前端开辟比较经常使用的吧！

写个适配器

本来公司用的DOM操纵库A

A(function(){
  A('button').on('click',function(e){
    ...
  });
});

Boss说引入JQuery,我试着写了下面的代码

window.A = A = jQuery;

竟然大部分代码能一般运转，好吧！这个例子通知我们适配器写的不要太离谱，称号和挪用体式格局只管要和目的库雷同，不是轻易许多吗？新人也轻易上手，适配器变动也轻易！

异类框架的适配

上面的例子是我意淫的！事实上公司的框架是如许

A = (function(){

  var version = 'v2.2.12';
  function select(id){
    return document.getElementById(id);
  }
  
  funcion on(id,type,fn){
    var dom = typeof id==='string'?this.select(id):id;
    if(dom.addEventListener({
      dom.addEventListener(type,fn,false);
    }
    else if(dom.attachEvent){
      dom.attachEvent('on'+type,fn);
    }
    else
    {
      dom['on'+type] = fn;
    }
  }
  
  return {
    select:select,
    on:on,
    version:version
  }
})();

好吧，这个差异很大吧？实在也不难，由于逻辑操纵是类似的，只是api名字差别，参数差别罢了！这个例子通知我们，纵然api没法设想一致，但逻辑不要太奇葩！

A = (function(){
  return{
    select:function(id){
      return $(id).get(0);
    },
    on:function(id,type,fn){
      var dom = typeof id === 'string'?$('#'+id):$(id);
      dom.on(type,fn);
    }
  }
})();

到场本身逻辑的适配器

之前写的一些库，如今须要增加一些特有的逻辑，不发起直接变动,先写个适配器，挪用本身的适配器

    select:function(id){
      doSomething(id);
      return $(id).get(0);
    },

参数适配器

api不要凌驾3个参数，假如有的必需许多呢，让用户通报一个obj吧，不仅参数变少了，能够设置默认值哦

function doSomething(obj){
  var defaults = {
    name:'雨夜清河',
    title:'设想形式',
    ...
  }
  
  for(var i in defaults){
    defaults[i] = obj[i] || defaults[i];
  }
  
  // do thing
}

服务器数据适配

前后端数据星散，当后端数据接口发生变化，前端写个适配器就好了

function ajaxAdapter(data){
  return [data['name'],data['title'],data['age']];
}

$.ajax({
  url:'..',
  success:function(data,status){
    if(data){
      doSomething(ajaxAdapter(data));
    }
  }
});