前端设计模式
概述
设计模式是指软件设计中常见问题的解决方案模型，它是历史经验的总结，与特定语言无关。
最早的软件领域的书籍：设计模式：可复用面向对象软件的基础
分为23种设计模式：
- 创建型：如何创建一个对象
- 结构型：如何灵活的将对象组装成较大的结构
- 行为型：负责对象间的高效通信和职责划分
浏览器中的设计模式
- 单例模式
- 定义：全局唯一访问对象（如window）
- 应用场景：缓存，全局状态管理等。
用单例模式实现请求缓存
这个是在JS中可以实现的更简单的逻辑，用键值对来缓存
- 发布订阅模式
- 定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。
- 应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。
用发布订阅模式实现用户上线订阅
JavaScript中的设计模式
- 原型模式
- 定义：复制已有对象来创建新的对象
- 应用场景：JS中对象创建的基本模式
用原型模式创建上线订阅中的用户
- 代理模式
- 定义：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理
- 应用场景：监控，代理工具，前端框架实现等等
使用代理模式实现用户状态订阅
把用户上线单独提出来了，不再在用户上线的时候进行订阅用户的通知
把上线通知这件事写到代理里面
- 迭代器模式
- 定义：在不暴露数据类型的情况下访问集合中的数据
- 应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口
用 for of 迭代所有组件
前端框架中的设计模式
- 代理模式
Vue组件实现计数器
使用Proxy来实现页面DOM的更新
原先：更改DOM属性→视图更新
Vue：更改DOM属性→更新虚拟DOM→（diff）视图更新
- 组合模式
- 定义：可多个对象组合使用，可也单个对象独立使用
- 应用场景：DOM，前端组件，文件目录，部门
React 的组件结构
根据修改数据的队列来实现主动更新，代理DOM
小结
- 设计模式不是银弹，并不能解决所有问题
- 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难
- 现代编程语言的多编程范式带来的更多可能性（函数式、响应式编程）
- 真正优秀的开源项目学习设计模式并不断实践（优化代码的设计）
前端调试
Bug 与Debug
Bug的产生
First bug： First actual case of bug being found first actual c being found
Bug or Feature： That's not a bug, it's a feature request.
Node Code, No Bug： If debugging is the process of removing software bugs, then programming must be the process of putting them in.
前端Debug的特点
- 多平台： 浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境： 本地开发环境、线上环境
- 多工具： Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole 等
- 多技巧： Console、BreakPoint、sourceMap、代理等
Chrome DevTools
动态修改元素和样式
Console
这里有一些平时比较少用但实用的
如console.table，打印JSON数据时可以以表格形式呈现，更清晰。
如console.dir，可以更好的去看到DOM内属性的信息。
Sorce Tab
这里可以查看页面的源代码。
Break Point 与Watch
Scope 与 Call Stack
压缩后的代码如何调试？
前端代码天生具有“开源”属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、b' 等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？
可以配置Source Map来找到对应的源码，它的文件会比源码大，一般会把带source map的js放到监控平台，线上运行时部署的代码不带source map文件（删除），在错误监控程序中可以对照到文件源码。
开启和关闭通过在webpack.prod.js中配置devtool:'source-map'来实现
NetWork
Application
Performance
Google官方测试地址：googlechrome.github.io/devtools-sa…
解决思路：页面卡顿→查看FPS指标→寻找性能瓶颈→优化代码
这个官方测试页面的性能问题主要在于反复读取offsetTop导致页面重排，点击优化后代码会只读取一次offsetTop值
Lighthouse
可以帮助我们衡量页面的加载指标。
移动端H5调试
真机调试
iOS（没有iPhone 设备可以在Mac App Store 安装Xcode 使用内置的 iOS 模拟器）
- 使用Lightning 数线将 iPhone 与 Mac 相连
- iPhone 开启Web 检查器（设置 -> Safari -> 高级 -> 开启Web检查器）
- iPhone 使用Safari 浏览器打开要调的页面
- Mac 打开Safari 浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
- 在弹出的Safari Developer Tools中调试
Android（直接使用手机扫码查看，体验更佳）
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入：chrome:/inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect 按钮
- 进入调试界面
VConsole
可以在页面内注入这个组件来查看页面的console控制台
- 日志(Logs)：console.log | info | error | ...
- 网络(Network)：XMLHttpRequest, Fetch, sendBeacon
- 节点(Element)：HTML节点树
- 存储(Storage)：Cookies, LocalStorage, SessionStorage
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
原理
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例：（默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。）
- 安装 Charles
- 查看电脑IP和端口
- 将 IP、端口号填入手机 HTTP 代理
- Charles 允许授权
- 使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
- 手机访问开发环境页面
常用代理工具
NodeJS调试
Inspector Protocol + Chrome Devtool
Inspector Protocol + VS Code
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
常用开发调试技巧
线上即时修改Overrides
可以在Sources-Overrides里面授权本地地址，让修改可以同步发生在本地。
- 打开 Sources 面板下的的Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在 page 中修改代码，修改完成后 command + s 保存
- 打开 devTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了
利用代理解决开发阶段的跨域问题
用任何一种方式配置好代理服务器来解决跨域问题。
部署到线上后，一般使用nginx配置代理来解决跨域问题。
启用本地 source map
线上不存在 Source Map 时可以使用 Map Local 网络映射 功能来访问本地的 SourceMap 文件。
使用代理工具Mock数据
- 右键选中要 mock 数据的接口，选择 save response ,保存文件到本地。
- 本地打开保存的文件，编辑想 mock 的数据并保存。
- 右键选中第一步的接口，选择Map Local, Local Path 选择第二步的文件。
小黄鸭调试大法
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。——《程序员修炼之道》
