当前位置：首页 > news >正文

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

news 来源：原创 2024/5/9 11:54:37

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

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

后端工程：express-blog-backend

数据库初始化脚本：关注公众号bin不懂二进制，回复关键字“博客数据库脚本”，即可获取。

前言

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

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

正文开始

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

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

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

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

视图/数据的一致性

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

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

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

经常问的问题可能有：

我更新了数据，为什么视图不更新？
我更新了数据，为什么 canvas / echarts / editor 不自动更新渲染？
我更新了一个数据，另一个数据怎么不自动变化？
我写了一个 v-model，为啥没有效果？

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

通讯的设计

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

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

业务的组织形式

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

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