前端设计模式应用｜ 青训营

就叫白膏叭
51 阅读3分钟

什么是设计模式

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

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

设计模式背景

  1. 模式语言：城镇、建筑、建造（A Pattern Language:Towns,Buildings,Construction） 1997
  2. 设计模式：可复用面向对象软件的基础(Design Partterns:Elements of Reusable Object-Oriented Software) 1994

设计模式分类

23种设计模式

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

浏览器中的设计模式

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

单例模式

定义

全局唯一访问对象

应用场景

缓存，全局状态管理等

发布订阅模式

定义

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

应用场景

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

JavaScript中的设计模式

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

原型模式

定义

复制已有对象来创建新的对象

应用场景

JS中对象创建的基本模式

代理模式

定义

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

应用场景

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

使用代理模式实现用户状态订阅

缺点：不太好维护

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(({nofity})=>{
       notify(this);
    });
  }
}

优化：

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(({nofity})=>{
        notify(user);
      });
    }
  };
  
  return proxyUser;
}

迭代器模式

定义

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

场景

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

用for of 迭代所有组件
class MyDomElement{
  tag:string;
  children:MyDomEltment[];
  constructor(tag:string){
    this.tag=tag;
    this.children=[];
  }
  
  addChildren(component:MyDomElement){
    this.children.push(component);
  }
  [Symbol.iterator](){
    const list=[...this.children];
    let node;
    
    return {
      next:()=>{
        while((node=list.shift())){
          node.children.length>0&&list.push(...node.children);
          
          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>

组合模式

定义

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

应用场景

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

React的组件结构

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

总结

设计模式不是银弹

  • 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
  • 现代编程语言的多编程范式带来的更多可能性
  • 真正优秀的开源项目学习高度模式并不断实现
avatar
文章
阅读
粉丝