序、设计模式分类
一、装饰者模式(原型链)
二、策略模式
三、代理模式
四、发布订阅模式
五、迭代器模式
六、工厂模式
七、外观模式
八、状态模式
九、单例模式
十、适配器模式
一、概述
适配器模式是设计模式行为型模式中的一种模式;
定义:
适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修改已有接口,就可以使他们协同工作;
1. 最小案例
var googleMap = {
show: function(){
console.log( '开始渲染谷歌地图' );
}
};
var baiduMap = {
display: function(){
console.log( '开始渲染百度地图' );
}
};
var baiduMapAdapter = {
show: function(){
return baiduMap.display();
}
};
renderMap( googleMap ); // 开始渲染谷歌地图
renderMap( baiduMapAdapter ); // 开始渲染百度地图
2. 应用领域
我们作为前端开发人员,对页面上期待得到的数据和数据格式肯定是比较了解的,但是在前后端分离的开发模式中有的时候会遇到这种尴尬的处境:
我们都知道很多UI组件或者工具库会按指定的数据格式进行渲染,但是这个时候后端是不知道的;所以可能接口出来的数据我们是不能直接正常的在页面上渲染的,而此时老板催促我们赶紧上线,而后端坚持认为数据格式没问题,坚决不修改;这个时候我们可以通过适配器模式来前端格式化数据;
//x轴适配器
function echartXAxisAdapter(res) {
return res.map(item => item.day);
}
//坐标点适配器
function echartDataAdapter(res) {
return res.map(item => item.uv);
}