快捷導(dǎo)航

javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法詳解

更新時(shí)間：2023年07月11日 08:50:54 作者：flying_huixia

這篇文章主要介紹了javascript適配器模式和組合模式原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript適配器模式與組合模式相關(guān)原理、功能、實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下

一、適配器模式

1、作用：主要解決兩個(gè)軟件實(shí)體間接口不兼容的問題

2、實(shí)例

（1）地圖渲染的適配

//谷歌和百度地圖的渲染地圖調(diào)用的方式不一樣
        var googleMap = {
            show: function () {
                console.log('開始渲染谷歌地圖')
            }
        }
        var BaiduMap = {
            display: function () {
                console.log('開始渲染谷歌地圖')
            }
        }
        //我們 程序中的渲染地圖方法入下
        var renderMap = function (map) {
            if (map.show instanceof Function) {
                map.show()
            }
        }
        //baiduMap 來源于第三方，不能改變其內(nèi)部構(gòu)造，那么需要對(duì)百度地圖做一下適配
        var BaiduAdapter = {
            show: function () {
                return BaiduMap.display()
            }
        }

（2）接口數(shù)據(jù)格式的統(tǒng)一適配

 //接口數(shù)據(jù)格式的統(tǒng)一適配
        var cityData = [{
                name: 'shenzhen',
                id: 11
            },
            {
                name: 'guangzhou',
                id: 12
            }
        ]
        //新數(shù)據(jù)源
        var newcityData = {
            'shenzhen': 11,
            'guanzghou': 12,
            'zhuhai': 12
        }
        //數(shù)據(jù)格式轉(zhuǎn)換適配器
        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))

運(yùn)行結(jié)果如下：

二、組合模式

1、圖片示意

2、組合模式的例子--掃描文件夾

文件夾和文件之間的關(guān)系，非常適用組合模式來描述。文件夾里既可以包含文件，又可以包含其他文件夾。

 //掃描文件夾 folder 和 file 兩個(gè)類
        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()

運(yùn)行結(jié)果如下：