这是我参与「第四届青训营 」笔记创作活动的第3天

前端设计模式应用

什么是设计模式

• 历史经验的总结
• 解决方案的模型

设计模式分类

• 创建型 - 如何创建一个对象
• 结构型 - 如何灵活地将对象组成较大的结构
• 行为型 - 负责对象间的高效通信和职责划分

浏览器中的设计模式

• 单例模式
• 发布订阅模式

单例模式

• 全局唯一访问对象
• 应用于缓存、全局状态管理等状况

发布订阅模式

• 可在被订阅对象发生变化时通知订阅者的订阅机制
• 应用于系统架构之间的截稿到业务中的一些实现模式

Javascript

• 原型模式
• 代理模式
• 迭代器模式

原型模式

• 复制已有对象来创建新的对象
• JS中对象创建的基本模式
• 用原型模式创建上线订阅中的用户

const baseUser: User = {
    name: ""
    status: "offline"
    followers: []

    subscribe(user, notify) {
        user.followers.push({ user, notify });
    },
    online() {
        this.status = "online";

        this.followers.forEach(({ notify }) -> {
            notify(this);
        });
    },
};

export const createUser = (name: string)-> {
    const user: User = Object.create(baseUser);

    user.name = name;
    user.followers = [];

    return user;
}

代理模式

• 可自定义控制原对象的访问方式，并且允许在更新前后做一些额外处理
• 应用于监控、代理工具、前端框架实现等等

迭代器模式

• 在不暴露数据类型的情况下访问集合中的数据
• 应用于数据结构中有多种数据类型、列表、树等情况，提供通用操作接口

前端框架中的设计模式

• 代理模式
• 组合模式

Vue组件实现计数器

<template>
    <button @click="count++">count is :{{count}}</button>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    const count = ref(0);
</script>

组合模式

• 可多个对象组合使用，也可以单个对象独立使用
• 应用于DOM、前端组件、文件目录等

PS：本笔记为本人课程过程中的记录与部分思考，仅供参考，欢迎友好交流。