《JavaScript 模式》知识点小抄本（下）

时间  2019-12-07
标签 JavaScript 模式 知识 抄本 栏目 JavaScript 繁體版
原文   原文链接

介绍

最近开始给本身每周订个学习任务，学习结果反馈为一篇文章的输出，作好学习记录。
这一周(02.25-03.03)我定的目标是《JavaScript 模式》的第七章学习一遍，学习结果的反馈就是本篇文章啦。
因为内容实在太长，我将本文分为两部分：javascript

本文内容中主要参考《JavaScript 模式》，其中也有些案例是来自网上资料，有备注出处啦，如形成不便，请联系我删改。 前端

过两天我会把这篇文章收录到我整理的知识库 【Cute-JavaScript】 中，并已经同步到 【github】上面。java

六.外观模式(Facade Pattern)

1.概念介绍

外观模式(Facade Pattern)是一种简单又常见的模式，它为一些复杂的子系统接口提供一个更高级的统一接口，方便对这些子系统的接口访问。 node

它不只简化类中的接口，还对接口和调用者进行解耦，外观模式也常被认为是开发者必备，它能够将一些复杂操做封装起来，并建立一个简单接口用于调用。git

2.优缺点和应用场景

2.1优势

  • 轻量级，减小系统相互依赖。
  • 提升灵活性。
  • 提升了安全性。

2.2缺点

  • 不符合开闭原则，若是要改东西很麻烦，继承重写都不合适。

2.3应用场景

  • 为复杂的模块或子系统提供外界访问的模块。
  • 子系统相对独立。
  • 预防低水平人员带来的风险。
  • 项目重构。

3.基本案例

常常咱们在处理一些特殊状况的时候，须要一块儿调用好几个方法，咱们使用外观模式，就能够将多个方法包装成一个方法，哪里须要使用直接调用这个包装好的方法就能够。
好比咱们常常处理浏览器事件，须要同时调用stopPropagation()和preventDefault()，因而咱们就能够新建一个外观方法，实现这两个方法同时调用：github

let myEvent = {
    // ...
    stop: e => {
        e.stopPropagation();
        e.preventDefault();
    }
};

而后咱们也可使用外观模式，来作IE事件的兼容性：segmentfault

let myEvent = {
    // ...
    stop: e => {
        // 其余 
        if(typeof e.preventDefault === 'function'){
            e.preventDefault();
        }
        if(typeof e.stopPropagation === 'function'){
            e.stopPropagation();
        }
        // IE
        if(typeof e.returnValue === 'boolean'){
            e.returnValue = false;
        }
        if(typeof e.cancelBubble === 'boolean'){
            e.cancelBubble = true;
        }
    }
};

7、代理模式(Proxy Pattern)

1.概念介绍

代理模式(Proxy Pattern) 为其余对象提供一种代理，来控制这个对象的访问，代理是在客户端和真实对象之间的介质。 设计模式

装饰者模式1

简单的理解：如咱们须要请明星来作广告，咱们会先经过联系Ta的经纪人，谈好条件才会给明星签合同。浏览器

2.优缺点和应用场景

2.1优势

  • 职责单一且清晰。
  • 保护真实对象。
  • 开闭原则，高拓展性。

2.2缺点

  • 因为在客户端和真实对象间添加代理对象，致使请求处理速度变慢。
  • 实现代理模式须要额外工做，有些代理模式实现起来很是复杂。

2.3应用场景

  • 须要隐藏或保护某个类，则为这个类添加代理。
  • 须要给不一样访问者提供不一样权限，则在代理类上作判断。
  • 须要为某个类添加功能，如添加日志缓存等，咱们能够在代理的类作添加，而无论去改原来封装好的类。

3.基本案例

这里咱们以吃午餐问题来学习代理模式。一般状况下，咱们会有两种方式解决午餐问题：“去餐厅吃”和“叫外卖”。
去餐厅吃的话，咱们就是本身过去吃饭了呗，若是是叫外卖，咱们就会经过外卖小哥来拿到午餐才能吃起来。缓存

  • 去餐厅吃（没有使用代理模式）
// 定义午餐类 参数 菜名
let Lunch = function(greens){
    this.greens = greens;
}
Lunch.prototype.getGreens = function(){
    return this.greens;
}
// 定义我这个对象
let leo = {
    buy: function(greens){
        console.log(`午餐吃${greens.getGreens()}`);
    }
}
// 去餐厅吃
leo.buy(new Lunch('青椒炒肉')); // 午餐吃青椒炒肉
  • 叫外卖（有使用代理模式）
// 定义午餐类 参数 菜名
let Lunch = function(greens){
    this.greens = greens;
}
Lunch.prototype.getGreens = function(){
    return this.greens;
}
// 定义外卖小哥这个对象
let brother = {
    buy: function(lunch){
        leo.buy(lunch.getGreens());
    }
}
// 定义我这个对象
let leo = {
    buy: function(greens){
        console.log(`午餐吃${greens}`);
    }
}
// 叫外卖
brother.buy(new Lunch('青椒炒肉')); // 午餐吃青椒炒肉

而且外卖小哥还会帮咱们作一些其余事，好比帮咱们带瓶可乐，咱们改造brother和leo这2个对象，再看看效果：

let brother = {
    buy: function(lunch){
        if(leo.needCola) leo.buyCola();
        leo.buy(lunch.getGreens());
    }
}

let leo = {
    needCola: true,
    buy: function(greens){
        console.log(`午餐吃${greens}`);
    },
    buyCola: function(){
        console.log(`顺手买瓶可乐！`);
    }
}
brother.buy(new Lunch('青椒炒肉'));
// 顺手买瓶可乐！
// 午餐吃青椒炒肉

4.保护代理

仍是借用 3.基本案例 的叫外卖的例子，咱们如今要实现保护代理，而咱们须要外卖小哥为了咱们的身体健康，超过晚上9点，就不帮咱们买可乐。
仍是改造上面买可乐的brother对象代码：

let brother = {
    buy: function(lunch){
        let nowDate = new Date();
        if(nowDate.getHours() >= 21){
            console.log('亲，这么晚不要喝可乐哟！');
        }else{
            if(leo.needCola) leo.buyCola();
            leo.buy(lunch.getGreens());
        }
    }
}
brother.buy(new Lunch('青椒炒肉'));
// 顺手买瓶可乐！
// 午餐吃青椒炒肉

5.虚拟代理

虚拟代理能把一些开销大的对象，延迟到真正须要的时候才去建立和执行。
咱们这里举个图片懒加载的例子：
这个案例参考自JS设计模式-代理模式.

// 图片加载
let ele = (function(){
    let node = document.createElement('img');
    document.body.appendChild(node);
    return{
        setSrc : function(src){
            node.src = src;
        }
    }
})()

// 代理对象
let proxy = (function(){
    let img = new Image();
    img.onload = function(){
        ele.setSrc(this.src);
    }
    return {
        setSrc : function(src){
            img.src = src;
            ele.setSrc('loading.png');
        }
    }
})()

proxy.setSrc('example.png');

6.缓存代理

缓存代理是将一些开销大的运算结果提供暂存功能，当下次计算时，参数和以前一直，则将缓存的结果返回：
这个案例参考自JS设计模式-代理模式.

//计算乘积
let mult = function(){
    let result = 1;
    for(let i = 0; i<arguments.length; i++){
        result *= arguments[i];
    }
    return result;
}

// 缓存代理
let proxy = (function(){
    let cache = {};
    return function(){
        let args = Array.prototype.join.call(arguments, '',);
        if(args in cache){
            return cache[args];
        }
        return cache[args] = mult.apply(this,arguments);
    }
})();

8、中介者模式(Mediator Pattern)

1.概念介绍

中介者模式(Mediator Pattern) 是用来下降多个对象和类之间的通讯复杂性，促进造成松耦合，提升可维护性。

装饰者模式1

在这种模式下，独立的对象之间不能直接通讯，而是须要中间对象（mediator对象），当其中一个对象（colleague对象）状态改变后，它会通知mediator对象，
而后mediator对象会把该变换通知到任意须要知道此变化的colleague对象。

2.优缺点和应用场景

2.1优势

  • 下降类的复杂度，从一对多转成一对一。
  • 为各个类之间解耦。
  • 提升代码可维护性。

2.2缺点

中介者会愈来愈庞大，变得难以维护。

2.3应用场景

  • 系统中对象之间存在比较复杂的引用关系，并且难以复用该对象。
  • 须要生成最少的子类，实现一个中间类封装多个类中的行为的时候。

另外： 不要在职责混乱的时候使用。

3.基本案例

这里咱们实现一个简单的案例，一场测试结束后，公布结果，告知解答出题目的人挑战成功，不然挑战失败：
这个案例来自JavaScript 中常见设计模式整理

const player = function(name) {
    this.name = name;
    playerMiddle.add(name);
}

player.prototype.win = function() {
    playerMiddle.win(this.name);
}

player.prototype.lose = function() {
    playerMiddle.lose(this.name);
}

const playerMiddle = (function() { // 将就用下这个 demo，这个函数当成中介者
    const players = [];
    const winArr =  [];
    const loseArr = [];
    return {
        add: function(name) {
            players.push(name)
        },
        win: function(name) {
            winArr.push(name)
            if (winArr.length + loseArr.length === players.length) {
                this.show()
            }
        },
        lose: function(name) {
            loseArr.push(name)
            if (winArr.length + loseArr.length === players.length) {
                this.show()
            }
        },
        show: function() {
            for (let winner of winArr) {
                console.log(winner + '挑战成功;')
            }
            for (let loser of loseArr) {
                console.log(loser + '挑战失败;')
            }
        },
    }
}())

const a = new player('A 选手');
const b = new player('B 选手');
const c = new player('C 选手');

a.win()
b.win()
c.lose()

// A 选手挑战成功;
// B 选手挑战成功;
// C 选手挑战失败;

4.书本案例

这个案例来自 《JavaScript 模式》第七章 中介者模式 的案例。
这里咱们有这么一个游戏例子，规则是两个玩家在规定时间内，比比谁点击按钮次数更多，玩家1按按键2，玩家2按按键0，而且计分板实时更新。

装饰者模式1

这里的中介者须要知道全部其余对象信息，而且它须要知道哪一个玩家点击了一次，随后通知玩家。玩家进行游戏的时候，还要通知中介者它作的事情，中介者更新分数并显示比分。

这里的player对象都是经过Player()构造函数生成，而且都有points和name属性，每次调用play()都会增长1分并通知中介者。

function Player(name){
    this.points = 0;
    this.name   = name;
}
Player.prototype.play = function(){
    this.points += 1;
    mediator.played();
}

计分板有个update()方法，当玩家回合结束就会调用，它不知道任何玩家的信息也没有保存分值，只是实现展现当前分数。

let scoreboard = {
    // 待更新HTML元素
    ele: document.getElementById('result');
    // 更新比分
    update: function (score){
        let msg = '';
        for(let k in score){
            if(score.hasOwnProperty(k)){
                msg = `<p>${k} : ${score[k]}<\/p>`
            }
        }
        this.ele.innerHTML = msg;
    }
}

接下来建立mediator对象：

let mediator = {
    players: {},       // 全部玩家
    setup: function(){ // 初始化
        let players = this.players;
        players.homw = new Player('Home');
        players.guest = new Player('Guest');
    },
    // 当有人玩时 更新分数
    played: function(){
        let players = this.players 
        let score = {
            Home: players.home.points,
            Guest: players.guest.points,
        }
        scoreboard.update(score);
    }
    // 处理用户交互
    keypress: function(e){
        e = e || window.event;  // 兼容IE
        if(e.which === 49){     // 按键1
            mediator.players.home.play();
        }
        if(e.which === 48){     // 按键0
            mediator.players.guest.play();
        }
    }
}

最后就是须要运行和卸载游戏了：

mediator.setup();
window.onkeypress = mediator.keypress;
// 游戏30秒后结束
setTimeout(function(){
    window.onkeypress = null;
    alert('游戏结束');
}, 30000)

9、观察者模式(Observer Patterns)

1.概念介绍

观察者模式(Observer Patterns) 也称订阅/发布（subscriber/publisher）模式，这种模式下，一个对象订阅定一个对象的特定活动，并在状态改变后得到通知。
这里的订阅者称为观察者，而被观察者称为发布者，当一个事件发生，发布者会发布通知全部订阅者，并经常以事件对象形式传递消息。

全部浏览器事件（鼠标悬停，按键等事件）都是该模式的例子。

咱们还能够这么理解：这就跟咱们订阅微信公众号同样，当公众号（发布者）群发一条图文消息给全部粉丝（观察者），而后全部粉丝都会接受到这篇图文消息（事件），这篇图文消息的内容是发布者自定义的（自定义事件），粉丝阅读后可能就会买买买（执行事件）。

2.观察者模式 VS 发布订阅模式

2.1观察者模式

一种一对多的依赖关系，多个观察者对象同时监听一个主题对象。这个主题对象在状态上发生变化时，会通知全部观察者对象，使它们可以自动更新本身。

观察者模式

2.2发布订阅模式

发布订阅模式理念和观察者模式相同，可是处理方式上不一样。
在发布订阅模式中，发布者和订阅者不知道对方的存在，他们经过调度中心串联起来。
订阅者把本身想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（并携带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码。

装饰者模式1

2.3二者异同点

  • 观察者模式中，观察者知道发布者是谁，并发布者保持对观察者进行记录。而发布订阅模式中，发布者和订阅者不知道对方的存在。它们只是经过调度中心进行通讯。
  • 发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
  • 观察者模式大可能是同步，如当事件触发，发布者就会去调用观察者的方法。而发布订阅模式大可能是异步的（使用消息队列）。
  • 观察者模式须要在单个应用程序地址空间中实现，而发布-订阅更像交叉应用模式。

尽管存在差别，但也有人说发布-订阅模式是观察者模式的变异，由于它们概念上类似。

2.4二者优缺点

相同优势：

  • 均可以一对多
  • 程序便于扩展

不一样优势：

  • 观察者模式：单向解耦，发布者不须要清楚订阅者什么时候何地订阅，只须要维护订阅队列，发送消息便可
  • 发布订阅模式：双向解耦，发布者和订阅者都不用清楚对方，所有由订阅中心作处理

缺点：

  • 若是一个被观察者和多个观察者的话，会增长维护的难度，而且会消耗不少时间。
  • 若是观察者和发布者之间有循环依赖，可能会致使循环调用引发系统奔溃。
  • 观察者没法得知观察的目标对象是如何发生变化，只能知道目标对象发生了变化。
  • 发布订阅模式，中心任务太重，一旦崩溃，全部订阅者都会受到影响。

4.基本案例

咱们日常一直使用的给DOM节点绑定事件，也是观察者模式的案例：

document.body.addEventListener('click', function(){
    alert('ok');
},false);
document.body.click();

这里咱们订阅了document.body的click事件，当body点击它就向订阅者发送消息，就会弹框ok。咱们也能够添加不少的订阅。

4.观察者模式 案例

本案例来自 javascript 观察者模式和发布订阅模式。

class Dom {
    constructor() {
        // 订阅事件的观察者
        this.events = {}
    }

    /**
    * 添加事件的观察者
    * @param {String} event  订阅的事件
    * @param {Function} callback 回调函数(观察者)
    */
    addEventListener(event, callback) {
        if (!this.events[event]) {
            this.events[event] = []
        }
        this.events[event].push(callback)
    }

    removeEventListener(event, callback) {
        if (!this.events[event]) {
            return
        }
        const callbackList = this.events[event]
        const index = callbackList.indexOf(callback)
            if (index > -1) {
            callbackList.splice(index, 1)
        }
    }

    /**
    * 触发事件
    * @param {String} event
    */
    fireEvent(event) {
        if (!this.events[event]) {
            return
        }
        this.events[event].forEach(callback => {
            callback()
        })
    }
}

const handler = () => {
    console.log('fire click')
}
const dom = new Dom()

dom.addEventListener('click', handler)
dom.addEventListener('move', function() {
    console.log('fire click2')
})
dom.fireEvent('click')

5.发布订阅模式 案例

本案例来自 javascript 观察者模式和发布订阅模式。

class EventChannel {
    constructor() {
        // 主题
        this.subjects = {}
    }

    hasSubject(subject) {
        return this.subjects[subject] ? true : false
    }

    /**
    * 订阅的主题
    * @param {String} subject 主题
    * @param {Function} callback 订阅者
    */
    on(subject, callback) {
        if (!this.hasSubject(subject)) {
            this.subjects[subject] = []
        }
        this.subjects[subject].push(callback)
    }

    /**
    * 取消订阅
    */
    off(subject, callback) {
        if (!this.hasSubject(subject)) {
            return
        }
        const callbackList = this.subjects[subject]
        const index = callbackList.indexOf(callback)
        if (index > -1) {
            callbackList.splice(index, 1)
        }
    }

    /**
    * 发布主题
    * @param {String} subject 主题
    * @param {Argument} data 参数
    */
    emit(subject, ...data) {
        if (!this.hasSubject(subject)) {
            return
        }
        this.subjects[subject].forEach(callback => {
            callback(...data)
        })
    }
}

const channel = new EventChannel()

channel.on('update', function(data) {
    console.log(`update value: ${data}`)
})
channel.emit('update', 123)

参考资料

  1. 《JavaScript Patterns》
Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787...
JS小册 js.pingan8787.com
微信公众号 前端自习课

前端自习课

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程