听飞狐聊JavaScript设计模式系列11

本回内容介绍

上一回，聊了适配器模式，图片预加载，介一回，聊桥接模式（Bridge），跟之前一样，难度比较小，桥接模式将抽象部分与它的实现部分分离，通过桥接模式联系彼此，同时又使之都可以独立地变化。也算是一种解耦。

1.桥接模式

这里需要用到之前写过的代码，不清楚的童鞋看看前面聊过的系列08的门面模式之DOM2事件，这里会用到EventUtil，如下：

<input type="button" id='btn' value="摁一下证明被触发">
// 获取dom，没什么好说的
var d = document;
var $ = function(id){
    return d.getElementById(id);
}
window.onload=function(){
    // 获取button
    var btn = $('btn')
    // 之前聊门面模式的时候写的util，不清楚的童鞋再看看系列08
    EventUtil.addHandler(btn,'click',bridge);
    // 这里就是桥接了
    function bridge(){
        // 这个this是获取的按钮本身
        var _self = this;
        // 触发函数，并把按钮传参过去
        fire(_self);
    }
    // 这里简单的写个弹窗，没有写太复杂的逻辑处理
    function fire(o){
        alert(o.value);    // 摁一下证明被触发
    }
}

这里的bridge就是用于连接抽象事件和fire业务逻辑部分的桥梁，这个例子没有写过多的代码，简简单单比较直观好理解。then，下一个例子。

2. 桥接模式之组织多个类

这个比上一个事件模拟的例子更简单，把其类封装起来，通过一个桥梁函数来组织。

// 类ONE，简写O
var ClassO = function(a, b, c) {
  this.a = a;
  this.b = b;
  this.c = c;
}

// 类TWO，简写T
var ClassT = function(x,y,z) {
  this.x = x;
  this.y = y;
  this.z = z;
};

// 桥梁类，组织上面的两个类
var Bridge = function(a,b,c,x,y,z) {
  this.one = new ClassO(a,b,c);
  this.two = new ClassT(x,y,z);
}

这个例子特简单吧，可能在平时开发中经常用到，只是不知道这种开发模式就叫做桥接模式。then，下一个例子。

3. 桥接模式之特权函数

特权函数，用一些具有特权的方法作为桥梁以便访问私有空间，可以回忆一下之前的系列02。

// Open类
var Open = function(){
    // 私有业务方法，用一个简单的弹框模拟
    var privateM = function(){
        alert("飞狐就是帅！");
    }
    // 这里就是一个桥梁，提供私有方法privateM的访问权
    this.bridge = function(){
        return privateM();
    }
}

// 这里测试一下，没什么好说的
var o = new Open();
o.bridge();    // 飞狐就是帅！

这个也不难吧，一个私有函数访问特权，全当是复习了。

装个逼先。最近的电影《我的少女时代》还不错耶~！啥没记住，就一句台词特印象：“报告主任，我考第一是作弊！”。嘿嘿~~

这一回聊的桥接模式，主要是理解，并没有太多复杂的地方。
下面的内容，就练一道题吧。

连续自然数分组，计算最多组的个数

将1至100这100个连续自然数分成N组,使每组相加的值相等。返回N组中个数最多一组的个数：

function calculate(x){
    // 项数，更灵活的话，可以当参数传入，当然逻辑会更复杂点
    var n = 100;
    // 前n个数的和
    var s = 0;
    // 向下取整，
    var group = Math.floor(n/2);
    // 计算总和,没记错的话，公式是=（首项+末项）*项数/2
    var sum = (1 + n) * n/2;
    
    // 计算平均数，防止有余数，向下取整
    var avg = Math.floor(sum/x);
    
    // 循环所有项
    for (var i=1;i<=n;i++) {
        // 累加每一项
        s += i;
        // 判断当大于平均数时停止
        if (s > avg) {
            console.log(x+"个数组中数字最多的一组有：" + (i - 1) + " 个,此时的和为：" + (s - i) + "。");
            break;
        }
    }    
}
calculate(8);    // 8个数组中数字最多的一组有：35 个,此时的和为：630。

这是在网上看到的一道题，改写的一个计算方法，注释写的还算清楚吧，更灵活的话，还可以扩展传入项，有兴趣的童鞋可以玩玩儿，当娱乐消遣呗。

这一回，主要聊了桥接模式，回忆了下事件监听，聊了用桥接模式组织多个类，聊了特权函数，做了一道计算题，这回主要在于理解~~
下一回，可能会略抽象一点，聊一聊组合模式。

客观看完点个赞，推荐推荐呗，嘿嘿~~

---

注：此系飞狐原创，转载请注明出处