Heim > Artikel > Web-Frontend > Denken Sie über JavaScript-Polymorphismus und Adaptermuster nach
Beginnen wir ohne weitere Umschweife mit einem Codestück (Nachdruck aus „JavaScript Design Patterns and Development Practices“)
//谷歌地图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);//输出:开始渲染百度地图
Was die im Buch aufgeworfenen Fragen betrifft, wird davon ausgegangen, dass jede Karte Die API stellt den Methodennamen für die Anzeige der Karte bereit, was in der tatsächlichen Entwicklung möglicherweise nicht so reibungslos verläuft. Die vom Autor im Buch vorgeschlagene Idee besteht darin, das Problem mit dem Adaptermodus zu lösen. Folgendes habe ich nach der Nachahmung des Adaptermusters verbessert:
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);