适配器模式(Adaper):将一个类(对象)的接口(方法或者属性)转化成另外一个接口,以满足用户的需要,使类(对象)之间接口的不兼容问题通过适配器得以解决。实际上就是为两个代码库所写的代码兼容允许而书写额外的代码。
例如一个A框架想要适配JQuery对象
A.g = function(id){ //通过JQuery获取JQuery对象,然后返回第一个成员 return $(id).get(0) } A.on = function(id,type,fn){ //如果传递参数是字符串则以id处理,否则以元素对象处理 var dom = typeof id === 'string' ? $('#'+id) : $(id); dom.on(type,fn) }
适配器还有很多用途,例如传递多个参数时,记住这些参数的顺序是困难的,所以经常以一个参数对象方式传入,如果有一些参数没有传入,一些参数有默认值等,可以使用适配器来适配传入这个参数对象。
数据适配
var arr = ['JavaScript','book','前端编程语言','8月1日']; //每个数组成员代表的意义不同,通常将其适配成对象形式 var obj = { name:'', type:'', title:'', time:'' } //进行适配 function arrToObjAdapter(arr){ return { name:arr[0], type:arr[1], title:arr[2], time:arr[3] } } var adapterData = arrToObjAdapter(arr); console.log(adapterData) //{ name:'JavaScript',type:'book',title:'前端编程语言',time:'8月1日'}
解决前后端的数据依赖,前端程序不再为后端传递的数据所束缚,如果后端因框架改变导致传递的数据结构发生变化,使用适配器可以保证返回的数据是可用的安全的数据。
//为简化模型,使用Jquery的ajax方法 理想数据是一个一维数组 function ajaxAdapter(data){ return [data['key1'],data['key2'],data['key3']] } $.ajax({ url : 'xxx.php', success: function(data,status){ if(data){ //使用适配后的数据 doSomething(ajaxAdapter(data)); } } })