首页 > web前端 > js教程 > JavaScript多态与适配器模式思考

JavaScript多态与适配器模式思考

高洛峰
发布: 2016-11-21 18:03:34
原创
1068 人浏览过

不多说先上一段代码(转载自《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.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板