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

软件设计中常见问题的解决方案模型

• 历史经验的总结
• 与特定语言无关

1.模式语言:城镇、建筑、建造

2.设计模式:可复用面向对象软件的基础

设计模式的趋势

23种设计模式

设计模式大致分为23种设计模式

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

浏览器中的设计模式

• 单例模式

  定义：全局唯一访问对象

  应用场景：常用于缓存与全局状态管理等

• 发布订阅模式

  定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。

  应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等， 应用广泛。

JavaScript中的设计模式

• 原型模式

  就是复制一个已有的对象来创建新的对象

  常用于js中对象的创建

• 代理模式

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

• 迭代器模式

  在不暴露数据类型的情况下访问集合中的数据

  常用于数据结构中拥有多种数据类型（列表、 树等），提供通用的操作接口。

前端框架中的设计模式

（一）代理模式

Vue组件实现计数器

<template>
	<button @click="count++">count is:{{ count }}</button>
</template>
<script setup lang="ts">
import {ref} from "vue";
const count = ref(0);
</script>

<template>
	<button @click="count++">count is:{{ count }}</button>
</template>
<script setup lang="ts">
import { ref, onBeforeUpdate, onUpdated } from "vue";
const count = ref(0);
const dom = ref<HTMLButtonElement>();
onBeforeUpdate(() => {
    console.log("Dom before update", dom.value?.innerText);
});
onUpdated(() => {
    console.log("Dom after update", dom.value?.innerText);
});
</script>

（二）组合模式

可以多个对象组合使用，也可以单个对象独立使用

常应用于DOM,文件目录，部门，前端组件，最经典的就是React的组件结构：

使用组件模式实现一个文件夹结构

• 每个文件夹可以包含文件和文件夹

• 文件有大小

• 可获取每个文件夹下文件的整体大小

总结：

这节课讲了浏览器和js中常用的设计模式，包括单例模式、观察者模式、原型模式、代理模式、迭代器模式等，还讲了设计模式究竟有什么用~在我看来，从实际的项目中学习设计模式确实是一种比较好的方法。