JavaScript设计模式系列五之适配器模式(附案例源码)
文章初衷
设计模式其实旨在解决语言本身存在的缺陷,
目前javaScript一些新的语法特性已经集成了一些设计模式的实现,
大家在写代码的时候,没必要为了用设计模式而去用设计模式,
那么我这边为什么还写设计模式的文章呢,
一方面是自己的一个整理,然后记录出来,结合自己的理解,
一方面就是虽然语言特性本身已经实现这些模式,有了自己的语法,
但是我们何尝不能去了解一下它是通过什么样的思路去实现了
在我看来设计模式更多的是让我对于思考问题,有了一些更好的思路和想法
文章实现更多的表现为用一些简单的案例,帮助大家去理解这样的一种思路,
会存在故意把设计模式的实现往简单的案例靠拢,
大家在真实项目中不要刻意去用设计模式实现相同的代码
设计模式在平时的一些代码中都会有所体现,大家也许经常用到,
耐心看文章,也许你会发现自己平时的代码就不断在设计模式中体现
JavaScript设计模式系列
JavaScript设计模式系列,讲述大概20-30种设计模式在JavaScript中的运用
后面对应的篇幅会陆续更新,欢迎大家提出建议
这是设计模式系列第五篇,讲述适配器模式
上篇文章讲述了外观模式,有兴趣可以查看
注意
JavaScript设计模式系列github地址
深入系列文章部分是有先后顺序的，按照目录结构顺序阅读效果最好。
勘误及提问
如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误。
适配器模式
概念:
将一个对象的方法或者属性转化成另外一个接口,
使得对象之间的方法或属性不兼容性问题通过适配器得到解决
通俗点去理解
比如苹果插座是三孔的,这时候我们想要充电,
但是并没有三孔的插头,这时候我们就需要适配器转换一下,
这样我们就可以充电的,这就是适配器模式解决问题的场景
案例体现
比如我们现在需要打印一个数组,通过后台接口我们取到的是一个对象,
这时候我们就需要通过转换把对应的对象转换为数组,
这种场景在我们项目中还是经常会遇到的,下面简单的进行一个模拟
代码体现
// 适配器模式
// obj对象转换为数组
function objToArray(obj) {
var arr = []; //新数组
for(var i in obj){
arr.push(obj[i]);
}
return arr;
}
// 创建一个对象
var obj = {
name: '小钱',
age: 18,
sex: '男'
}
// 假设我这边需要的结果是一个数组格式的输出
console.log(objToArray(obj));//['小钱',18,'男']jQuery与zepto框架的适配
适配器模式在jQuery与zepto框架之间也有一个很好的体现,
在之前,我们在开发移动端的时候,会选择用zepto框架来替代比较大的jQuery框架
这边其实就很好的利用了适配模式,基本上会jQuery的同学很快速的可以掌握zepto
适配器模式与外观模式的对比
外观模式
概念:
为一组复杂的子系统接口提供一个更高级的统一接口,
通过这个接口使得对子系统接口的访问更容易
外观模式又被称作为门面模式
适配器模式
概念:
将一个对象的方法或者属性转化成另外一个接口,
使得对象之间的方法或属性不兼容性问题通过适配器得到解决
外观模式与适配器模式的不同点在于,外观模式侧重点在于提供统一接口,使得访问接口更容易,适配器模式侧重点在于转换接口,解决不兼容问题
适配器模式的优点
- 通过适配的方式,可以很好的解决原本存在的兼容性问题
适配器模式总结
在需要把对象进行转换,解决一些兼容性问题的时候,我们可以考虑用适配器的思路去解决问题
注意
JavaScript设计模式系列github地址
深入系列文章部分是有先后顺序的，按照目录结构顺序阅读效果最好。