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

wanglu1209 发布于2019-08-19 17:12 / 2555人阅读

摘要：桥接模式之特权函数特权函数，用一些具有特权的方法作为桥梁以便访问私有空间，可以回忆一下之前的系列。连续自然数分组，计算最多组的个数将至这个连续自然数分成组使每组相加的值相等。个数组中数字最多的一组有个此时的和为。

本回内容介绍

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

1.桥接模式

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


// 获取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。

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

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

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

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

GPU云服务器云服务器 javascript专题系列 javascript深入系列飞狐 javascript设计模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78289.html

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

摘要：本回内容介绍上一回聊到工厂模式，略抽象。官方说法，门面模式是指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供一个统一的高层接口。使得子系统更容易使用。本回内容介绍上一回聊到工厂模式，略抽象。介一回，咱聊门面模式就比较容易了，门面模式也叫外观模式(facade)。官方说法，门面模式是指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接...

saucxs 2019-08-21 10:48 评论0 收藏0
听飞狐聊JavaScript设计模式系列06

本回内容介绍上一回聊到JS中模拟接口，装饰者模式，掺元类，分析了backbone的继承源码，感觉还好吧！介一回，偶们来聊一下在JS单例模式(singleton)，单例模式其实运用很广泛，比如：jquery，AngularJS，underscore吖虾米的都是单例模式，来吧，直接开始咯： 1. 单例模式保证一个类只有一个实例，从全局命名空间里提供一个唯一的访问点来访问该对象。其实之前写过的对象...

hiYoHoo 2019-08-21 10:45 评论0 收藏0
听飞狐聊JavaScript设计模式系列02

摘要：本回内容介绍上一回聊到数据类型，简单的过了一遍，包括个数组新特性等，这一回来聊聊对象，结合数组来实战一些例子，在做题中成长，记忆会更深刻，来吧，开始咯创建实例的方式有两种使用操作符后跟构造函数飞狐使用对象字面量表示法飞狐也可以飞狐这种写法与本回内容介绍上一回聊到JS数据类型，简单的过了一遍，包括9个数组新特性等，这一回来聊聊Object对象，结合数组来实战一些例子，在做题中成长，记...

tangr206 2019-08-21 10:44 评论0 收藏0
听飞狐聊JavaScript设计模式系列10

摘要：本回内容介绍上一回，聊了代理模式，虚拟代理，图片懒加载，介一回，也比较容易，适配器模式，用一个新的接口对现有类的接口进行包装，处理类与的不匹配。这一回，主要聊了适配器模式，图片预加载，主要还是理解下一回，聊一聊桥接模式，顺便做一做计算题。本回内容介绍上一回，聊了代理模式，虚拟代理，图片懒加载，介一回，也比较容易，适配器模式（Adapter），用一个新的接口对现有类的接口进行包装，处...

yexiaobai 2019-08-19 17:12 评论0 收藏0
听飞狐聊JavaScript设计模式系列14

摘要：本回内容介绍上一回，聊了聊状态模式，并介绍了一下介一回，聊链式编程，模拟一下，再模拟一下封装一个库。这一回，主要聊了链式调用，模拟了，尤其是，希望大家能喜欢这次代码分享。下一回，聊一聊的策略模式。本回内容介绍上一回，聊了聊状态模式（State），并介绍了一下vue.js；介一回，聊链式编程，模拟一下jQuery，再模拟一下underscore.js,封装一个库。 1. 链式调用 (...

fox_soyoung 2019-08-19 17:20 评论0 收藏0