Vue3+TS+Node打造个人博客（前端架构）

本项目代码已开源，具体见：

前端工程：vue3-ts-blog-frontend

后端工程：express-blog-backend

数据库初始化脚本：关注公众号程序员白彬，回复关键字“博客数据库脚本”，即可获取。

前言

本文始于2022年12月，目录里规划了这么一篇，算是给自己挖的坑，对于架构，一直不知道要写什么，因为写着写着就觉得泛泛而谈，食之无味，可能是水平有限。

今天接着写完也算是给自己一个交待吧，想到哪就写到哪，有兴趣的朋友可以浏览一下。

正文开始

本系列文章的最大受众是前端工程师，因此搭建一个前端工程对大家来说也并不难。

对于前端来说，最核心的工作还是画页面，对数据，把交互逻辑搞清楚。但是随着项目的复杂度上升，架构设计也显得尤为重要。

其实提到“架构”二字，基本上免不了要被喷。但在我看来，无论简单或复杂，任何一个系统都有架构，架构是支撑开发的基础设施，是你对整个系统的宏观认知，它可能很简单，简单到只有 CRUD，也可能很复杂，比如支撑起你每天会打开的某些APP。架构不是生来完美，必然会经历一个演变的过程。

那么一个基本的前端架构设计，要考虑哪些内容呢？我想大概可以从这么几个方面入手分析。

视图/数据的一致性

在 Vue / React / Angular / Knockout 这类前端框架出现之前，前端视图和数据的管理常常存在着诸多问题，最致命的可能就是视图和数据可能存在不一致性。

在 MVC 模型中，我们通常需要在控制器逻辑中同时处理数据和视图，而随着业务不断复杂化，忘记处理某些细节可能是经常出现的问题（比如十个数据都处理正确了，但是关联的 8 个 dom 只更新了 6 个，还有 2 个忘了）。

而现在有了这些 Reactive Framework，在数据驱动视图的基本步调下，这些不一致问题得到了极大的改善，我们只要处理好数据，视图的更新放心交给框架处理即可。但是，框架也不是万能的，在使用框架的过程中，如果开发者不够熟悉框架的原理，也会经常入坑。

经常问的问题可能有：

1. 我更新了数据，为什么视图不更新？

2. 我更新了数据，为什么 canvas / echarts / editor 不自动更新渲染？

3. 我更新了一个数据，另一个数据怎么不自动变化？

4. 我写了一个 v-model，为啥没有效果？

本文也不会解答这些问题，只是作为一个引子，希望前端开发者们能在使用框架的时候，多多去了解框架的运作原理，这样才能在遇到问题时快速找到排查问题的方向。

通讯的设计

前端在通讯层面通常有一些方面要考虑。

1. 应用全局的通信能力，这个一般是通过事件总线之类的手段去解决。
2. 存在父子层级关系时，怎么提供一种范式去实现双向的通信。
3. 跨组件通信时，框架是否存在 provide/inject 或者 context 之类的方案。
4. iframe 的通信。
5. 微前端的通信。
6. 插件的通信机制。

业务的组织形式

按功能划分和按模块划分是软件开发中常用的两种划分方式。几年前前端领域的这个话题可能还会经常被讨论，比如我们有 A B C 三个业务，一个业务对应着 MVC 三个文件（model.js, view.js, controller.js），那么我们的目录结构应该是内聚于功能还是尊重模块特性按模块去分开呢？

随着前端模块化的不断推广、以及 MVVM 框架的流行，这些问题似乎很少再被讨论，因为框架内部提供了 MVC/MVVM 的设计模式，而且我们也越来越提倡把公共模块抽离出来，甚至把它们作为 npm 包的依赖形式存在。

存储/缓存

前端的存储相对于后端来说就显得有些简单了，基本不会涉及到各种复杂的数据库（关系型如 MySQL，非关系型如 MongoDB，时序数据库如 influxdb，内存数据库如 Redis）。

前端用得比较多的存储方式可能也就是这些了。

• 基于内存。你定义的各个变量，它都是内存数据。
• Storage API。localStorage, sessionStorage，基本上每天都用得到。
• Cookie。与 Storage 不同的是，Cookie 还穿插于 HTTP 请求中，可用于服务端客户端之间的识别和通讯。
• Cache。强缓存，协商缓存，CacheStorage, Service Worker 等。
• IndexedDB。一种非关系型数据库，可用于浏览器，丰富了浏览器的存储方式。

资源的版本控制

• URL的更新
• Hash命名
• HTTP缓存策略

工程的合理性

工程的代码组织水平，工程化程度，测试覆盖度等等。

性能问题

性能问题是大家普遍关注的，但是过分关注/提前关注性能优化，有时候也得不偿失，甚至是一种浪费。对于一个经验丰富的开发者而言，他可能会在开发过程中时常有意无意地关注到性能；而对于一个新手而言，很大可能是按照某些最佳实践的指导一步一个脚印。

性能优化很微妙，有一些客观准则，但也需要一些主观判断。就像是美酒，多了容易醉人，少了就美中不足，说多了都没有用，最关键的还是在于自己的一个意识，当然制定和遵守一些开发规范/最佳实践也是极好的。

如何协作

个人开发通常随心所欲，而在团队开发中，如何高效协作显得尤为重要。协作问题不局限于前端，而是整个软件开发领域普遍要考虑的重大问题。

• 研发流程
• 代码规范
• git 管理
• 工具：规范是给人看的，但是人不一定会遵守，所以还是要依赖工具，用工具来约束人的行为。

小结

本文主要介绍了我在前端架构方面的一些关注点，接下来将针对一些具体的博客业务实现来进行更详细的剖析，敬请期待！

• 专栏导航：Vue3+TS+Node打造个人博客（总览篇）