js设计模式:桥接模式

作用:

可以将复杂的类进行一些拆分,让抽象和实现进行分离解耦,可以让每一个部分都可以单独维护

方便扩展和维护

示例:

javascript 复制代码
        class Obj {
            constructor(person) {
                this.person = person
                this.name = person.name
            }
            getHobby(){
                return this.person.hobby
            }
            getBehavior(){
                return this.person.behavior()
            }
        }

        class Human {
            constructor(hobby) {
                this.name = '打工人'
                this.hobby = hobby
            }
            behavior() {
                console.log('一身打工人的怨气')
            }
        }
        class Deity {
            constructor(hobby) {
                this.name = '神仙'
                this.hobby = hobby
            }
            behavior() {
                console.log('过着神仙般的生活')
            }
        }

        const wjt = new Obj(new Human('抖音刷美女,或者打游戏'))
        const sunwukong = new Obj(new Deity('定身七仙女,然后吃桃子'))

        console.log(wjt.name+'的爱好:'+wjt.getHobby())
        console.log(sunwukong.name+'的爱好:'+sunwukong.getHobby())
相关推荐
甜兒.25 分钟前
鸿蒙小技巧
前端·华为·typescript·harmonyos
未来可期LJ25 分钟前
【C++ 设计模式】单例模式的两种懒汉式和饿汉式
c++·单例模式·设计模式
她似晚风般温柔7893 小时前
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能(最新附源码保姆级)
开发语言·javascript·uni-app
Jiaberrr4 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy4 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白4 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、4 小时前
Web Worker 简单使用
前端
web_learning_3214 小时前
信息收集常用指令
前端·搜索引擎
Ylucius4 小时前
动态语言? 静态语言? ------区别何在?java,js,c,c++,python分给是静态or动态语言?
java·c语言·javascript·c++·python·学习
tabzzz4 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack