美文网首页
JS设计模式---7.桥接模式

JS设计模式---7.桥接模式

作者: 念丶凉 | 来源:发表于2018-12-19 14:32 被阅读4次

    适用场合及栗子

    • 事件监听器

    假设有一个名为getBeerById的API函数。它根据一个标识符返回有关某种啤酒的信息。我们来给一个事件监听用户操作

        //bad
        addEvent(Element,'click',getBeerById)
        function getBeerById(e){
          // 事件对象被作为参数传递给函数,而本例并没有使用这个参数,只是从this对象中获取id
          var id = this.id;
          asyncRequest('GET',`beer.uri?id=${id}`,function (res) {
             console.log(`Request Beer:${res.responseText}`)  
          }) 
        }
        // good
        function getBeerById(id,callback) {
          asyncRequest('GET',`beer.uri?id=${id}`,function (res) {
            // 回调 传入返回值
            callback(res.responseText)
          }) 
        }
        addEvent(Element,'click',getBeerByIdBridge)
        function getBeerByIdBridge(e){
          // 把id作为参数传递给getBeerById函数是合情合理的,这里使用一个回调函数把回应结果返回 现在我们将针对接口而不是实现进行编程 
          getBeerById(this.id,function (beer) {
            console.log(`Request Beer:${res.responseText}`)
          })
        }
    

    我们用了两种方式来实现,第一种方式把事件对象与getBeerById捆绑在一起,那么它只在本次事件中适用。第二种方式使用桥接模式把抽象隔离开来后,getBeerById 函数不再和事件对象捆绑在一起,也就扩大了它的适用范围

    • 特权函数
      var Public = function () {
         var secret = 3;
         this.privilegedGetter = function () {
           return secret
         }
       }
       var o = new Public();
       var data = o.privilegedGetter();
    

    利用桥接函数来实现公共成员对私有成员的访问和操作 详见封装

    • 连接多个类
      var class1 = function (a,b,c) {
        this.a = a;
        this.b = b;
        this.c = c;
      }
      var class2 = function (d) {
        this.d = d
      }
      var BridgeClass = function (a,b,c,d) {
        this.one = new class1(a,b,c);
        this.two = new clsaa2(d);
      }
    

    这看起来很像适配器,但是本例中实际上并没有客户系统要求提供数据,它只不过是用来接纳数据并转发给责任方的一种辅助性手段。
    有人可能会觉得这个桥接类实际上就是一个门面类。但是这里与门面类不同,使用桥接模式是为了让class1和class2能够独立于BrigeClass而发生改变。

    总结

    桥接模式主要的作用是将抽象与其实现隔离开来,以便二者独立变化,互不影响。
    桥接模式的好处就在于能够独立管理你项目的各个组成部分,可以促进代码的模块化,促成更简洁的实现并提高抽象的灵活性。
    只有某一处调用的函数如果用桥接的话,代码就会变得累赘了。而且增加了函数的调用,可能会对性能造成一些影响。

    相关文章

      网友评论

          本文标题:JS设计模式---7.桥接模式

          本文链接:https://www.haomeiwen.com/subject/tcidkqtx.html