javascript适配器模式和组合模式原理与实现方法详解
作者:flying_huixia
这篇文章主要介绍了javascript适配器模式和组合模式原理与实现方法,结合实例形式详细分析了javascript适配器模式与组合模式相关原理、功能、实现方法与注意事项,需要的朋友可以参考下
一、适配器模式
1、作用:主要解决两个软件实体间接口不兼容的问题
2、实例
(1)地图渲染的适配
//谷歌和百度地图的渲染地图调用的方式不一样
        var googleMap = {
            show: function () {
                console.log('开始渲染谷歌地图')
            }
        }
        var BaiduMap = {
            display: function () {
                console.log('开始渲染谷歌地图')
            }
        }
        //我们 程序中的渲染地图方法入下
        var renderMap = function (map) {
            if (map.show instanceof Function) {
                map.show()
            }
        }
        //baiduMap 来源于第三方,不能改变其内部构造,那么需要对百度地图做一下适配
        var BaiduAdapter = {
            show: function () {
                return BaiduMap.display()
            }
        }(2)接口数据格式的统一适配
 //接口数据格式的统一适配
        var cityData = [{
                name: 'shenzhen',
                id: 11
            },
            {
                name: 'guangzhou',
                id: 12
            }
        ]
        //新数据源
        var newcityData = {
            'shenzhen': 11,
            'guanzghou': 12,
            'zhuhai': 12
        }
        //数据格式转换适配器
        var addressAdapter = function (data) {
            var address = [];
            for (var i in data) {
                var objTemp = {};
                objTemp.name = i;
                objTemp.id = data[i];
                address.push(objTemp)
            }
            return address;
        }
        console.log(addressAdapter(newcityData))运行结果如下:

二、组合模式
1、图片示意

2、组合模式的例子--扫描文件夹
文件夹和文件之间的关系,非常适用组合模式来描述。文件夹里既可以包含文件,又可以包含其他文件夹。
 //扫描文件夹 folder 和 file 两个类
        var Folder = function (name) {
            this.name = name;
            this.file = []
        }
        Folder.prototype.add = function (file) {
            this.file.push(file)
        }
        Folder.prototype.scan = function () {
            console.log('开始扫描文件夹'+this.name)
            for(var i=0;i<this.file.length;i++){
                this.file[i].scan()
            }
        }
        var File = function(name){
            this.name = name;
        }
        File.prototype.add = function(){
            throw new Error('文件下面不能再添加文件')
        }
        File.prototype.scan = function () {
            console.log('开始扫描文件'+this.name)
        }
        var chinese = new File('chinese')
        var math = new File('math')
        var English = new File('English')
        var hobby = new File('hobby')
        var folder1=new Folder('subject');
        folder1.add(chinese)
        folder1.add(math)
        folder1.add(English)
        var folder2=new Folder('entertainment')
        folder2.add(hobby)
        var folder=new Folder('doc')
        folder.add(folder1)
        folder.add(folder2)
        console.log(folder)
        folder.scan()运行结果如下:

更多设计模式相关知识点,还可以参考本站文章:
https://www.jb51.net/article/252965.htm
https://www.jb51.net/article/27973.htm
您可能感兴趣的文章:
- JavaScript适配器模式详解
 - javascript设计模式之Adapter模式【适配器模式】实现方法示例
 - JavaScript设计模式之适配器模式介绍
 - 深入理解JavaScript系列(39):设计模式之适配器模式详解
 - 详解JavaScript实现设计模式中的适配器模式的方法
 - javascript设计模式 – 适配器模式原理与应用实例分析
 - JavaScript设计模式学习之适配器模式
 - JavaScript 设计模式之组合模式解析
 - JavaScript组合模式学习要点
 - 设计模式中的组合模式在JavaScript程序构建中的使用
 - javascript设计模式 – 组合模式原理与应用实例分析
 - JavaScript设计模式开发中组合模式的使用教程
 
