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

  • A+
所属分类:JavaScript

本回内容介绍

上一回,聊了适配器模式,图片预加载,介一回,聊桥接模式(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。

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

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

客官看完点个赞,推荐推荐呗,嘿嘿~~

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: