javaScript设计模式——桥接模式（九）

最新推荐文章于 2024-05-08 11:24:24 发布

茉莉蜜茶~~~

最新推荐文章于 2024-05-08 11:24:24 发布

阅读量132

点赞数

分类专栏： javaScript 设计模式

本文链接：https://blog.csdn.net/weixin_42038290/article/details/112392571

版权

javaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

设计模式

12 篇文章 0 订阅

订阅专栏

设计模式：有助于提高代码的复用性和可维护性

概念

桥接模式(Bridge),将抽象部分与实现部分分离，使他们可以独立的变化。
这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。
桥接模式需要一个桥，来连接抽象部分和实现部分。

桥接模式，在系统中沿着多个维度变化，不仅不会增加系统的复杂度，还可以达到解耦的目的。

意图：将抽象与实现解耦

适用场景

事件监控

<body>
    <ul>
        <li data-id="1">用户一</li>
        <li data-id="2">用户二</li>
    </ul>
    <p id="content"></p>
</body>
<script>
    var lis = document.querySelectorAll('li')
    for(var i=0;i<lis.length;i++){
        lis[i].addEventListener('click',getUserById)
    }
    function getUserById(event){
        var id = event.target.dataset.id
        var xhr = new XMLHttpRequest()
        xhr.open('get',`/user/${id}`)
        xhr.onreadystatechange = function(){
            let user = xhr.response
            if(xhr.readyState == 4 && xhr.status == 200){
                document.getElementById('content').innerHTML = user.name
            }
        }
        xhr.send()
    }
</script>

但是上面代码有一个问题，就是getUserById需要event事件或者上下文，才能取得id, 而且还需要再获取dom，这样耦合太紧，需要拆分

function getUserByIdBridge(id){
     let id = this.dataset.id  //event.target.dataset.id
      getUserById(id,function(){
         document.getElementById('content').innerHTML = user.name
    })
}

function getUserById(id,callback){
      var xhr = new XMLHttpRequest()
        xhr.open('get',`/user/${id}`)
        xhr.onreadystatechange = function(){
            let user = xhr.response
            if(xhr.readyState == 4 && xhr.status == 200){
                callback(user)
            }
       }
        xhr.send()
  }

这样，明显代码模块，各个部分代码功能明确，耦合性大大降低，将监听器方法抽取出来，成为一个单独的API函数，而且保证该API函数与节点本身没有必然的耦合，就可以独立的运行getUserById这个函数。

桥接模式，就是把给抽象与现实对象搭一座桥，让对象方法即联系在一起，又是独立变化的，让代码耦合性降低的一种设计模式。

拓展

常用的12种设计模式

茉莉蜜茶~~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javaScript设计模式——桥接模式（九）

设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...
复制链接

扫一扫

专栏目录