前端设计模式应用|青训营笔记

99 阅读2分钟

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

什么是设计模式?

  • 对软件设计开发过程中反复出现的某类问题的通用解决方案。
    --历史经验的总结        --与特定语言无关

设计模式的背景?

    1. 模式语言:城镇 , 建筑 , 建造。
    2. 设计模式:可复用面向对象软件的基础。

设计模式的趋势

  • sc5.png

设计模式的分类

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

浏览器中的设计模式

  1. 单例模式

    定义:全局唯一访问对象
    应用场景: 缓存,全局状态管理等。

  • sc6.jpg 2.发布订阅模式

    定义:一种订阅机制。可在被订阅对象发生变化时通知订阅者。 应用场景: 从系统架构之间的解耦,到业务中一些实现模式,像邮件订阅,线上订阅等等。应用广泛。

  • sc7.jpg

javascript的设计模式

  •    1. 原型模式  
      2. 代理模式  
      3. 迭代器模式
    

原型模式

  •    > 定义:复制已有对象创建新的对象 
            > 应用场景:js对象创建的基本模式。
    
  • sc8.png

代理模式

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

迭代器模式

  •    > 定义:在不暴露数据类型的情况下访问集合中的数据 
            > 应用场景:数据结构中有多种数据类型,列表,树等,提供通用操作接口
    

    用for of 迭代所有组件

  • sc10.png

前端框架中的的设计模式

  • 代理模式
  • 组合模式

感谢.阅读