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())
相关推荐
沛沛老爹8 小时前
从Web到AI:行业专属Agent Skills生态系统技术演进实战
java·开发语言·前端·vue.js·人工智能·rag·企业转型
GGGG寄了8 小时前
HTML——列表标签
前端·html5
HWL56799 小时前
显示器缩放和更改分辨率的区别
前端·css·vue.js·计算机外设·html5
jzshmyt9 小时前
曼德勃罗集web可视化应用
前端
GGGG寄了9 小时前
HTML——表格的基本用法
前端·html
yanyu-yaya9 小时前
速学兼复习之vue3章节3
前端·javascript·vue.js·学习·前端框架
web小白成长日记9 小时前
前端向架构突围系列模块化 [4 - 1]:思想-超越文件拆分的边界思维
前端·架构
tkevinjd9 小时前
3-Vue&Ajax
前端·vue.js·ajax
林恒smileZAZ9 小时前
前端拖拽,看似简单,其实处处是坑
前端·javascript·vue.js
Filotimo_9 小时前
那在HTML中,action是什么
前端·okhttp·html