前端设计模式 ｜ 青训营笔记

Sonui
64 阅读3分钟

前端设计模式 ｜ 青训营笔记

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

感觉这节课没那么易于理解, 例子较为生硬

结合这篇文章学习 设计模式这样学也太简单了吧！

定义

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

  • 历史经验的总结
  • 与特定语言无关
  • 不是特定的实现方法

发展背景

  1. 模式语言

城镇、建筑、建造

  1. 设计模式

可复用面向对象软件的基础

23种设计模式

分为三类

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

浏览器中的设计模式

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

单例模式

定义

全局唯一访问对象，例如window、document等对象

应用场景

缓存，全局状态管理等。

实例

import { api } from "./utils";
export class Requset {
    // 单例模式
    static instance: Requset;
    private cache: Record<string, 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[url]) {
            return this.cache[url];
        }
        const response = await api(url);
        this.cache[url] = response;
        return response;
    }
}

发布订阅模式

定义

一种订阅机制, 可在被订阅对象发生变化时通知订阅者

应用场景

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

与观察者模式的区别是发布订阅模式有调度中心而观察者模式没有

实例

const button = document.getElementById("button");

const doSomeThing1 = () => {
    console.log("do some thing1");
}

const doSomeThing2 = () => {
    console.log("do some thing2");
}

button.addEventListener("click", doSomeThing1);
button.addEventListener("click", doSomeThing2);

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 = Object.create(baseUser);
    user.name = name;
    user.followers = [];
    return user;
}

代理模式

定义

可自定义控制对原对象的访问方式, 并允许在更新前后做一些额外处理

应用场景

监控, 代理工具, 前端框架实现等等

实例

export const createProxyUser = (name: string) => {
    const user = new User(name);

    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;
}

迭代器模式

定义

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

应用场景

数据结构中有多种数据类型, 列表, 树等, 提供通用操作接口

前端框架中的设计模式

代理

原生

graph LR

A[更改DOM属性]-->B[视图更新]

使用代理

graph LR

A[更改DOM属性]-->B[更新虚拟DOM]-->|Diff|C[视图更新]

优点

  • 避免频繁更新视图
  • 可以控制视图的更新频率
  • 只小部分更改视图

组合

定义

可对多个对象组合使用, 也可单个对象单独使用

应用场景

DOM, 前端组件, 文件目录, 部门

React的组件结构

// count.js
export const Count = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
}

// app.js

function App() {
    return (
        <div>
            <Head />
            <Count />
            <Foot />
        </div>
    );
}
avatar
文章
阅读
粉丝