早速、コードから始めましょう(『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 が提供する地図表示メソッドの名前を想定して、実際の開発では、おそらくそれほどスムーズにはいかないでしょう。この本の中で著者が提案したアイデアは、アダプター パターンを使用して問題を解決することです。アダプターのパターンを真似して改善したのは以下の通りです:
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);