前端架构

主要罗列些一些前端领域里的架构设计上的思考点、要素、问题以及收集的开源项目方案...

  • 前端架构
    • 前端框架-视图层的解决方案
      • MDV
      • 组件化
        • 组件是对视图以及与视图相关的逻辑、数据、交互等的封装
        • 视图驱动、组件优先的开发模式
          • 在前后分离的模式下，大多数前端业务开发流程都是以视图驱动为主，并且在前端框架组件概念的设计下，形成了以组件优先的开发模式:
            • 先根据 UI 稿子拆分成组件、面向组件写页面
            • 再根据原型文档与接口完成业务交互
          • 在视图驱动下，State 是围绕 View 的消费和交互需求而产生的，View 是组件真正核心的部分，这就导致在视图组件里编写越来越多的代码，并成了一个流行趋势，组件同时承载了界面逻辑和业务逻辑
        • 组件拆分与复用：组件拆分可以从以下几个维度进行：
          • 按页面组件层次结构：拆分时需要你理解页面结构、和业务和交互
          • 按功能逻辑角度：前端框架的组件是应用构成基本单位，而不是逻辑复用的最小单位：组件包含视图渲染逻辑和状态交互逻辑，比如在某些业务场景下，视图一样但面对用户角色不同需要的业务交互逻辑不一样；反之，同样的业务逻辑在移动端和 PC 端表现的视图又不一样的情况。按功能逻辑拆分有：
            • 视图组件
              • UI 组件
              • headless UI 组件
            • 逻辑组件
              • 业务逻辑组件
      • 组件范式
        • UI = f(state) => 组件即函数的范式
        • react
          • component: (props) => jsx
          • hooks: (props) => others
        • vue: (props, ctx) => render/others
    • 组件驱动下的前端状态管理
      • 组件化
        • Component Tree => state tree + 单向数据流
        • 通信困难：整个应用最终以组件树的形式组织展示，组件封装状态逻辑，逻辑自治，但分散在组件树，树形结构阻碍了组件数据通信
          • 状态提升、分层
            • 容器模式
            • 单向数据流
      • 全局化
        • 状态与组件分离： Flux 架构，单向数据流 state -> UI
        • 全局状态的生命周期管理很麻烦
      • 职责分类：业务状态、UI 状态、应用状态
        • 业务状态倾向于放到高层模块里
        • UI 状态作为 UI 的映射关系适合放到组件等局部状态里
        • 应用状态则作为全局状态
      • 状态管理库设计
        • 范式，如
          • 不可变
          • 状态机
        • 生命周期管理
          • 页面路由级 栈
        • 数据持久化
        • DX
          • devtools
          • 热模块更新
          • 事件回溯
    • 项目架构
      • MVC
      • MV*
        • View：展示数据、用户交互
          • Event => Logic => State => UI => ...
            • 事件驱动业务逻辑：人机交互的业务逻辑本身，是【针对人的行为做出反馈】
            • 数据驱动视图
          • ViewModel
        • Store：存储状态
        • Servcie：后端接口交互
          • Model 贫血的 data
    • SSR
    • 页面适配
    • 图标
    • 前端项目开发中的规范
    • 前端工具
    • 低代码
    • 微前端

SSR

  • SSR
    • 原理
      • renderToHTMLString
        • API 环境区分
      • HTML 拼接
        • head
        • content
        • js、css 等
      • fetch
        • 跨平台
        • 数据同步
      • 客户端激活
        • 框架激活
        • 状态同步
      • 工程架构
        • Node.js 和浏览器的环境也不同（比如你在 Node.js 里没有window）。库可能针对 Node 和浏览器有不同的构建和逻辑；框架可能会将组件编译为 CSR 和 SSR 的不同输出。这通常意味着对于客户端构建和 SSR 构建，我们需要两个管道来处理转换和捆绑
        • Vite SSR
    • Vue
      • Vue SSR 基础教程
      • vue hydrate
        • 原理：vnode 与原生 node 做 diff
        • 激活失败，即预渲染的 HTML 的 DOM 结构与 vDom 结构匹配不上时。它将尝试自动恢复并调整预渲染的 DOM 以匹配客户端的状态，这将导致一些渲染性能的损失，因为需要丢弃不匹配的节点并渲染新的节点
  • SSG = SSR + prerender
  • 通用框架 = 前端框架 + BFF

低代码

  • 低代码
    • 核心
      • 数据模型
      • 数据协议模型
      • UI 描述模型
        • UI 组件
        • 交互逻辑描述
          • 数据校验
          • 数据逻辑联动
          • 提示
    • 设计器
    • 渲染器
  • JSON Schema
  • JSON Schema 验证器：ajv
  • XRender

图标

  • Web 图标方案
    • 图片
      • CSS sprites + background-image + background-position
    • 字体图标
      • 原理：占用私有 Unicode 字符编码区域
      • 使用：@font-face + class-name + 伪元素（::before，::after）
      • 缺点
        • 无法按需引入
        • 网络开销大
        • 字体冲突
    • SVG
      • 保真
      • 控制图标的颜色
      • 无需编码，可按需加载
      • SVG Symbol 
          <svg>
    <defs>
      <symbol id="shape-icon-1">
        <!-- icon paths and shapes -->
      <symbol>
      <symbol id="shape-icon-2">
        <!-- icon paths and shapes -->
      <symbol>
      <!-- etc -->
    </defs>
  </svg>
  <svg viewBox="0 0 16 16" class="icon">
    <use xlink:href="#shape-icon-1"></use>
  </svg>
  • 设计思考
    • 优先 SVG 图标
    • 在前端视图层框架中封装成组件使用
    • 图标类型提示和按需引入，如
      • 组件类型，每个图标单独一个组件
      • 图标名枚举 + SVG Symbol
  • 第三方开源

前端工具

其他文章
Web 图像最佳实践前端项目开发中的规范
交流区
加载中...