前端设计模式应用与web标准与前端开发 | 青训营笔记

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

推荐《设计模式》

设计模式的存在目的

1. 它是解决特定问题的一系列套路，是前辈们的代码设计经验的总结，具有一定的普遍性，可以反复使用。

2. 其目的是提高代码的可复用性、可读性、可维护性。

3. 设计模式的本质是面向对象设计原则的实际运用，是对类的封装性、继承性和多态性以及类的关联关系和组合关系的充分理解。

十大设计原则

• 单一职责原则 SRP —— 一段代码块只应该负责一个职责
• 开放-封闭原则 OCP —— 避免修改老代码来实现新功能，开放新代码块来实现新功能
• 里氏替换原则 LSP —— 子类尽量不要改变父类方法的预期行为
• 接口隔离原则 ISP —— 对接口进行拆分
• 依赖倒置原则 DIP —— 依赖于抽象接口，而不是具体的接口实现类或具体的对象

（以上为5大设计原则）

• 最少知识原则/迪米特原则 LOD —— 降低耦合度
• 组合/聚合复用原则 CRP —— 多用组合少用继承
• 不要重复你自己 DRY
• 尽量保持简单 KISS
• 不要过度设计你暂时用不到的逻辑 YAGNI

23种设计模式

5种创建型——如何创建一个对象

7种结构型——如何灵活的将对象组装成较大的结构

11种行为型——负责对象间的高效通信和职责划分

浏览器的设计模式

浏览器的设计模式	单例模式	发布订阅模式 / 观察者模式
定义	全局唯一访问对象 window	一种阅读机制可在被订阅对象发生变化时通知订阅者
应用场景	缓存，全局状态管理等	系统架构之间的解耦业务中一些实现模式，像邮件订阅，上线订阅

JavaScript中的设计模式

JavaScript中的设计模式	原型模式	代理模式	迭代器模式
定义	复制已有对象来创建新的对象	可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理	在不暴露数据类型的情况下访问集合中的数据
应用场景	JS中对象创建的基本模式	监控 代码工具 前端框架实现等等	数据结构中有多种数据类型，列表，树等，提供通用操作接口

前端框架中设计模式

前端框架中设计模式	代理模式	组合模式
定义		可多个对象组合使用，也可单独
应用场景		DOM，前端组件，文件目录，部门

关于前端开发

框架

关于web标准

标准组织

• W3C
• Ecma
• WHATWG
• IETF

部分参考：设计模式这样学也太简单了吧！ - 掘金 (juejin.cn)