转载

前端-适配器模式

适配器模式

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));     }   } });

原文 https://segmentfault.com/a/1190000004984088

正文到此结束