这是我参与「第四届青训营」笔记创作活动的第4天
前端设计模式应用
什么是设计模式？
软件设计中常见问题的解决方案模型
- 是历史经验的总结
- 与特定语言无关，是一定的模式、思想、想法
设计模式背景
- 模式语言：城镇、建筑、建造
- 设计模式：可复用面向对象软件的基础
设计模式分类
23种设计模式，可以分为三大类：
- 创建型 - 如何创建一个对象
- 结构型 - 如何灵活的将对象组装成较大的结构
- 行为型 - 负责对象间的高效通信的职责划分
浏览器中的设计模式
- 单例模式
- 发布订阅模式
1、单例模式
定义：全局唯一访问对象
应用场景：缓存，全局状态管理等
用单例模式实现请求缓存
优点：
1、内存里只有一个实例，减少了内存的开销。
2、避免对资源的多重占用。
缺点：
没有接口，不能继承。
2、发布订阅模式
定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。
应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。
用发布订阅模式实现用户上线订阅
优点：
耦合性低，便于代码的维护
缺点：
会消耗一定的时间和内存
Javascript中的设计模式
- 原型模式
- 代理模式
- 迭代器模式
1、原型模式
定义：复制已有对象 来创建新的对象
应用场景：JS中对象创建的基本模式
用原型模式创建上线订阅中的用户
2、代理模式
定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
应用场景：监控、代理工具、前端框架实现等等
使用代理模式实现用户状态订阅优化
3、迭代器模式
定义：在不暴露数据类型的情况下访问集合中的数据
应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口
用 for of 迭代所有组件
前端框架中的设计模式
- 代理模式
- 组合模式
Vue组件实现计数器
<template>
<button @click="count++">count is: {{ count }}</button>
</template>
<script setup lang="ts">
import { ref } from "vue ";
const count = ref(0);
</script>
前端框架中对DOM操作的代理
更改DOM属性 -------> 视图更新
更改DOM属性 -------> 更新虚拟DOM ---(Diff)----> 视图更新
组合模式
定义：可多个对象组合使用，也可单个对象独立使用
应用场景：DOM，前端组件，文件目录，部门
Web标准与前端开发
01. 关于前端开发
起源、架构、变迁
起源：Tim Berners-Lee,inventor of the World Wide Web.
架构：1989年诞生时，Web由三种技术构成：HTML、HTTP、URL。CSS和JavaScript几年之后才出现。
变迁：只读时代（1989-2004）HTML/CSS/JavaScript：单向发布，静态只读，链接跳转，刷新页面，表格对齐元素，CGI
体验时代（2005-2010）Ajax/Web API/jQuery：动态交互，社交媒体，用户生成内容（UGC），单页应用（SPA），jQuery，YUI
敏捷时代（2010-2021）Fetch/Node.js/Webpack：模块化，组件化，转译，打包，React.js，Vue.js
前端应用的领域
To Business：面向大的组织、机构
To Customer：电商平台、在线教育等
To Developer：VSCode
前端应用的领域之浏览器
Desktop：Chrome、Edge、Firefox、Opera、Safari
Mobile：Android、IOS
前端应用的领域之服务器
node.js、Express.js、koa、deno
前端应用的领域之终端和跨端
命令行/终端：Webpack CLI、Babel CLI、Vue CLI、React CLI
桌面跨端：Electron、NW.js
移动跨端：React Native、Flutter
语言、框架、工具
语言：HMTL、CSS、JS、WebAssembly
框架：node.js、koa、React、Vue、TypeSCript、git、BABEL、webpack、esbuild
工具：浏览器、网络、服务器
02. 关于Web标准
- 了解Web标准组织
- W3C规范流程
- 为什么需要Web标准
Web标准组织
W3C Ecma WHATWG IETF
W3C规范的正式出台需要经过以下七个步骤：
1)Submission
我们平常向会议或者杂志投递论文叫“paper submission"，这里也一样。submission指由W3C member向www consortium投递自己的一个建议。w3c有可能决定不接收这个建议。
2）Notes
如果IBM向W3C提了一个submission，而且w3c没有拒绝这个submission，那么它就进入Note阶段。Note的内容由IBM进行编辑修改，W3C是不管的。发表Note的时候，表示W3C还没有开始和这个submission有关的任何工作。
3）Working Groups
Notes被W3C认可后，W3C会成立一个Working Group。Group包括W3C member和有兴趣的外界团队和个人。
4）Working Draft
Draft会在w3c的站点上公布，并邀请公共的评论和意见。Working Draft一般不应该作为参考的资料，因为它还会经过大量的修改/更新，而且可能随时被废弃。比如现在WSDL2.0就还在Working Draft阶段，还会经过大量的修改。
5）Candidate Recommendations
这个阶段是可选的，依据论题的复杂程度而定。它一般不应该作为参考的资料，因为它还会经过大量的修改/更新，而且可能随时被废弃。
6）Proposed Recommendations
Proposed Recommendations是Working Groups工作的最后一个阶段。它有被继续修改的可能，但一般情况下，它很可能马上不做改动地成为w3c的recommendation.
7)Recommendation
Proposed Recommendations经过了w3c member的检查和w3c的主席的盖章后，成为 w3c recommendation。它一般是一个稳定的规范，可以作为参考资料进行学习。
原文链接
为什么需要Web标准
对于浏览器开发商和 Web 程序开发人员在开发新的应用程序时遵守指定的标准更有利于 Web 更好地发展。开发人员按照 Web 标准制作网页，这样对于开发者来说就更加简单了，因为他们可以很容易了解彼此的编码。使用Web标准，将确保所有浏览器正确显示您的网站而无需费时重写。遵守标准的Web页面可以使得搜索引擎更容易访问并收入网页，也可以更容易转换为其他格式，并更易于访问程序代码（如JavaScript和DOM）。提示：你可以使用网页验证服务器验证页面的标准性。
简单的来说Web标准好处拥有以下几点:
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
总结
设计模式不是银弹
设计模式并不能解决所有问题
- 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
- 现代编程语言的多编程范式带来的更多可能性
- 真正优秀的开源项目学习设计模式并不断实践
通过对设计模式进行了解和学习后，对我理解前端框架有很大的帮助，但在实践中适合当下场景的代码还需自己探索和总结。
