开启掘金成长之旅！这是我参与「掘金日新计划 · 2更文挑战」的第5天点击查看活动详情

前言

前端的设计模式是多样的，在实际的业务场景中需要不同的设计模式来贴合需求，今天就简单的介绍下前端常见的几种设计模式。

九种设计模式

外观模式（Facade Pattern）
代理模式（Proxy Pattern）
工厂模式（Factory Pattern）
单例模式（Singleton Pattern）
策略模式（Strategy Pattern）
迭代器模式（Iterator Pattern）
观察者模式（Observer Pattern）
中介者模式（Mediator Pattern）
访问者模式（Visitor Pattern）

什么是设计模式

网上的说法： 设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。

大白话说法：

就是别人总结的一套经验，你用它来进行一套完整的代码编写，编写的代码是可读性高的，是比较规范的。

设计原则

单一职责原则：一个程序只做好一件事如果功能过于复杂就拆分开，每个部分保持独立
开放/封闭原则：对扩展开放，对修改封闭增加需求时，扩展新代码，而非修改已有代码
里氏替换原则：子类能覆盖父类父类能出现的地方子类就能出现
接口隔离原则：保持接口的单一独立类似单一职责原则，这里更关注接口
依赖倒转原则：面向接口编程，依赖于抽象而不依赖于具使用方只关注接口而不关注具体类的实现

1、常见的观察者模式（vue)

观察者模式又称发布-订阅模式（是不是和我们用到的vue框架一样，也是这个模式），是我们经常接触到的设计模式，日常生活中也是随处可见，比如你刷抖音时关注了某个主播，当主播开播或者有新的作品发布时抖音就会给你发消息提示。观察者模式的思想用一句话描述就是：被观察对象（subject）维护一组观察者（observer），当被观察对象状态改变时，通过调用观察者的某个方法将这些变化通知到观察者。

场景：你去刷都抖音，然后你刷到了美食主播呜啦啦，你关注了他，你就是观察者，呜啦啦就是被观察者。

// 观察者 （路人）
 class Observer {
     constructor(name) {
         this.name = name;
     }
     update(info) {
         // 只有点关注了，我更新视频时才会发消息通知你
         if (info.notifyType === 'add') {
             this.remindArrival(info.goodName);
         } else if (info.notifyType === 'cancel') {
             console.log(`取关了，别来烦人`);
         } else {
             console.log(`啥事没有`);
         }
     }
     // 到货提醒
     remindArrival(info) {
         console.log(`亲爱的${this.name}，我来到了河南郑州，今日打卡河南烩面，美的很！`);
     }
 }

// 被观察者：呜啦啦
class Subject {
    constructor() {
        //定义观察者列表，将观察事件一一的放进去，你不但可以观察呜啦啦，还可以观察美女啊，嘿嘿嘿
        this.observerList = [];
    }
    // 订阅 ( 点点关注不迷路，你懂的）
    subscribe(observer) {
        observer.notifyType = 'add';
        this.observerList.push(observer);
    }
    // 取消订阅（相当于我不喜欢这个主播了，我取消关注了，以后有啥事别给我说，烦。)
    unsubscribe(observerRemove) {
        observerRemove.notifyType = 'cancel';
        this.observerList.push(observerRemove);
    }
    nonotice(nothing){
        nothing.notifyType='no';
        this.observerList.push(nothing);
    }
    // 视频更新，通知到粉丝，希望粉丝进行查看然后再点点赞
    notice(good) {
        this.observerList.forEach(observer => {
            let obj = {
                ...good,
                ...observer,
            };
            observer.update(obj);//作相对应的事件回调，通知事件是做出相对应的安排,
        });
    }
}

//一切就绪，开始刷抖音进行关注主播了
const subject = new Subject();
const obsA = new Observer('路人A');
const obsB = new Observer('路人B');

// obsA obsB 添加了消息提醒
subject.subscribe(obsA);
subject.subscribe(obsB);


// （呜啦啦完成了一个新的视频）
const  infor = {
    inforname: '今日打卡：河南烩面',
};

// 通知粉丝我更新视频了
subject.notice(infor);

如果工作不忙，后期就每天更新一种设计模式，路过的大哥大姐点点赞吧，小弟就想升个级

前端框架的设计模式（一）

前言

九种设计模式

什么是设计模式

设计原则

1、常见的观察者模式（vue)