适配器模式
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));
}
}
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。