JavaScript多态与适配器模式思考
程序员文章站
2022-04-19 16:45:41
...
不多说先上一段代码(转载自《JavaScript设计模式与开发实践》)
//谷歌地图show方法 var googleMap = { googlShow: function() { console.log("谷歌地图"); } }; //百度地图show方法 var baiduMap = { baiduShow: function() { console.log("百度地图"); } }; //渲染地图函数 var renderMap=function(map){ if(map.show instanceof Function){ map.show(); } }; renderMap(googleMap);//输出:开始渲染谷歌地图 renderMap(baiduMap);//输出:开始渲染百度地图
对于书中抛出的问题,假设每个地图API提供展示地图的方法名都是show,在实际开发中也许不会如此顺利,书中作者提出的思路是借助适配器模式来解决问题。下面是我仿照适配器模式改进的:
var googleMap = { googlShow: function() { console.log("谷歌地图"); } }; var baiduMap = { baiduShow: function() { console.log("百度地图"); } }; //适配器参数配置 var mapArg = { "googleMap": googleMap.googlShow, "baiduMap": baiduMap.baiduShow }; //适配器地图 var adaptMap = { show: function(arg) { for (var imap in mapArg) { for (var fmap in arg) { if (imap && fmap && mapArg[imap].name==fmap) { return mapArg[imap](); } } } } }; //只关注发出显示地图而不关注具体用哪种地图 var renderMap = function(arg) { adaptMap.show(arg); }; //当增加了搜搜地图,我们需要添加搜搜地图的方法以及修改适配器地图参数 //而不需要对renderMap函数进行修改 var sosoMap = { sosoShow: function() { console.log("搜搜地图"); } }; mapArg.sosoMap=sosoMap.sosoShow; render(sosoMap);
推荐阅读
-
PHP设计模式之适配器模式(Adapter)原理与用法详解
-
详解JavaScript实现设计模式中的适配器模式的方法
-
Adapter适配器模式在JavaScript设计模式编程中的运用分析
-
设计模式:与SpringMVC底层息息相关的适配器模式
-
深入理解JavaScript中的块级作用域、私有变量与模块模式
-
javascript设计模式之Adapter模式【适配器模式】实现方法示例
-
javascript设计模式之Adapter模式【适配器模式】实现方法示例
-
JavaScript事件发布/订阅模式原理与用法分析
-
Python设计模式之适配器模式原理与用法详解
-
JavaScript观察者模式(publish/subscribe)原理与实现方法