zoukankan      html  css  js  c++  java
  • 《javascript设计模式》笔记之第八章:桥接模式

    个人理解:桥接模式就是更进一步地封装已有api,通过这个封装连接你的输入和底层api(初步理解,以后加深理解有不同体会之后可能要修改)

    一:示例:事件监听器
    下面这个示例就演示了通过一座桥(也就是一个API函数)来连接你的输入和原生的ajax
    function getBeerById(id, callback) {
      // Make request for beer by ID, then return the beer data.
      asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {
        // callback response
        callback(resp.responseText);
      });
    }
    
    然后我们之后的编程就可以使用getBeerById这个函数了
    如果我们不适用桥接模式的话,代码是下面这个样子的:
    addEvent(element, 'click', getBeerById);
    function getBeerById(e) {
      var id = this.id;
      asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {
        // Callback response.
        console.log('Requested Beer: ' + resp.responseText);
      });
    }
    
    因此我们可以看出,使用桥接模式的话,getBeerById并没有和事件对象捆绑在一起了!此外,这样的模式还更方便测试,并且降低了代码的耦合性。
    二:用桥接模式连接多个类
    其实这个原理和上面的一样的,都是把其他类封装起来,通过一个函数(桥)来连接它们
    代码:
    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 Class2(d);
    };
    
    我个人认为这样子的话和工厂模式是很相似的
    三:示例:构建XHR连接队列
    在演示之前,说一下一些要用到的函数,例如asyncRequest是用来解决浏览器的差异的,并且假设我们之前就定义了上面说过的Function.prototype.method方法,然后我们默认使用的是比较高级的浏览器,因此可以使用Array.prototype.forEach和Array.prototype.filter函数
    接下来,例子太长了,要看的就看书吧。。。其实这个例子和上面所说的原理是一样的,只不过是一个真实的例子
     
  • 相关阅读:
    中国剩余定理(普通+扩展)
    因子和(洛谷P1593)——约数和+分解质因数
    暑假考试题6:problem 题(Catlan + dp + 组合数)
    暑假考试题6:single 单(树上推理)
    暑假考试题5:tree 最小生成树(最小生成树+倍增)
    暑假考试题5:序列(分类讨论水题)
    暑假考试题5:工作 work(贪心+二分)
    暑假考试题4:砍树 cut(整除分块)
    4.8 作业
    面向对象编程
  • 原文地址:https://www.cnblogs.com/oadaM92/p/4368332.html
Copyright © 2011-2022 走看看