TypeScript实战篇 - TS实战:花田APP的架构

目录

TS实现花田APP的聊天Node端

整体架构

项目拆分

项目的特点

模型层

所有系统都是模型的外设

模型层的优势


TS实现花田APP的聊天Node端

整体架构

项目拆分

代号:@huatian

5个独立的npm包

  • @huatian/ui 花田的主项目
  • @huatian/component 花田组件库
  • @huatian/utils 花田的工具函数库
  • @huatian/model 花田的模型层
  • @huatian/svc 花田的node.js服务

实现语言:TS + VUE3

项目的特点

  • 突出架构的复杂性,技术的多元化,弱化交互和体验
  • 突出重点技能和实战技巧,减少重复
  • 重视性能和优化

模型层

user===people

  • Chat Context聊天场景【聊天】
  • Social Context社交场景【发动态】
  • Account Context账号场景【登入/登出,维护个人信息】

对象和对象之间的关系

所有系统都是模型的外设

模型层的优势

  • 前后端模型可以统一(Typescript)
    • 校验规则
    • 业务逻辑
    • 对象关系
    • ......
  • 封装计算和逻辑
相关推荐
xianxin_4 分钟前
CSS Dimension(尺寸)
前端
小宋搬砖第一名4 分钟前
前端包体积优化实战-从 352KB 到 7.45KB 的极致瘦身
前端
陈随易5 分钟前
前端之虎陈随易:2025年8月上旬总结分享
前端·后端·程序员
草巾冒小子9 分钟前
天地图应用篇:增加全屏、图层选择功能
前端
universe_0127 分钟前
day25|学习前端js
前端·笔记
Zuckjet32 分钟前
V8 引擎的性能魔法:JSON 序列化的 2 倍速度提升之路
前端·chrome·v8
MrSkye33 分钟前
🔥React 新手必看!useRef 竟然不能触发 onChange?原来是这个原因!
前端·react.js·面试
wayman_he_何大民40 分钟前
初识机器学习算法 - AUM时间序列分析
前端·人工智能
juejin_cn41 分钟前
前端使用模糊搜索fuse.js和拼音搜索pinyin-match提升搜索体验
前端
....4921 小时前
Vue3 + Element Plus 实现可搜索、可折叠、可拖拽的部门树组件
前端·javascript·vue.js