Maison > Article > interface Web > JavaScript多态与适配器模式思考
不多说先上一段代码(转载自《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);