前端设计模式应用
什么是设计模式
软件设计中常见问题的解决方案模型:
- 历史经验的总结
- 与特定语言无关
设计模式背景
- 模式语言:城镇、建筑、建造 (A Pattern Language:Towns, Buildings,Construction)1977
- 设计模式:可复用面向对象软件的基础 (Design Patterns: Elements of
ReusableObject-Oriented Software)1994
设计模式趋势
设计模式分类
23种设计模式
- 创建型-如何创建一个对象
- 结构型-如何灵活的将对象组装成较大的结构
- 行为型-负责对象间的高效通信和职责划分
浏览器中的设计模式
单例模式
定义:
全局唯一访问对象
应用场景:
缓存, 全局状态管理等。
单例模式请求缓存
//定义api,500m后返回
import { api } from”./utils" ;
export cLass Requset {//定义请求实例
static instance: Requset;//定义缓存
private cache: Recordestring, string>;
constructor() {//初始化缓存内容
this.cache = {};
}
static getInstance() {
if ( this. instance) {
return this. instance;
}
this. instance = new Requset();
return this. instance;
}
pubLic async request(url: string) {
if (this . cache[urU]){
return this . cache[urL];
}
const response = await api(urL);
this . cache[urL] = response;
return response;
}
}
test("should response more than 500ms with class", async () = {
const request = Requset. getInstance();
const startTime = Date . now();
await request . request(" /user/1");
const endTime = Date. now();
const costTime = endTime - startTime;
expect ( costTime) . toBeGreaterThanOrEquaL(500);
});
test("should response quickly second time with class", async () = {
const request1 = Requset . getInstance();
await request1 . request(" /user/1");
const startTime = Date now();
const request2 = Requset . getInstance();
await request2 . request(" /user/1");
const endTime = Date . now();
const costTime = endTime - startTime;
expect ( costTime) . toBeLessThan(50);
});
import { api } from "./utils";
const cache: Record<string, string> = {};
export const request = async (urT: string) →{
if (cache[urL]) {
return cache[urL];
}
const response = await api(urL);
cache[urL] = response;
return response;
};
test(" should response quickly second time", async 0) = {
await request(" /user/1");
const startTime = Date. now() ;
await request(" /user/1");
const endTime = Date. now() ;
const costTime = endTime - startTime;
expect (costTime) . toBeLessThan(50) ;
});
发布订阅模式
定义:
一种订阅机制, 可在被订阅对象发生变化 时通知订阅者。
应用场景:
从系统架构之间的解耦,到业务中一-些实 现模式,像邮件订阅,上线订阅等等,应用广泛。
type Notify = (user: User) => void;
export class User {
name: string;
status: "offline" | "online";
// user 订阅自己的人,notify 上线时的通知函数
followers: { user: User; notify: Notify }[];
constructor(name: string) {
this.name = name;
this.status = "offline";
this.followers = [];
}
// 订阅参数中的 user
subscribe(user: User, notify: Notify) {
user.followers.push({ user, notify });
}
// 上线
online() {
// 状态改为 online
this.status = "online";
// 通知所有订阅自己的人
this.followers.forEach(({ notify }) => {
notify(this);
});
}
}
test("should notify followers when user is online for multiple users", () => {
// 创建三个用户
const user1 = new User("user1");
const user2 = new User("user2");
const user3 = new User("user3");
// 通知 user1 和 user2 的函数
const mockNotifyUser1 = jest.fn();
const mockNotifyUser2 = jest.fn();
// user1 订阅了 user3 的上线,传入通知 user1 的函数
user1.subscribe(user3, mockNotifyUser1);
user2.subscribe(user3, mockNotifyUser2);
// user3 上线
user3.online();
// user3 会调用通知 user1 的函数
expect(mockNotifyUser1).toBeCalledWith(user3);
expect(mockNotifyUser2).toBeCalledWith(user3);
});
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) => {
// Object.create(obj) 会根据已有的对象返回一个新的对象
// baseUser 是原型,与新创建的对象是继承关系
const user: User = Object.create(baseUser);
user.name = name;
user.followers = [];
return user;
};
test("should notify followers when user is online for multiple users", () => {
const user1 = createUser("user1");
const user2 = createUser("user2");
const user3 = createUser("user3");
const mockNotifyUser1 = jest.fn();
const mockNotifyUser2 = jest.fn();
user1.subscribe(user3, mockNotifyUser1);
user2.subscribe(user3, mockNotifyUser2);
user3.online();
expect(mockNotifyUser1).toBeCalledWith(user3);
expect(mockNotifyUser2).toBeCalledWith(user3);
});
代理模式
定义:
可以自定义控制对原对象的访问方式,并且允许在更新后做一些额外处理
应用场景:
监控,代理工具,前端框架实现
用代理模式实现用户状态订阅
type Notify = (user: User) => void;
export class User {
name: string;
status: "offline" | "online";
followers: { user: User; notify: Notify }[];
constructor(name: string) {
this.name = name;
this.status = "offline"; this.followers = [];
}
subscribe(user: User, notify: Notify) {
user.followers.push({ user, notify });
}
// 添加新功能时,代码不好维护
// online() {
// this.status = "online";
// this.followers.forEach(({ notify }) => {
// notify(this);
// });
// }
// online 只做上线一件事情,单一职责原则
online() {
this.status = 'online'
}
}
// 实现通知
export const createProxyUser = (name: string) => {
const user = new User(name);
// 使用 new Proxy() 实现代理
const proxyUser = new Proxy(user, {
set: (target, prop: keyof User, value) => {
target[prop] = value;
if (prop === "status") {
notifyStatusHandlers(target, value);
}
return true;
},
});
const notifyStatusHandlers = (user: User, status: "online" | "offline") => {
if (status === "online") {
user.followers.forEach(({ notify }) => {
notify(user);
});
}
};
return proxyUser;
};
迭代器模式
定义:
在不暴露数据类型的情况下访问集合的数据
应用场景:
数据结构中有多种数据类型,列表,树等,提供通用的操作接口
用 for of 迭代所有组件
// 浏览器中的 DOM 结构
class MyDomElement {
tag: string;
children: MyDomElement[];
constructor(tag: string) {
this.tag = tag;
this.children = [];
}
addChildren(component: MyDomElement) {
this.children.push(component);
}
// 使组件可迭代
[Symbol.iterator]() {
const list = [...this.children];
let node;
return {
// for...of 迭代时调用的函数
next: () => {
while ((node = list.shift())) {
// 层序遍历
node.children.length > 0 && list.push(...node.children);
// value 是迭代出的值,done 是指迭代是否完成
return { value: node, done: false };
}
return { value: null, done: true };
},
};
}
}
test("can iterate root element", () => {
const body = new MyDomElement("body");
const header = new MyDomElement("header");
const main = new MyDomElement("main");
const banner = new MyDomElement("banner");
const content = new MyDomElement("content");
const footer = new MyDomElement("footer");
body.addChildren(header);
body.addChildren(main);
body.addChildren(footer);
main.addChildren(banner);
main.addChildren(content);
const expectTags: string[] = [];
for (const element of body) {
if (element) {
expectTags.push(element.tag);
}
}
expect(expectTags.length).toBe(5);
});
前端框架中的设计模式
Vue 组件实现计数器
<template>
<button @click="count++">count is: {{ count }}</button>
</template>
<script setup lang="ts">
import { ref } from "vue ";
const count = ref(0);
</script>
没有框架之前,我们通过监听 click 事件,通过 innerText 手动改变 DOM 的属性。前端框架对 DOM 操作进行代理,模板中的 DOM 都是 Proxy 代理后的虚拟 DOM,我们的操作的 DOM 是虚拟 DOM,之后通过 Diff 对视图更新。
组合模式
定义:
可多个对象组合使用成为一个单独的对象,也可以单个对象独立使用
应用场景:
DOM,前端组件,文件目录
React 的组件结构
export const Count = () => {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount((count) => count + 1)} >
count is: {count}
</button >
);
};
function App() {
return (
<div className="App">
<Header />
<Count />
<Footer />
</div>
);
}
总结
设计模式不是银弹。
- 总结出抽象的设计模式比较简单,但是套用到场景中却非常困难。
- 现代编程语言的多编程范式能带来更多的可能性。
- 要从真正优秀的开源项目中学习设计模式并不断实现。