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

架构设计能力复习

好的,我们来深入复习架构设计能力相关的核心知识点。这部分内容直接体现了你作为高级前端工程师的视野、决策能力和解决复杂问题的能力。


1. 微前端 (Micro Frontends)

微前端是一种将前端应用分解为多个更小、更简单、可以独立开发、测试和部署的微应用的架构风格。

各种方案原理与对比

方案 原理 优点 缺点 适用场景
iframe 浏览器原生隔离方案,每个微应用一个iframe 天然JS/CSS隔离,简单易用 路由状态管理困难,UI不同步,SEO不友好,通信复杂 简单集成第三方独立页面,需要最强隔离性的场景
Single-SPA 应用加载器。是一个顶层路由,根据路由规则动态加载并挂载/卸载微应用(UMD格式)。 技术栈无关,纯JS,轻量灵活 需要大量改造现有应用(导出生命周期钩子),不解决隔离和依赖问题,需要自行实现 适合作为定制化微前端框架的底层引擎, greenfield 项目
qiankun 基于 Single-SPA,提供了完整的运行时解决方案。 开箱即用,提供了JS沙箱样式隔离、资源预加载、全局状态通信等完整能力 对 Vite 等非 Webpack 构建的支持需要额外配置(现已有插件) 中大型企业级应用,需要快速落地微前端方案
Webpack 5 Module Federation (模块联邦) 编译时依赖共享。一个应用(Remote)可以将其部分模块暴露给另一个应用(Host)使用。 真正的代码共享,远程模块像本地模块一样使用,极致性能 强耦合于 Webpack,需要应用构建工具统一,共享版本需协调 技术栈统一或相似的项目群,需要高性能共享组件/模块

你必须非常熟悉你项目中用的方案(例如 qiankun),并能阐述:

  • 主应用如何注册微应用(配置 entry, activeRule, container)。
  • 微应用如何导出生命周期钩子bootstrap, mount, unmount)。
  • 如何与主应用通信(使用 initGlobalState)。

核心挑战与解决方案

  1. 应用隔离

    • JS 沙箱 (Sandbox)
      • 快照沙箱 (Snapshot):在应用挂载前记录全局状态(window),卸载时恢复。适用于不支持 Proxy 的浏览器。qiankun 对单实例微应用采用此方案。
      • 代理沙箱 (Proxy):使用 Proxy 为每个微应用创建一个假的 window 代理对象,所有对其的读写操作都隔离在这个代理对象上。qiankun 对多实例微应用采用此方案。这是目前的主流方案
    • CSS 隔离
      • Scoped CSS:通过为 CSS 选择器添加特殊属性(如 [data-qiankun-xxx])来实现样式隔离。qiankun 默认支持。
      • Shadow DOM:最强的隔离方案,将微应用的 DOM 树挂载到一个 Shadow Root 下,实现真正的样式隔离。但可能影响外部样式穿透和组件库的使用。
  2. 数据通信

    • 自定义事件 (CustomEvent):使用 window.dispatchEventwindow.addEventListener 进行简单的父子应用通信。松耦合,但需要规范事件名。
    • 状态管理库:在主应用初始化一个全局状态(如 qiankuninitGlobalState),微应用通过提供的 API 进行订阅和更新。这是最常用的方式。
    • URL 参数:通过路由传递简单参数,适合状态同步要求不高的场景。
  3. 公共依赖

    • 问题:每个微应用都打包 React, Vue, Lodash 等库,导致资源冗余。
    • 解决方案
      • Webpack Externals:配置 externals,让这些库不打包进 bundle,转而通过 <script> 标签从 CDN 引入。这是最常见和简单的方案
      • Module Federation终极方案。主应用作为 Host 提供公共依赖,微应用作为 Remote 直接消费 Host 提供的模块,避免重复加载。

你的项目:OMNIEYE 平台

准备一个 STAR 模型来阐述:

  • S (Situation):项目背景,为什么需要微前端?(例如:多个团队独立开发不同功能模块,技术栈历史包袱,需要独立部署等)。
  • T (Task):你的任务是什么?(例如:技术选型、搭建微前端架构、解决集成难题)。
  • A (Action):你采取了什么行动?
    • 技术选型:为什么选择 qiankun?(例如:社区活跃、开箱即用、满足我们的隔离和通信需求)。
    • 架构设计:主应用和微应用如何划分?路由设计是怎样的?
    • 遇到的坑与解决方案
      • 坑1:微应用样式污染解决方案:开启 qiankun 的严格样式隔离 strictStyleIsolation(Shadow DOM)或实验性样式隔离 experimentalStyleIsolation(Scoped CSS)。
      • 坑2:路由冲突解决方案:为每个微应用设置唯一的 activeRule(路由前缀),主应用使用 history.pushState 进行路由跳转。
      • 坑3:公共依赖重复解决方案:将 Vue, Element-Plus 等配置为 externals,并通过 CDN 引入。
  • R (Result):取得了什么成果?(例如:成功拆分多个微应用,团队能独立开发和部署,性能表现符合预期,提升了开发效率)。

2. 性能优化

指标与测量

  • 核心 Web 指标 (Core Web Vitals)

    • LCP (Largest Contentful Paint)最大内容绘制,衡量加载性能。应在 2.5 秒内发生。
    • FID (First Input Delay)首次输入延迟,衡量交互性。应小于 100 毫秒。现已被 INP (Interaction to Next Paint) 取代作为更全面的指标。
    • CLS (Cumulative Layout Shift)累积布局偏移,衡量视觉稳定性。应小于 0.1。
    • (FCP - First Contentful Paint)首次内容绘制,测量页面开始加载到任何部分(文本、图像等)呈现在屏幕上的时间。
  • 测量工具

    • Lighthouse:实验室工具,在受控环境中模拟测试,提供全面优化建议。
    • Chrome DevTools:使用 Performance 面板分析运行时性能,使用 Lighthouse 面板跑分。
    • Web Vitals:Google 提供的库,可以真实用户监控 (RUM),在生产环境中测量并上报这些指标。import { getCLS, getFID, getLCP } from 'web-vitals';

优化方案

网络层面:

  1. HTTP/2:多路复用、服务器推送、头部压缩,极大提升资源加载效率。
  2. CDN:将静态资源分发到全球节点,用户从最近的节点获取资源,降低延迟。
  3. 缓存策略
    • 强缓存Cache-Control: max-age=31536000(一年),Expires。浏览器直接使用本地缓存,不请求服务器。
    • 协商缓存Last-Modified / If-Modified-SinceETag / If-None-Match。浏览器询问服务器资源是否过期,未过期则返回 304 状态码。
  4. 压缩
    • Gzip:普遍支持的文本压缩格式。
    • Brotli.br):比 Gzip 压缩率更高,现代浏览器都支持。首选方案
  5. 图片优化
    • 格式:使用 WebPAVIF 等现代格式,在同等质量下体积更小。
    • 懒加载:使用 loading="lazy" 属性,图片进入视口附近再加载。
    • 响应式图片:使用 srcsetsizes 属性,为不同屏幕尺寸提供不同大小的图片。
    • 雪碧图 (CSS Sprites):合并多个小图标为一张大图,通过 background-position 显示,减少 HTTP 请求(在 HTTP/2 下收益变小)。

渲染层面:

  1. 防抖 (Debounce):连续事件结束后等待一段时间再执行(如搜索框输入)。
  2. 节流 (Throttle):连续事件中,每隔一段时间执行一次(如滚动事件)。
  3. 虚拟列表 (Virtual List):只渲染可视区域及其附近的元素,大幅减少 DOM 节点数量,用于超长列表渲染。
  4. 懒执行:将非首屏关键的逻辑(如数据分析、复杂动画)延迟执行或按需执行。
  5. Web Worker:将计算密集型任务(如数据处理、图像操作)放到后台线程执行,不阻塞主线程的渲染和交互。

框架层面 (Vue):

  1. 异步组件:使用 defineAsyncComponent 延迟加载非首屏组件,减少初始包体积。
  2. <KeepAlive>:缓存非活动组件实例,避免重复渲染(如 Tab 切换)。
  3. computed vs watch
    • computed:用于派生状态,依赖变化时才重新计算,有缓存。优先使用。
    • watch:用于监听数据变化执行副作用(如请求数据、操作 DOM),无缓存。

3. B端项目架构通识

权限系统

  • RBAC 模型 (Role-Based Access Control)

    • 用户 (User) -> 角色 (Role) -> 权限 (Permission)
    • 用户关联角色,角色关联权限(通常是菜单、路由、按钮的标识符)。修改用户的角色即可批量修改其权限。
  • 前端实现

    1. 路由权限
      • 用户登录后,后端返回其拥有的权限列表。
      • 方案A (动态路由):前端只定义基本路由(如 /login)。根据用户权限,动态调用 router.addRoute() 添加有权限访问的路由。更安全,更推荐
      • 方案B (全局守卫):前端定义所有路由。在全局路由守卫 router.beforeEach 中判断目标路由是否需要权限以及用户是否有权访问,若无权则跳转到 403 页面。
    2. 按钮级权限
      • 通常封装一个自定义指令 v-permission
      // main.js
      app.directive('permission', {mounted(el, binding) {const { value } = binding; // 指令的值,如 'user:add'const permissions = store.getters.permissions; // 从Vuex/Pinia中获取用户权限列表if (value && !permissions.includes(value)) {el.parentNode && el.parentNode.removeChild(el); // 无权限则移除按钮}}
      });// 在组件中使用
      <button v-permission="'user:delete'">删除用户</button>
      

状态管理

复杂中台项目状态管理的关键是模块化 (Modularization)

  • Pinia (Vue 3 推荐)

    • 天然支持模块化,每个 Store 都是一个独立的模块。
    • 定义多个 Store(如 useUserStore, useAppStore, useProductStore),在组件中按需引入。
    • 结构清晰,TS 支持极好。
  • Vuex (Vue 2)

    • 通过 modules 选项进行模块化拆分。
    const moduleA = { state: { ... }, mutations: { ... }, ... };
    const moduleB = { state: { ... }, ... };
    const store = new Vuex.Store({modules: { a: moduleA, b: moduleB }
    });
    

组件化设计

  • 原则:高内聚、低耦合

    • 高内聚:一个组件只专注于完成一件事,并且把这件事做好。它的所有相关代码(视图、逻辑、样式)都紧密地组织在一起。
    • 低耦合:组件应该尽可能少地依赖外部环境(父组件、全局状态),通过清晰的 propsevents 接口与外界通信。
  • 业务组件库设计与开发流程

    1. 技术选型:基于 Vue + TypeScript + SCSS。构建工具选择 Vite(开发体验好) 或 Webpack
    2. 脚手架:使用 Vue CLIVitelib 模式创建项目。或使用更专业的 BitLerna 管理多组件。
    3. 开发规范
      • 目录结构:每个组件一个单独的文件夹(包含 .vue, .ts, .scss 文件)。
      • 代码规范:统一集成 ESLint, Prettier, Stylelint。
      • 文档:使用 StorybookVitePress 为每个组件编写交互式文档和演示用例。这是重中之重
    4. 组件设计
      • API 设计props 设计要直观且具扩展性,考虑默认值、类型校验、必填项。
      • 插槽 (Slots):提供足够的插槽来支持内容定制化。
      • 主题定制:提供 CSS 变量或 SCSS 变量来实现主题和样式的定制。
    5. 构建与发布:配置构建脚本,生成 umdes 格式产物。通过 npm publish 发布到私有或公共 npm 仓库。
    6. 持续集成:自动化执行测试、构建和发布流程。
http://www.hskmm.com/?act=detail&tid=27959

相关文章:

  • 2025锅炉厂家最新推荐榜:高效节能与安全运行口碑之选
  • 前端全栈工程师技术提升建议
  • 前端技术复习与体系化框架
  • 常用pg-sql操作 - 吾辈当奋斗
  • 微信社群开发
  • IStringLocalizer突然失效?线程的“失忆症”
  • IIS8.5 安装证书
  • 软件技术基础的第一次作业
  • UMich EECS 498-007 / 598-005: Deep Learning for Computer Vision
  • n8n Docker 部署手册
  • 2025南通婚纱摄影厂家最新推荐榜:匠心工艺与浪漫美学完美结合
  • 免费音乐软件,哔哔音乐 免费下载及安装!免费音乐播放器
  • 多级缓存架构:性能与数据一致性的平衡处理(原理及优势详解+项目实战) - 教程
  • mysql设置最大连接数,MySQL最大连接数设置详解
  • 微信机器人API开放!手把手教你打造智能聊天机器人
  • 十二重计数法
  • Java高手速成--吃透源码+手写组件+定制开发
  • 【Excel】账单数据分析(数据透视表的简单应用)
  • CSP/NOIP 历年题解导引
  • 记一次Windows 10 无法打开计算器、照片等系统自带小工具问题解决
  • lca(倍增)
  • [SpringCloud][7]负载均衡介绍,以及一些搭建
  • BERT模型简化技术提升效率与容量
  • 251010
  • Redis 64字节分界线与跳表实现原理 - 实践
  • 新手报道
  • VUE---await的运用
  • 供应链业务架构设计概览
  • VS Code保存.vue文件自动格式化标签的问题
  • 基于最小二乘(LS)信道估计的MATLAB实现