前言

在 JavaScript 开发者的日常中，这样的对话时常发生：

• 👨💻 新人："为什么页面突然白屏了？"


• 👨🔧 老人："异步请求没做错误处理吧？"

async/await 看似优雅的语法糖背后，隐藏着一个关键问题：错误处理策略的抉择。

在 JavaScript 中使用 async/await 时，很多人会问：“必须使用 try/catch 吗？”

其实答案并非绝对，而是取决于你如何设计错误处理策略和代码风格。

接下来，我们将探讨 async/await 的错误处理机制、使用 try/catch 的优势，以及其他可选的错误处理方法。

async/await 的基本原理

异步代码的进化史

// 回调地狱时代

fetchData(url1, (data1) => {

  process(data1, (result1) => {

    fetchData(url2, (data2) => {

      // 更多嵌套...

    })

  })

})



// Promise 时代

fetchData(url1)

  .then(process)

  .then(() => fetchData(url2))

  .catch(handleError)



// async/await 时代

async function workflow() {

  const data1 = await fetchData(url1)

  const result = await process(data1)

  return await fetchData(url2)

}

async/await 是基于 Promise 的语法糖，它使异步代码看起来更像同步代码，从而更易读、易写。一个 async 函数总是返回一个 Promise，你可以在该函数内部使用 await 来等待异步操作完成。

如果在异步操作中出现错误（例如网络请求失败），该错误会使 Promise 进入 rejected 状态。

async function fetchData() {

  const response = await fetch("https://api.example.com/data");

  const data = await response.json();

  return data;

}

使用 try/catch 捕获错误

打个比喻，就好比铁路信号系统

想象 async 函数是一列高速行驶的列车：

• await 是轨道切换器：控制代码执行流向


• 未捕获的错误如同脱轨事故：会沿着铁路网（调用栈）逆向传播


• try/catch 是智能防护系统：
  
  
  
  • 自动触发紧急制动（错误捕获）
  
  
  • 启动备用轨道（错误恢复逻辑）
  
  
  • 向调度中心发送警报（错误日志）
  
  
  
  

为了优雅地捕获 async/await 中出现的错误，通常我们会使用 try/catch 语句。这种方式可以在同一个代码块中捕获抛出的错误，使得错误处理逻辑更集中、直观。

• 代码逻辑集中，错误处理与业务逻辑紧密结合。


• 可以捕获多个 await 操作中抛出的错误。


• 适合需要在出错时进行统一处理或恢复操作的场景。

async function fetchData() {

  try {

    const response = await fetch("https://api.example.com/data");

    if (!response.ok) {

      throw new Error(`HTTP error! status: ${response.status}`);

    }

    const data = await response.json();

    return data;

  } catch (error) {

    console.error("Error fetching data:", error);

    // 根据需要，可以在此处处理错误，或者重新抛出以便上层捕获

    throw error;

  }

}

不使用 try/catch 的替代方案

虽然 try/catch 是最直观的错误处理方式，但你也可以不在 async 函数内部使用它，而是在调用该 async 函数时捕获错误。

在 Promise 链末尾添加 .catch()

async function fetchData() {

  const response = await fetch("https://api.example.com/data");

  if (!response.ok) {

    throw new Error(`HTTP error! status: ${response.status}`);

  }

  return response.json();

}



// 调用处使用 Promise.catch 捕获错误

fetchData()

  .then(data => {

    console.log("Data:", data);

  })

  .catch(error => {

    console.error("Error fetching data:", error);

  });

这种方式将错误处理逻辑移至函数调用方，适用于以下场景：

• 当多个调用者希望以不同方式处理错误时。


• 希望让 async 函数保持简洁，将错误处理交给全局统一的错误处理器（例如在 React 应用中可以使用 Error Boundary）。

将 await 与 catch 结合

async function fetchData() {

  const response = await fetch('https://api.example.com/data').catch(error => {

    console.error('Request failed:', error);

    return null; // 返回兜底值

  });

  if (!response) return;

  // 继续处理 response...

}

全局错误监听（慎用，适合兜底）

// 浏览器端全局监听

window.addEventListener('unhandledrejection', event => {

  event.preventDefault();

  sendErrorLog({

    type: 'UNHANDLED_REJECTION',

    error: event.reason,

    stack: event.reason.stack

  });

  showErrorToast('系统异常，请联系管理员');

});



// Node.js 进程管理

process.on('unhandledRejection', (reason, promise) => {

  logger.fatal('未处理的 Promise 拒绝:', reason);

  process.exitCode = 1;

});

错误处理策略矩阵

决策树分析

graph TD

  A[需要立即处理错误?] -->|是| B[使用 try/catch]

  A -->|否| C{错误类型}

  C -->|可恢复错误| D[Promise.catch]

  C -->|致命错误| E[全局监听]

  C -->|批量操作| F[Promise.allSettled]

错误处理体系

小结

我的观点是：不强制要求，但强烈推荐

• 不强制：如果不需要处理错误，可以不使用 try/catch，但未捕获的 Promise 拒绝（unhandled rejection）会导致程序崩溃（在 Node.js 或现代浏览器中）。


• 推荐：90% 的场景下需要捕获错误，因此 try/catch 是最直接的错误处理方式。

所有我个人观点：使用 async/await 尽量使用 try/catch。好的错误处理不是消灭错误，而是让系统具备优雅降级的能力。

你的代码应该像优秀的飞行员——在遇到气流时，仍能保持平稳飞行。大家如有不同意见，还请评论区讨论，说出自己的见解。

表妹问：前端好玩吗？我说好玩，但表妹接下来的回复看哭了我。

是的，回复如下：

这红海血途上，新兵举着 "大前端" 旌旗冲锋，老兵拖着node_modules残躯撤退。资本织机永不停歇，框架版本更迭如暴君换季，留下满地deprecated警告如秋后落叶。

其一、夹缝中的苦力

世人都道前端易，不过调接口、改颜色，仿佛稚童搭积木。却不知那屏幕上寸寸像素之间，皆是血泪。产品拍案，需求朝夕三变，昨日之红蓝按钮，今晨便成黑白圆角。UI稿纸翻飞如雪，设计师手持“用户体验”四字大旗，将五更赶工的代码尽数碾碎。后端端坐高台，接口文档空悬如镜花水月，待到交付时辰，方抛来残缺数据。此时节，前端便成了那补天的女娲，于混沌中捏造虚拟对象，用JSON.parse('{"data": undefined}')这等荒诞戏法，将虚无粉饰成真实。

看这段代码何等悲凉：

// 后端曰：此接口返data字段，必不为空

fetch('api/data').then(res => {

  const { data } = res;

  render(data[0].children[3].value || '默认值'); // 层层掘墓，方见白骨

});

此乃前端日常——在数据废墟里刨食，用||与?.铸成铁锹，掘出三分体面。

其二、技术的枷锁

JavaScript本是脚本小儿，如今却要扛鼎江山。君不见React、Vue、Angular三座大山压顶，每年必有新神像立起。昨日方学得Redux真经，今朝GraphQL又成显学。更有Electron、ReactNative、Flutter诸般法器，教人左手写桌面应用，右手调移动端手势。所谓“大前端”，实乃资本画饼之术，人前跨端写，人后页面仔——既要马儿跑，又要马儿不吃草；以切图之名，许一份低劣薪水，行三五岗位之事。

且看这跨平台代码何等荒诞：

// 一套代码统治三界（iOS/Android/Web）

<View>

  {Platform.OS === 'web' ? 

    <div onClick={handleWebClick} /> : 

    <TouchableOpacity onPress={handleNativePress} />

  }

</View>

此类缝合怪代码，恰似给长衫打补丁，既失体统，又损性能。待到内存泄漏、渲染卡顿时，众人皆指前端曰："此子学艺不精！"

何人怜悯前端 node18 react19 逐人老，后端写着 java8 看着 java22 笑。

其三、尊严的消亡

领导提拔，必先问尔可懂SpringBoot、MySQL分库分表？纵使前端用WebGL绘出三维宇宙，用WebAssembly重写操作系统，在会议室里仍是“做界面的”。工资单上数字最是直白——同司后端新人起薪万数，前端老将苦熬三年方摸得此数。更可笑者，产品经理醉酒时吐真言："你们不就是改改CSS么？"

再看这可视化代码何等心酸：

// 用Canvas画十万级数据点

ctx.beginPath();

dataPoints.forEach((point, i) => {

  if (i % 100 === 0) ctx.stroke(); // 分段渲染防卡死

  ctx.lineTo(point.x, point.y);

});

此等精密计算，在他人眼中不过"动画效果"，与美工修图无异。待浏览器崩溃，众人皆曰："定是前端代码劣质！"

技术大会，后端高谈微服务、分布式，高并发，满座掌声如雷，实则系统使用量百十来人也是远矣；前端言及 CSS 栅格、浏览器渲染，众人瞌睡连天。领导抚掌笑曰：“后端者，国之重器；前端者，雕虫小技。” 晋升名单，后端之名列如长蛇，前端者埋没于墙角尘埃。纵使将那界面写出花来，终是 “切图仔” 定终身。

其四、维护者的悲歌

JavaScript本无类型，如野马脱缰。若非经验老道之一，常写出这等代码：

function handleData(data) {

  if (data && typeof data === 'object') { // 万能判断

    return data.map(item => ({

      ...item,

      newProp: item.id * Math.random() // 魔改数据

    }));

  }

  return []; // 默认返回空阵，埋下百处报错

}

此类代码如瘟疫蔓延，领导却言“这些功能实习生也能写！”，却不顾三月后连作者亦不敢相认，只得下任前端难上加难。

而后端有Type大法，编译检查护体，有Swagger契约，有Docker容器，纵使代码如乱麻，只需扩内存、增实例，便可遮掩性能疮疤。

其五、末路者的自白

诸君且看这招聘启事："需精通Vue3+TS+Webpack，熟悉React/Node.js，有Electron/小程序经验，掌握Three.js/WebGL者重点考虑。" 薪资却标着"6-8K"。更有机智者发明"全栈"之名，实欲以一人之躯，承三头六臂之劳。

再看这面试题何等荒谬：

// 手写Promise实现A+规范

class MyPromise {

  // 三千行后，方知自己仍是蝼蚁

}

此等屠龙之术，入职后唯调API用。恰似逼庖丁解牛，却令其日日杀鸡。

或以使用组件库之经验薪资招之，又以写不好组件库之责裁出。

尾声：铁屋中的叩问

前端者，数字化时代的纺织工也。资本织机日夜轰鸣，框架如梭穿行不息。程序员眼底血丝如网。所谓"全栈工程师"，实为包身工雅称；所谓"技术革新"，不过剥削新法。

若仍有少年热血未冷，欲投身此业，且听我一言：君有凌云志，何不学Rust/C++，做那操作系统、数据库等真·屠龙技？莫要困在这CSS牢笼中，为圆角像素折腰，为虚无需求焚膏。前端之路，已是红海血途，望后来者三思，三思！

1.背景

一开始接到任务需要打印html，之前用到了vue-print-nb-jeecg来处理Vue2一个打印的问题，现在是遇到需求要在Vue3项目里面去打印十几页的打印和下载为pdf，难点和坑就在于我用的库vue3-print-nb来做分页打印预览，下载pdf后面介绍

2.预览打印实现

    <div id="printMe" style="background:red;">

        <p>葫芦娃，葫芦娃</p>

        <p>一根藤上七朵花 </p>

        <p>小小树藤是我家 啦啦啦啦 </p>

        <p>叮当当咚咚当当　浇不大</p>

        <p> 叮当当咚咚当当 是我家</p>

        <p> 啦啦啦啦</p>

        <p>...</p>

    </div>



    <button v-print="'#printMe'">Print local range</button>

因为官方提供的方案都是DOM加载完成后然后直接打印，但是我的需求是需要点击打印的时候根据id渲染不同的组件然后渲染DOM，后面仔细看官方文档，有个beforeOpenCallback方法在打印预览之前有个钩子，但是这个钩子没办法确定我接口加载完毕，所以我的思路就是用户先点击我写的点击按钮事件，等异步渲染完毕之后，我再同步触发真正的打印预览按钮，这样就变相解决了我的需求。

坑

3.掉头发之下载pdf

下载pdf这种需求才是我每次去理发店不敢让tony把我头发打薄的原因，我看了很多技术文章，结合个人业务情况，采取的方案是html2canvas把html转成canvas然后转成图片然后通过jsPDF截取图片分页最后下载到本地。本人秉承着不生产水，只做大自然的搬运工的匠人精神，迅速而又果断的从社区来到社区去，然后找到了适配当前业务的逻辑代码(实践出真知)。

import html2canvas from 'html2canvas'

import jsPDF, { RGBAData } from 'jspdf'



/** a4纸的尺寸[595.28,841.89], 单位毫米 */

const [PAGE_WIDTH, PAGE_HEIGHT] = [595.28, 841.89]



const PAPER_CONFIG = {

  /** 竖向 */

  portrait: {

    height: PAGE_HEIGHT,

    width: PAGE_WIDTH,

    contentWidth: 560

  },

  /** 横向 */

  landscape: {

    height: PAGE_WIDTH,

    width: PAGE_HEIGHT,

    contentWidth: 800

  }

}



// 将元素转化为canvas元素

// 通过 放大 提高清晰度

// width为内容宽度

async function toCanvas(element: HTMLElement, width: number) {

  if (!element) return { width, height: 0 }



  // canvas元素

  const canvas = await html2canvas(element, {

    // allowTaint: true, // 允许渲染跨域图片

    scale: window.devicePixelRatio * 2, // 增加清晰度

    useCORS: true // 允许跨域

  })



  // 获取canvas转化后的宽高

  const { width: canvasWidth, height: canvasHeight } = canvas



  // html页面生成的canvas在pdf中的高度

  const height = (width / canvasWidth) * canvasHeight



  // 转化成图片Data

  const canvasData = canvas.toDataURL('image/jpeg', 1.0)



  return { width, height, data: canvasData }

}



/**

 * 生成pdf(A4多页pdf截断问题， 包括页眉、页脚 和 上下左右留空的护理)

 * @param param0

 * @returns

 */

export async function outputPDF({

  /** pdf内容的dom元素 */

  element,



  /** 页脚dom元素 */

  footer,



  /** 页眉dom元素 */

  header,



  /** pdf文件名 */

  filename,



  /** a4值的方向: portrait or landscape */

  orientation = 'portrait' as 'portrait' | 'landscape'

}) {

  if (!(element instanceof HTMLElement)) {

    return

  }



  if (!['portrait', 'landscape'].includes(orientation)) {

    return Promise.reject(

      new Error(`Invalid Parameters: the parameter {orientation} is assigned wrong value, you can only assign it with {portrait} or {landscape}`)

    )

  }

  const [A4_WIDTH, A4_HEIGHT] = [PAPER_CONFIG[orientation].width, PAPER_CONFIG[orientation].height]



  /** 一页pdf的内容宽度, 左右预设留白 */

  const { contentWidth } = PAPER_CONFIG[orientation]



  // eslint-disable-next-line new-cap

  const pdf = new jsPDF({

    unit: 'pt',

    format: 'a4',

    orientation

  })



  // 一页的高度， 转换宽度为一页元素的宽度

  const { width, height, data } = await toCanvas(element, contentWidth)



  // 添加

  function addImage(

    _x: number,

    _y: number,

    pdfInstance: jsPDF,

    base_data: string | HTMLImageElement | HTMLCanvasElement | Uint8Array | RGBAData,

    _width: number,

    _height: number

  ) {

    pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height)

  }



  // 增加空白遮挡

  function addBlank(x: number, y: number, _width: number, _height: number) {

    pdf.setFillColor(255, 255, 255)

    pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F')

  }



  // 页脚元素 经过转换后在PDF页面的高度

  const { height: tFooterHeight, data: headerData } = footer ? await toCanvas(footer, contentWidth) : { height: 0, data: undefined }



  // 页眉元素 经过转换后在PDF的高度

  const { height: tHeaderHeight, data: footerData } = header ? await toCanvas(header, contentWidth) : { height: 0, data: undefined }



  // 添加页脚

  async function addHeader(headerElement: HTMLElement) {

    headerData && pdf.addImage(headerData, 'JPEG', 0, 0, contentWidth, tHeaderHeight)

  }



  // 添加页眉

  async function addFooter(pageNum: number, now: number, footerElement: HTMLElement) {

    if (footerData) {

      pdf.addImage(footerData, 'JPEG', 0, A4_HEIGHT - tFooterHeight, contentWidth, tFooterHeight)

    }

  }



  // 距离PDF左边的距离，/ 2 表示居中

  const baseX = (A4_WIDTH - contentWidth) / 2 // 预留空间给左边

  // 距离PDF 页眉和页脚的间距， 留白留空

  const baseY = 15



  // 除去页头、页眉、还有内容与两者之间的间距后 每页内容的实际高度

  const originalPageHeight = A4_HEIGHT - tFooterHeight - tHeaderHeight - 2 * baseY



  // 元素在网页页面的宽度

  const elementWidth = element.offsetWidth



  // PDF内容宽度 和 在HTML中宽度 的比， 用于将 元素在网页的高度 转化为 PDF内容内的高度， 将 元素距离网页顶部的高度  转化为 距离Canvas顶部的高度

  const rate = contentWidth / elementWidth



  // 每一页的分页坐标， PDF高度， 初始值为根元素距离顶部的距离

  const pages = [rate * getElementTop(element)]



  // 获取该元素到页面顶部的高度(注意滑动scroll会影响高度)

  function getElementTop(contentElement) {

    if (contentElement.getBoundingClientRect) {

      const rect = contentElement.getBoundingClientRect() || {}

      const topDistance = rect.top



      return topDistance

    }

  }



  // 遍历正常的元素节点

  function traversingNodes(nodes) {

    for (const element of nodes) {

      const one = element



      /** */

      /** 注意： 可以根据业务需求，判断其他场景的分页，本代码只判断表格的分页场景 */

      /** */



      // table的每一行元素也是深度终点

      const isTableRow = one.classList && one.classList.contains('ant4-table-row')



      // 对需要处理分页的元素，计算是否跨界，若跨界，则直接将顶部位置作为分页位置，进行分页，且子元素不需要再进行判断

      const { offsetHeight } = one

      // 计算出最终高度

      const offsetTop = getElementTop(one)



      // dom转换后距离顶部的高度

      // 转换成canvas高度

      const top = rate * offsetTop

      const rateOffsetHeight = rate * offsetHeight



      // 对于深度终点元素进行处理

      if (isTableRow) {

        // dom高度转换成生成pdf的实际高度

        // 代码不考虑dom定位、边距、边框等因素，需在dom里自行考虑，如将box-sizing设置为border-box

        updateTablePos(rateOffsetHeight, top)

      }

      // 对于普通元素，则判断是否高度超过分页值，并且深入

      else {

        // 执行位置更新操作

        updateNormalElPos(top)

        // 遍历子节点

        traversingNodes(one.childNodes)

      }

      updatePos()

    }

  }



  // 普通元素更新位置的方法

  // 普通元素只需要考虑到是否到达了分页点，即当前距离顶部高度 - 上一个分页点的高度 大于 正常一页的高度，则需要载入分页点

  function updateNormalElPos(top) {

    if (top - (pages.length > 0 ? pages[pages.length - 1] : 0) >= originalPageHeight) {

      pages.push((pages.length > 0 ? pages[pages.length - 1] : 0) + originalPageHeight)

    }

  }



  // 可能跨页元素位置更新的方法

  // 需要考虑分页元素，则需要考虑两种情况

  // 1. 普通达顶情况，如上

  // 2. 当前距离顶部高度加上元素自身高度 大于 整页高度，则需要载入一个分页点

  function updateTablePos(eHeight: number, top: number) {

    // 如果高度已经超过当前页，则证明可以分页了

    if (top - (pages.length > 0 ? pages[pages.length - 1] : 0) >= originalPageHeight) {

      pages.push((pages.length > 0 ? pages[pages.length - 1] : 0) + originalPageHeight)

    }

    // 若 距离当前页顶部的高度 加上元素自身的高度 大于 一页内容的高度, 则证明元素跨页，将当前高度作为分页位置

    else if (

      top + eHeight - (pages.length > 0 ? pages[pages.length - 1] : 0) > originalPageHeight &&

      top !== (pages.length > 0 ? pages[pages.length - 1] : 0)

    ) {

      pages.push(top)

    }

  }



  // 深度遍历节点的方法

  traversingNodes(element.childNodes)



  function updatePos() {

    while (pages[pages.length - 1] + originalPageHeight < height) {

      pages.push(pages[pages.length - 1] + originalPageHeight)

    }

  }



  // 对pages进行一个值的修正，因为pages生成是根据根元素来的，根元素并不是我们实际要打印的元素，而是element，

  // 所以要把它修正，让其值是以真实的打印元素顶部节点为准

  const newPages = pages.map(item => item - pages[0])



  // 根据分页位置 开始分页

  for (let i = 0; i < newPages.length; ++i) {

    // 根据分页位置新增图片

    addImage(baseX, baseY + tHeaderHeight - newPages[i], pdf, data!, width, height)

    // 将 内容 与 页眉之间留空留白的部分进行遮白处理

    addBlank(0, tHeaderHeight, A4_WIDTH, baseY)

    // 将 内容 与 页脚之间留空留白的部分进行遮白处理

    addBlank(0, A4_HEIGHT - baseY - tFooterHeight, A4_WIDTH, baseY)

    // 对于除最后一页外，对 内容 的多余部分进行遮白处理

    if (i < newPages.length - 1) {

      // 获取当前页面需要的内容部分高度

      const imageHeight = newPages[i + 1] - newPages[i]

      // 对多余的内容部分进行遮白

      addBlank(0, baseY + imageHeight + tHeaderHeight, A4_WIDTH, A4_HEIGHT - imageHeight)

    }



    // 添加页眉

    if (header) {

      await addHeader(header)

    }



    // 添加页脚

    if (footer) {

      await addFooter(newPages.length, i + 1, footer)

    }



    // 若不是最后一页，则分页

    if (i !== newPages.length - 1) {

      // 增加分页

      pdf.addPage()

    }

  }

  return pdf.save(filename)

}

4.分页的小姿势

如果有需求把打印预览的时候的页眉页脚默认取消不展示，然后自定义页面的边距可以这么设置样式

@page {

  size: auto A4 landscape;

  margin: 3mm;

}



@media print {

  body,

  html {

    height: initial;

    padding: 0px;

    margin: 0px;

  }

}

5.关于页眉页脚

由于业务是属于比较自定义化的展示，所以我封装成组件，然后根据返回的数据进行渲染到每个界面，然后利用绝对定位放在相同的位置，最后一点小优化就是，公共化提取界面的样式，然后整合为pub.scss然后引入到界面里面，这样即使产品有一定的样式调整，我也可以在公共样式里面去配置和修改，大大的减少本人的工作量。在日常的开发中也是这样，不要去抱怨需求的变动频繁，而是力争在写组件的过程中考虑到组件的健壮性和灵活度，给自己的工作减负，到点下班。

参考文章

juejin.cn/post/732343…

在前端开发中，大屏适配一直是个让人头疼的问题。领导总是要求大屏既要不留白，又要不变形，还要没有滚动条。这看似简单的要求，实际却压根不可能。今天，我们就来聊聊大屏适配的四种常见模式，以及如何根据实际需求选择合适的方案。

一、大屏适配的困境

在大屏项目中，适配问题几乎是每个开发者都会遇到的挑战。屏幕尺寸的多样性、设计稿与实际屏幕的比例差异，都使得适配变得复杂。而领导的“既要...又要...还要...”的要求，更是让开发者们感到无奈。不过，我们可以通过合理选择适配模式来尽量满足这些需求。

二、四种适配模式

在大屏适配中，常见的适配模式有以下四种：

（以下截图中模拟视口1200px*500px和800px*600px，设计稿为1920px*1080px）

1. 拉伸填充（fill）

• 特点：内容会被拉伸变形，以完全填充视口框。这种方式可以确保视口内没有空白区域，但可能会导致内容变形。


• 适用场景：适用于对内容变形不敏感的场景，例如全屏背景图。

2. 保持比例（contain）

• 特点：内容保持原始比例，不会被拉伸变形。如果内容的宽高比与视口不一致，会在视口内出现空白区域（黑边）。这种方式可以确保内容不变形，但可能会留白。


• 适用场景：适用于需要保持内容原始比例的场景，例如视频或图片展示。

3. 滚动显示（scroll）

• 特点：内容不会被拉伸变形，当内容超出视口时会添加滚动条。这种方式可以确保内容完整显示，但用户需要滚动才能查看全部内容。


• 适用场景：适用于内容较多且需要完整显示的场景，例如长列表或长文本。

4. 隐藏超出（hidden）

• 特点：内容不会被拉伸变形，当内容超出视口时会隐藏超出部分。这种方式可以避免滚动条的出现，但可能会隐藏部分内容。


• 适用场景：适用于内容较多但不需要完整显示的场景，例如仪表盘。

三、为什么不能同时满足所有要求？

这四种适配模式各有优缺点，但它们在逻辑上是相互矛盾的。具体来说：

• 不留白：要求内容完全填充视口，没有任何空白区域。这通常需要拉伸或缩放内容以适应视口的宽高比。


• 不变形：要求内容保持其原始宽高比，不被拉伸或压缩。这通常会导致内容无法完全填充视口，从而出现空白区域（黑边）。


• 没滚动条：要求内容完全适应视口，不能超出视口范围。这通常需要隐藏超出部分或限制内容的大小。

这三个要求在逻辑上是相互矛盾的：

• 如果内容完全填充视口（不留白），则可能会变形。


• 如果内容保持原始比例（不变形），则可能会出现空白区域（留白）。


• 如果内容超出视口范围，则需要滚动条或隐藏超出部分。

四、【fitview】插件快速实现大屏适配

fitview 是一个视口自适应的 JavaScript 插件，它支持多种适配模式，能够快速实现大屏自适应效果。

github地址：github.com/pbstar/fitv…

在线预览：pbstar.github.io/fitview

以下是它的基本使用方法：

配置

• el: 需要自适应的 DOM 元素


• fit: 自适应模式，字符串，可选值为 fill、contain（默认值）、scroll、hidden


• resize: 是否监听元素尺寸变化，布尔值，默认值 true

安装引入

npm 安装

npm install fitview

esm 引入

import fitview from "fitview";

cdn 引入

<script src="https://unpkg.com/fitview@[version]/lib/fitview.umd.js"></script>

使用示例

<div id="container">

  <div style="width:1920px;height:1080px;"></div>

</div>

const container = document.getElementById("container");

new fitview({

  el: container,

});

五、总结

大屏适配是一个复杂的问题，不同的项目有不同的需求。虽然不能同时满足“不留白”“不变形”和“没滚动条”这三个要求，但可以通过合理选择适配模式来尽量满足大部分需求。在实际开发中，我们需要根据项目的具体需求和用户体验来权衡，选择最合适的适配方案。

在选择适配方案时，fitview 这个插件可以提供很大的帮助。它支持多种适配模式，能够快速实现大屏自适应效果。如果你正在寻找一个简单易用的适配工具，fitview 值得一试。你可以通过 npm 安装或直接使用 CDN 引入，快速集成到你的项目中。

希望这篇文章能帮助你更好地理解和选择大屏适配方案。如果你有更多问题或建议，欢迎在评论区留言。

作为一名前端开发者，我们一定都遇到过这样的需求：实现一个占满整个屏幕的欢迎页、弹窗蒙层或者一个 fixed 定位的底部菜单。

直觉告诉我们，这很简单，给它一个 height: 100vh 就行了。

.fullscreen-element {

    height: 100vh;

    width: 100%;

    color: #000;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 10em;

    background-color: #fff;

}

在PC端预览，完美！然而，当你在手机上打开时，可能会看到下面这个令人抓狂的场景：

明明是 100vh，为什么会超出屏幕高度？这个烦人的滚动条到底从何而来？

如果你也曾为此抓耳挠腮，那么恭喜你，这篇文章就是你的“终极答案”。今天，我将带你彻底搞懂 100vh 在移动端的“坑”，并为你介绍当下最完美的解决方案。

1. 问题根源：移动端动态变化的“视口”

要理解问题的本质，我们首先要明白 vh (Viewport Height) 单位的定义：1vh 等于视口高度的 1%。

在PC端，浏览器窗口大小是相对固定的，所以 100vh 就是浏览器窗口的可见高度，这没有问题。

但在移动端，情况变得复杂了。为了在有限的屏幕空间里提供更好的浏览体验，手机浏览器（尤其是Safari和Chrome）的地址栏和底部工具栏是动态变化的。

• 初始状态：当你刚进入页面时，地址栏和工具栏是完全显示的。


• 滚动时：当你向下滚动页面，这些UI元素会自动收缩，甚至隐藏，以腾出更多空间展示网页内容。

关键点来了：大多数移动端浏览器将 100vh 定义为“最大视口高度”，也就是当地址栏和工具栏完全收起时的高度。

这就导致了：

在页面初始加载、地址栏还未收起时，100vh 的实际计算高度 > 屏幕当前可见区域的高度。

于是，那个恼人的滚动条就出现了。

2. “过去式”的解决方案：JavaScript 动态计算

在很长一段时间里，前端开发者们只能求助于 JavaScript 来解决这个问题。思路很简单：通过 window.innerHeight 获取当前可见视口的高度，然后用它来动态设置元素的 height。

JavaScript

function setRealVH() {

  const vh = window.innerHeight * 0.01;

  document.documentElement.style.setProperty('--vh', `${vh}px`);

}



// 初始加载时设置

window.addEventListener('load', setRealVH);

// 窗口大小改变或旋转屏幕时重新设置

window.addEventListener('resize', setRealVH);

然后在 CSS 中这样使用：

CSS

.fullscreen-element {

  height: calc(var(--vh, 1vh) * 100);

}

这个方案的缺点显而易见：

• 性能开销：监听 resize 事件过于频繁，可能会引发性能问题。


• 逻辑耦合：纯粹的样式问题却需要JS来解决，不够优雅。


• 时机问题：执行时机需要精确控制，否则可能出现闪烁。

虽然能解决问题，但这绝不是我们想要的“终极方案”。

3. “现在时”的终极解决方案：CSS动态视口单位

谢天谢地，CSS 工作组听到了我们的呼声！为了解决这个老大难问题，CSS Values and Units Module Level 4 引入了一套全新的动态视口单位。

它们就是我们今天的“主角”：

• svh (Small Viewport Height): 最小视口高度。对应于地址栏和工具栏完全展开时的可见高度。


• lvh (Large Viewport Height): 最大视口高度。对应于地址栏和工具栏完全收起时的高度（这其实就等同于旧的 100vh）。


• dvh (Dynamic Viewport Height): 动态视口高度。这是最智能、最实用的单位！它的值会随着浏览器UI元素（地址栏）的出现和消失而动态改变。

所以，我们的终极解决方案就是：

CSS

.fullscreen-element {

  height: 100svh; /* 如果你希望高度固定，且永远不被遮挡 */

  /* 或者，也是我最推荐的 */

  height: 100dvh; /* 如果你希望元素能动态地撑满整个可见区域 */

}

使用 100dvh，当地址栏收起时，元素高度会平滑地增加以填满屏幕；当地址栏滑出时，元素高度又会平滑地减小。整个过程如丝般顺滑，没有任何滚动条，完美！

浏览器兼容性

你可能会担心兼容性问题。好消息是，从2023年开始，所有主流现代浏览器（Safari, Chrome, Edge, Firefox）都已经支持了这些新的视口单位。

(数据截至2025年6月，兼容性已非常好)

可以看到，兼容性已经非常理想。除非你需要支持非常古老的浏览器版本，否则完全可以放心地在生产环境中使用。

告别 100vh 的时代

让我们来快速回顾一下：

当需要实现移动端全屏布局时，请大胆地告别 100vh，拥抱 100dvh！

随着人工智能技术的不断发展，图像处理应用已经在医疗影像分析、自动驾驶、视频监控等领域得到广泛应用。TensorFlow.js 是 Google 开源的机器学习库 TensorFlow 的 JavaScript 版本，能够让开发者在浏览器中运行机器学习模型，在前端应用中轻松实现图像分类、物体检测和姿态估计等功能。本文将介绍如何使用 TensorFlow.js 在纯前端环境中实现这三项任务，并帮助你构建一个智能图像处理应用。

什么是 TensorFlow.js？

TensorFlow.js 是一个能够让开发者在前端直接运行机器学习模型的 JavaScript 库。它允许你无需将数据发送到服务器，便可以在浏览器中运行模型进行推理，这不仅减少了延迟，还可以更好地保护用户的隐私数据。通过 TensorFlow.js，前端开发者能够轻松实现图像分类、物体检测和姿态估计等功能。

TensorFlow.js 的应用非常广泛，尤其是在一些实时交互和隐私敏感的场景下，例如 医疗影像分析、自动驾驶 和 智能监控。在这些领域，前端模型推理能够提升响应速度，并且避免将用户的数据上传到服务器，从而保护用户的隐私。

要开始使用 TensorFlow.js，你需要安装相关的模型库。以下是你需要安装的 npm 包：

npm install @tensorflow/tfjs

npm install @tensorflow-models/mobilenet

npm install @tensorflow-models/coco-ssd

npm install @tensorflow-models/posenet

加载预训练模型

在 TensorFlow.js 中，加载预训练模型非常简单。首先，确保 TensorFlow.js 已经准备好，然后加载所需的模型进行推理。

// 导入

import * as tf from '@tensorflow/tfjs'

// 加载

tf.ready(); // 确保 TensorFlow.js 准备好

用户上传图片

为了使用这些模型进行推理，我们需要让用户上传一张图片。以下是一个处理图片上传的代码示例：

const handleImageUpload = async (event) => {

  const file = event.target.files[0]

  if (file) {

    const reader = new FileReader()

    reader.onload = async (e) => {

      imageSrc.value = e.target.result

      await runModels(e.target.result)

    }

    reader.readAsDataURL(file)

  }

}

图像分类：识别图片中的物体

图像分类是计算机视觉中的基本任务，目的是将输入图像归类到某个类别中。例如，我们可以用图像分类模型识别图像中的“猫”还是“狗”。

使用预训练模型进行图像分类

TensorFlow.js 提供了多个预训练模型，MobileNet 是其中一个常用的图像分类模型。它是一个轻量级的卷积神经网络，适合用来进行图像分类。接下来，我们通过 MobileNet 实现一个图像分类功能：

const mobilenetModel = await mobilenet.load()

const predictions = await mobilenetModel.classify(image)

classification.value = `分类结果: ${predictions[0].className}, 信心度: ${predictions[0].probability.toFixed(3)}`

这段代码实现了图像分类。我们加载 MobileNet 模型，并对用户上传的图像进行推理，最后返回图像的分类结果。

物体检测：找出图像中的所有物体

物体检测不仅仅是识别图像中的物体是什么，还需要标出它们的位置，通常用矩形框来框住物体。Coco-SSD 是一个强大的物体检测模型，能够在图像中检测出多个物体并标出它们的位置。

使用 Coco-SSD 进行物体检测

const cocoModel = await cocoSsd.load();

const detectionResults = await cocoModel.detect(image);

objects.value = detectionResults.map((prediction) => ({

  class: prediction.class,

  bbox: prediction.bbox,

}));

通过 Coco-SSD 模型，我们可以检测图像中的多个物体，并标出它们的位置。

绘制物体的边界框

为了更直观地展示检测结果，我们可以在图像上绘制出物体的边界框：

// 绘制物体检测边界框

const drawObjects = (detectionResults, image) => {

  nextTick(() => {

    const ctx = objectCanvas.value.getContext('2d')

    const imageWidth = image.width

    const imageHeight = image.height

    objectCanvas.value.width = imageWidth

      objectCanvas.value.height = imageHeight

      ctx.clearRect(0, 0, objectCanvas.value.width, objectCanvas.value.height)

      ctx.drawImage(image, 0, 0, objectCanvas.value.width, objectCanvas.value.height)

      // 绘制边界框

      detectionResults.forEach((prediction) => {

        const [x, y, width, height] = prediction.bbox

        ctx.beginPath()

        ctx.rect(x, y, width, height)

        ctx.lineWidth = 2

        ctx.strokeStyle = 'green'

        ctx.stroke()

        // 添加标签

        ctx.font = '16px Arial'

        ctx.fillStyle = 'green'

        ctx.fillText(prediction.class, x + 5, y + 20)

      })

  })

}

这段代码通过绘制边界框来标出检测到的物体位置，同时在边界框旁边显示物体类别。

姿态估计：识别人体的关键点

姿态估计主要是识别人类的身体部位，例如头部、手臂、腿部等。通过这些关键点，我们可以了解一个人当前的姿势。TensorFlow.js 提供了 PoseNet 模型来进行姿态估计。

使用 PoseNet 进行姿态估计

// 加载 PoseNet 模型

const posenetModel = await posenet.load()

const poseResult = await posenetModel.estimateSinglePose(image, {

  flipHorizontal: false

})

​

// 人体关键点

pose.value = poseResult.keypoints.map((point) => `${point.part}: (${point.position.x.toFixed(2)}, ${point.position.y.toFixed(2)})`)

PoseNet 模型会估计图像中人物的关键点，并返回每个关键点的位置。

绘制姿态估计骨架图

const drawPose = (keypoints, image) => {

  nextTick(() => {

    const ctx = canvas.value.getContext('2d')

    const imageWidth = image.width

    const imageHeight = image.height

    canvas.value.width = imageWidth

      canvas.value.height = imageHeight

      ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)

      // 绘制图像

      ctx.drawImage(image, 0, 0, canvas.value.width, canvas.value.height)

      const scaleX = canvas.value.width / image.width

      const scaleY = canvas.value.height / image.height

      // 绘制关键点并标记名称

      keypoints.forEach((point) => {

        const { x, y } = point.position

        const scaledX = x * scaleX

        const scaledY = y * scaleY

        ctx.beginPath()

        ctx.arc(scaledX, scaledY, 5, 0, 2 * Math.PI)

        ctx.fillStyle = 'red'

        ctx.fill()

        // 标记点的名称

        ctx.font = '12px Arial'

        ctx.fillStyle = 'blue'

        ctx.fillText(point.part, scaledX + 8, scaledY)

      })

      // 连接骨架

      const poseConnections = [

        ['leftShoulder', 'rightShoulder'],

        ['leftShoulder', 'leftElbow'],

        ['leftElbow', 'leftWrist'],

        ['rightShoulder', 'rightElbow'],

        ['rightElbow', 'rightWrist'],

        ['leftHip', 'rightHip'],

        ['leftShoulder', 'leftHip'],

        ['rightShoulder', 'rightHip'],

        ['leftHip', 'leftKnee'],

        ['leftKnee', 'leftAnkle'],

        ['rightHip', 'rightKnee'],

        ['rightKnee', 'rightAnkle'],

        ['leftEye', 'rightEye'],

        ['leftEar', 'leftShoulder'],

        ['rightEar', 'rightShoulder']

      ]

      poseConnections.forEach(([partA, partB]) => {

        const keypointA = keypoints.find((point) => point.part === partA)

        const keypointB = keypoints.find((point) => point.part === partB)

        if (keypointA && keypointB && keypointA.score > 0.5 && keypointB.score > 0.5) {

          const scaledX1 = keypointA.position.x * scaleX

          const scaledY1 = keypointA.position.y * scaleY

          const scaledX2 = keypointB.position.x * scaleX

          const scaledY2 = keypointB.position.y * scaleY

          ctx.beginPath()

          ctx.moveTo(scaledX1, scaledY1)

          ctx.lineTo(scaledX2, scaledY2)

          ctx.lineWidth = 2

          ctx.strokeStyle = 'blue'

          ctx.stroke()

        }

      })

  })

}

这段代码通过 PoseNet 返回的人体关键点信息，绘制人体姿态的骨架图，帮助用户理解图像中的人物姿势。

总结

通过 TensorFlow.js，我们可以轻松地将图像分类、物体检测和姿态估计等功能集成到前端应用中，无需依赖后端计算，提升了应用的响应速度并保护了用户隐私。在本文中，我们介绍了如何使用 MobileNet、Coco-SSD 和 PoseNet 等预训练模型，在前端实现智能图像处理应用。无论是开发图像识别应用还是增强现实应用，TensorFlow.js 都是一个强大的工具，值得前端开发者深入学习和使用。

你知道网易有多少个前端项目吗？

超过 1000 个代码仓库、200+子应用、每天发布300次。

如果没有一套微前端治理系统，项目早炸了。

今天就来带你拆解网易微前端架构的核心——基座 + 动态加载 + 权限隔离 + 独立发布。

一、网易为什么早早就用上了微前端？

因为早年起就有大量频道、游戏门户、社区运营、CMS后台等：

• 功能多样、团队独立


• 迭代频繁、部署不可等待


• 技术栈各异：Vue2、Vue3、React、甚至还有 jQuery...

👇于是他们选择了模块化能力最强的方案：微前端架构（Micro Frontends）

二、整体架构图（网易实战版）

三、主子应用通信怎么做？（网易方案）

网易没有用 qiankun，而是基于内部封装的微前端 SDK，核心原理类似。

// 主应用提供通信桥

window.__MICRO_APP_EVENT_BUS__ = new EventTarget()



// 子应用监听事件

window.__MICRO_APP_EVENT_BUS__.addEventListener('global-refresh', () => {

  window.location.reload()

})



// 主应用触发事件

window.__MICRO_APP_EVENT_BUS__.dispatchEvent(new Event('global-refresh'))

👉这种方式：

• 不侵入框架（Vue/React 通吃）


• 不耦合代码，只用浏览器原生事件系统

四、部署与权限如何统一管理？

网易配套了一整套“发布平台 + 权限系统”，做到：

五、实战代码：子应用注册和加载

// 主应用注册子应用（JSON 配置化）

const microAppList = [  {    name: 'content-manage',    entry: 'https://cdn.xxx.com/apps/content-manage/index.html',    activeRule: '/content'  },  {    name: 'user-center',    entry: 'https://cdn.xxx.com/apps/user-center/index.html',    activeRule: '/user'  }]



// 动态加载示例（简化版）

function loadMicroApp(appConfig) {

  const iframe = document.createElement('iframe')

  iframe.src = appConfig.entry

  iframe.style = 'width:100%;height:100%;border:none'

  document.getElementById('micro-container').appendChild(iframe)

}

六、网易踩过的3个坑（干货！）

七、总结：你能从中学到什么？

• 不要迷信 qiankun，自己也能搞微前端（原理简单）


• 微前端不仅是技术，更是权限、部署、治理一整套体系


• 想要稳定运行，必须有主子应用契约 + 灰度发布 + 统一通信策略

尾声：

“你看到的稳定，其实是他们踩了无数坑后的优雅。”

引言

最近在折腾油猴脚本开发，顺手搞了一个可以拦截任意网页接口的小工具，并修改了CSDN的博客数据接口，成功的将文章总数和展现量进行了修改。

如果你不了解什是油猴，参考这篇文章：juejin.cn/book/751468…

然后我突然灵光一闪：

既然能拦截接口、篡改数据，那我为什么不顺便测试一下 CSDN 博客在极端数据下的表现呢？

毕竟我们平时开发的时候，测试同学各种花式挑刺，什么 null、undefined、999999、-1、空数组……

每次都能把页面测出一堆边角 bug。

今天，轮到我来当一回“灵魂测试”了！

用我的脚本，造几个极限场景，看看 CSDN 的前端到底稳不稳！

实现原理

其实原理并不复杂，核心就一句话：

借助油猴的脚本注入能力 + ajax-hook 对接口请求进行拦截和修改。

我们知道，大部分网页的数据接口都是通过 XMLHttpRequest 或 fetch 发起的，而 ajax-hook 就是一个开源的轻量工具，它能帮我们劫持原生的 XMLHttpRequest，在请求发出前、响应返回后进行自定义处理。

配合油猴脚本的注入机制，我们就可以实现在浏览器端伪造任意接口数据，用来调试前端样式、模拟数据异常、测试权限控制逻辑等等。

ajax-hook 快速上手

我们用的是 CDN 方式直接引入，简单暴力：

<script src="https://unpkg.com/ajax-hook@3.0.3/dist/ajaxhook.min.js"></script>

引入后，页面上会多出一个全局对象 ah，我们只需要调用 ah.proxy()，就可以注册一套钩子：

ah.proxy({

  onRequest: (config, handler) => {

    // 请求发出前

    handler.next(config);

  },

  onError: (err, handler) => {

    // 请求出错时

    handler.next(err);

  },

  onResponse: (response, handler) => {

    // 请求成功响应后

    console.log("响应内容：", response.response);

    handler.next(response);

  }

});

拦截实现

我们以 CSDN 博客后台为例，先找到博客数据接口

地址长这样：bizapi.csdn.net/blog/phoeni…

我们在 onResponse 钩子中，加入 URL 判断，专门拦截这个接口：

onResponse: (response, handler) => {

  if (response.config.url.includes("https://bizapi.csdn.net/blog/phoenix/console/v1/data/blog-statistics")) {

    const hookResponse = JSON.parse(response.response);

    console.log("拦截到的数据：", hookResponse);

    handler.next(response);

  } else {

    handler.next(response);

  }

}

就这样，接口拦截器初步搭建完成！

使用油猴将脚本运行在网页

接下来我们用油猴把这段脚本注入到 CSDN 博客后台页面。

// ==UserScript==

// @name         CSDN博客数据接口拦截

// @namespace    http://tampermonkey.net/

// @version      0.0.1

// @description  拦截接口数据，验证极端情况下的样式展示

// @author       石小石Orz

// @match        https://mpbeta.csdn.net/*

// @require      https://unpkg.com/ajax-hook@3.0.3/dist/ajaxhook.min.js

// @run-at       document-start

// @grant        none

// ==/UserScript==



(function() {

  'use strict';



  ah.proxy({

    onRequest: (config, handler) => {

      handler.next(config);

    },

    onError: (err, handler) => {

      handler.next(err);

    },

    onResponse: (response, handler) => {

      console.log("接口响应列表：", response);

      // 这里写拦截逻辑

      handler.next(response);

    }

  });

})();

为了测试前端的容错能力，我们可以伪造一些极端数据返回：

• 文章总数设为 null


• 展现量设为 0


• 点赞数设为一个异常大的值

onResponse: (response, handler) => {

  if (response.config.url.includes("https://bizapi.csdn.net/blog/phoenix/console/v1/data/blog-statistics")) {

    const hookResponse = JSON.parse(response.response);



    // 伪造数据

    hookResponse.data[0].num = null;                    // 文章总数

    hookResponse.data[1].num = 0;                       // 展现量

    hookResponse.data[2].num = 99999999999999999;       // 点赞数



    console.log("修改后的数据：", hookResponse);



    response.response = JSON.stringify(hookResponse);

  }

  handler.next(response);

}

结果验证

修改成功后刷新页面，可以观察到如下问题：

• 文章总数为 null 时，布局异常，显然缺乏空值判断。


• 点赞数为超大值 时，页面直接渲染出 100000000000000000，不仅视觉上溢出容器，连排版都崩了，前端没有做任何兼容处理。

CSDN的前端还是偷懒了呀，一点也不严谨！差评！

总结

通过这篇文章的示例，我们前端应该引以为戒，永远不要相信后端同学返回的数据，一定要做好容错处理！

通过本文，相信大家也明白了油猴脚本不仅是玩具，它在前端开发中其实是个非常实用的辅助工具！

如果你对油猴脚本的开发感兴趣，不妨看看我写的这篇教程 《油猴脚本实战指南》

从小脚本写起，说不定哪天你也能靠一个脚本搞出点惊喜来！

urls.forEach(url => {

  const link = document.createElement('a');

  link.href = url;

  link.download = 'filename';

  document.body.appendChild(link);

  link.click();

  document.body.removeChild(link);

});

downloadFileBatch(url) {

  const iframe = document.createElement('iframe');

  iframe.style.display = 'none';

  iframe.style.height = '0';

  iframe.src = this.urlProtocolDelete(url);

  document.body.appendChild(iframe);

  

  setTimeout(() => {

      iframe.remove();

  }, 5000);

}



urlProtocolDelete(url: string = '') {

  if (!url) {

      return;

  }

  return url.replace('http://', '//').replace('https://', '//');

}

const iframe = document.createElement('iframe');

iframe.style.display = 'none';

iframe.style.height = '0';

urlProtocolDelete(url: string = '') {

  return url.replace('http://', '//').replace('https://', '//');

}

这个函数将 URL 中的协议部分替换为//，这样可以确保在 HTTPS 页面中请求 HTTP 资源时不会出现混合内容警告。

3. 触发下载并清理 DOM：

iframe.src = this.urlProtocolDelete(url);

document.body.appendChild(iframe);



setTimeout(() => {

    iframe.remove();

}, 5000);

将 iframe 添加到 DOM 中会触发浏览器对 src 的请求，从而开始下载文件。设置 5 秒的超时时间后移除 iframe，既保证了下载有足够的时间完成，又避免了 DOM 中积累过多无用元素。

四、批量下载的实现与优化

对于多个文件的批量下载，可以通过循环调用 downloadFileBatch 方法：

result.forEach(item => {

  this.downloadFileBatch(item.url);

});

五、踩坑+注意点

在实现批量下载 XML 文件功能时，你可能会遇到这种情况：明明请求的 URL 地址无误，服务器也返回了正确的数据，但文件却没有被下载到本地，而是直接在浏览器中打开预览了。这是因为 XML 作为一种可读的文本格式，浏览器默认会将其视为可直接展示的内容，而非需要下载保存的文件。

解决方案：
通过在下载链接中添加response-content-disposition=attachment参数，可以强制浏览器将 XML 文件作为附件下载，而非直接预览。这个参数会覆盖浏览器的默认行为，明确告诉浏览器 "这是一个需要下载保存的文件"。

addDownloadDisposition(url: string, filename: string): string {

  try {

    const urlObj = new URL(url);

    

    // 添加 response-content-disposition 参数

    const disposition = `attachment;filename=${encodeURIComponent(filename)}`;

    urlObj.searchParams.set('response-content-disposition', disposition);

    

    return urlObj.toString();

  } catch (error) {

    console.error('URL处理失败:', error);

    return url;

  }

}

六、大量文件并发控制

有待补充

🔍 一、什么是 Blob？

Blob（Binary Large Object）是 HTML5 提供的一个用于表示不可变的、原始二进制数据块的对象。

✨ 特点：

• 不可变性：一旦创建，内容不能修改。


• 可封装任意类型的数据：字符串、ArrayBuffer、TypedArray 等。


• 支持 MIME 类型描述，方便浏览器识别用途。

💡 示例：

const blob = new Blob(['Hello World'], { type: 'text/plain' });

🧠 二、Base64 编码的前世今生

虽然名字听起来像是某种“64进制”，但实际上它是一种编码方式，不是数学意义上的“进制”。

📜 起源背景：

Base64 最早起源于电子邮件协议 MIME（Multipurpose Internet Mail Extensions），因为早期的电子邮件系统只能传输 ASCII 文本，不能直接传输二进制数据（如附件）。于是人们发明了 Base64 编码方法，把二进制数据转换成文本形式，从而安全地在网络上传输。

🧩 使用场景：

⚠️ 注意：Base64 并非压缩算法，它会将数据体积增加约 33%。

🔁 三、从 Base64 到 Blob 的全过程

1. Base64 字符串解码：atob()

JavaScript 提供了一个内置函数 atob()，可以将 Base64 字符串解码为原始的二进制字符串（ASCII 表示）。

const base64Data = 'SGVsbG8gd29ybGQh'; // "Hello world!"

const binaryString = atob(base64Data);

⚠️ 返回的是 ASCII 字符串，不是真正的字节数组。

2. 构建 Uint8Array（字节序列）

为了构造 Blob，我们需要一个真正的字节数组。我们可以用 charCodeAt() 将每个字符转为对应的 ASCII 数值（即 0~255 的整数）。

const byteArray = new Uint8Array(binaryString.length);



for (let i = 0; i < binaryString.length; i++) {

    byteArray[i] = binaryString.charCodeAt(i);

}

现在，byteArray 是一个代表原始图片二进制数据的数组。

3. 创建 Blob 对象

有了字节数组，就可以创建 Blob 对象了：

const blob = new Blob([byteArray], { type: 'image/png' });

这个 Blob 对象就代表了一张 PNG 图片的二进制内容。

4. 使用 URL.createObjectURL() 显示图片

为了让浏览器能够加载这个 Blob 对象，我们需要生成一个临时的 URL 地址：

const imageUrl = URL.createObjectURL(blob);

document.getElementById('blobImage').src = imageUrl;

这样，你就可以在网页中看到这张图片啦！

🛠️ 四、Blob 的核心功能与应用场景

🧪 五、Blob 的高级玩法

1. 文件切片上传（分片上传）

const chunkSize = 1024 * 1024; // 1MB

const firstChunk = blob.slice(0, chunkSize);

2. Blob 转换为其他格式

• FileReader.readAsText(blob) → 文本


• FileReader.readAsDataURL(blob) → Base64


• FileReader.readAsArrayBuffer(blob) → Array Buffer

3. Blob 下载为文件

const a = document.createElement('a');

a.href = URL.createObjectURL(blob);

a.download = 'example.png';

a.click();

🧩 六、相关知识点汇总

🧾 七、完整代码回顾

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <title>Blob 实战</title>

</head>

<body>

  <img src="" id="blobImage" width="100" height="100" alt="Blob Image" />



  <script>

    const base64Data = 'UklGRiAHAABXRUJQVlA4IBQHAACwHACdASpQAFAAPok0lEelIyIhMziOYKARCWwAuzNaQpfW+apU37ZufB5rAHqW2z3mF/aX9o/ev9LP+j9KrqSOfp9mf+6WmE1P1yFc3gTlw8B8d/TebelHaI3mplPrZ+Aa0l5qDGv5N8Tt9vYhz3IH37wqm2al+FdcFQhDnObv2+WfpwIZ+K6eBPxKL2RP6hiC/K1ZynnvVYth9y+ozyf88Obh4TRYcv3nkkr43girwwJ54Gd0iKBPZFnZS+gd1vKqlfnPT5wAwzxJiSk+pkbtcOVP+QFb2uDqUhuhNiHJ8xPt6VfGBfUbTsUzYuKgAP4L9wrkT8KU4sqIHwM+ZeKDBpGq58k0aDirXeGc1Odhvfx+cpQaeas97zVTr2pOk5bZkI1lkF9jnc0j2+Ojm/H+uPmIhS7/BlxuYfgnUCMKVZJGf+iPM44vA0EwvXye0YkUUK...';



    const binaryString = atob(base64Data); // Base64 解码

    const byteArray = new Uint8Array(binaryString.length); // 创建 Uint8Array



    for (let i = 0; i < binaryString.length; i++) {

        byteArray[i] = binaryString.charCodeAt(i); // 填充字节数据

    }



    const blob = new Blob([byteArray], { type: 'image/png' }); // 创建 Blob

    const imageUrl = URL.createObjectURL(blob); // 生成 URL



    document.getElementById('blobImage').src = imageUrl; // 显示图片

  </script>

</body>

</html>

📚 八、扩展阅读建议

• MDN - Blob


• MDN - Base64 编码与解码


• MDN - TypedArray

🧩 九、结语

Blob 是连接 JavaScript 世界与真实二进制世界的桥梁，是每一个想要突破瓶颈的前端开发者必须掌握的核心技能之一。
掌握了 Blob，你就拥有了操作二进制数据的能力，这在现代 Web 开发中是非常关键的一环。
下次当你看到一张图片在网页中加载出来，或者一个文件被顺利下载时，不妨想想：这一切的背后，都有 Blob 的身影。

void 0 是 JavaScript 中的一个表达式，它的作用是 返回 undefined。

解释：

常见用途：

• 防止默认行为（比如 <a> 标签的 href="javascript:void(0)"）：
  
  

  <a href="javascript:void(0);" onclick="alert('Clicked!')">
  
    点击不会跳转
  
  </a>
  
  

  
  

  这样点击链接时不会跳转页面，但仍然可以执行 JavaScript。



• 在函数中返回 undefined：
  
  

  function doSomething() {
  
    return void someOperation(); // 明确返回 undefined
  
  }
  
  

  
  

为什么用void 0

源码涉及到 undefined 表达都会被编译成 void 0

//源码  

const a: number = 6  

a === undefined  

  

//编译后  

"use strict";  

var a = 6;  

a === void 0;

也就是void 0 === undefined。void 运算符通常只能用于获取 undefined 的原始值，一般用void(0)，等同于void 0，也可以使用全局变量 undefined 替代。

为什么不直接写 undefined

undefined 是 js 原始类型值之一，也是全局对象window的属性，在一部分低级浏览器（IE7-IE8）中or局部作用域可以被修改。

undefined在js中，全局属性是允许被覆盖的。

//undefined是window的全局属性

console.log(window.hasOwnProperty('undefined'))

console.log(window.undefined)

//旧版IE

var undefined = '666'

console.log(undefined)//666 直接覆盖改写undefined

window.undefined在局部作用域中是可以被修改的 在ES5开始，undefined就已经被设定为仅可读的，但是在局部作用域内，undefined依然是可变的。

①某些情况下用undefined判断存在风险，因undefined有被修改的可能性，但是void 0返回值一定是undefined

②兼容性上void 0 基本所有的浏览器都支持

③ void 0比undefined字符所占空间少。

拓展

void(0) 表达式会返回 undefined 值，它一般用于防止页面的刷新，以消除不需要的副作用。

常见用法是在 <a> 标签上设置 href="javascript:void(0);"，即当单击该链接时，此表达式将会阻止浏览器去加载新页面或刷新当前页面的行为。

<!-- 点击下面的链接，不会重新加载页面，且可以得到弹框消息 -->

<a href="javascript:void(0);" onclick="alert('干的漂亮!')">

  点我呀

</a>

总结：

void 0 是一种确保得到 undefined 的可靠方式，虽然在现代 JavaScript 中直接用 undefined 也没问题，但在一些特殊场景（如代码压缩、兼容旧代码）仍然有用。

那是一个普通的周三早晨，我正对着产品经理刚丢过来的需求发呆——"在管理系统里加个3D机柜展示，要能开门的那种"。

"这不就是个模型展示吗？"我心想，"AI应该能搞定吧？"

9:30 AM - 启动摸鱼模式

我熟练地打开代码编辑器，把需求复制粘贴进AI对话框： "用Three.js实现一个带开门动画的机柜模型，要求有金属质感，门能90度旋转"

点击发送后，我惬意地靠在椅背上，顺手打开了B站。"让AI先忙会儿~"

10:30 AM - 验收时刻

一集《凡人修仙传》看完，我懒洋洋地切回编辑器。AI果然交出了答卷：

11:00 AM - 血压升高现场

看着AI生成的"未来科技风"机柜，我深吸一口气，决定亲自下场。毕竟，程序员最后的尊严就是——"还是自己来吧"。

11:30 AM - 手动抢救

首先手动创建一个空场景吧

class SceneManager {

  constructor() {

    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(

      75,

      window.innerWidth / window.innerHeight,

      0.1,

      1000

    );

    this.camera.position.set(0, 2, 5);



    this.renderer = new THREE.WebGLRenderer();

    this.renderer.setSize(window.innerWidth, window.innerHeight);

    const canvas = document.getElementById('renderCanvas');

    canvas.appendChild(this.renderer.domElement);



    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    this.controls.enableDamping = true;

    this.controls.dampingFactor = 0.05;

    this.controls.target.set(0, 3, 0);

    this.controls.update();



    this.addLights();

    this.addFloor();

  }



  addLights() {

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

    this.scene.add(ambientLight);



    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);

    directionalLight.position.set(5, 5, 5);

    this.scene.add(directionalLight);

  }



  addFloor() {

    const floorGeometry = new THREE.PlaneGeometry(10, 10);

    const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 });

    const floor = new THREE.Mesh(floorGeometry, floorMaterial);

    floor.rotation.x = -Math.PI / 2;

    this.scene.add(floor);

  }



  animate() {

    const animateLoop = () => {

      requestAnimationFrame(animateLoop);

      this.controls.update();

      this.renderer.render(this.scene, this.camera);

    };

    animateLoop();

  }



  onResize() {

    window.addEventListener('resize', () => {

      this.camera.aspect = window.innerWidth / window.innerHeight;

      this.camera.updateProjectionMatrix();

      this.renderer.setSize(window.innerWidth, window.innerHeight);

    });

  }

}

然后这机柜怎么画呢，不管了，先去吃个饭，天大地大肚子最大

12:30 PM - 程序员的能量补给时刻

淦！先干饭！" 我一把推开键盘，决定暂时逃离这个三维世界。毕竟——

扒饭间隙，手机突然震动。产品经理发来消息："那个3D机柜..."

我差点被饭粒呛到，赶紧回复："正在深度优化用户体验！"

（十分钟风卷残云后）

1:00 PM - 回归正题

吃饱喝足，终于可以专心搞机柜了,(此处可怜一下我的午休)

拆分机柜结构

机柜的结构可以分为以下几个部分：

实现步骤

接下来，我们开始用代码实现这些结构。

机柜结构的实现

1. 创建不可操作结构

底部

export function createCabinetBase(scene) {

  const geometry = new THREE.BoxGeometry(0.6,  0.05, 0.64);

  const base = new THREE.Mesh(geometry,  materials.baseMaterial);

  base.position.y = -0.05; // 调整位置

  scene.add(base);

}

底部使用BoxGeometry创建，设置了深灰色金属材质，位置调整为机柜的最底部。

顶部

export function createCabinetTop(scene) {

  const geometry = new THREE.BoxGeometry(0.6, 0.05,  0.64);

  const top = new THREE.Mesh(geometry, materials.baseMaterial);

  top.position.y = 1.95; // 调整位置

  scene.add(top);

}

顶部与底部类似，位置调整为机柜的最顶部。

侧面

export function createCabinetSides(scene) {

  const geometry = new THREE.BoxGeometry(0.04, 2, 0.6);

  const material = materials.baseMaterial;

  // 左侧面

  const leftSide = new THREE.Mesh(geometry, material);

  leftSide.position.set(-0.28, 0.95, 0); // 调整位置

  scene.add(leftSide);

  // 右侧面

  const rightSide = new THREE.Mesh(geometry, material);

  rightSide.position.set(0.28, 0.95, 0); // 调整位置

  scene.add(rightSide);

}

侧面使用两个BoxGeometry分别创建左侧和右侧，位置对称分布。

2. 创建可操作结构

前门

export function createCabinetFrontDoor(scene) {

    const doorGr0up = new THREE.Gr0up();

    const doorWidth = 0.04;

    const doorHeight = 2;

    const doorDepth = 0.6;



    const frameMaterial = materials.baseMaterial;

    const frameThickness = 0.04;



    // 上边框

    const topFrameGeo = new THREE.BoxGeometry(doorWidth, frameThickness, doorDepth);

    const topFrame = new THREE.Mesh(topFrameGeo, frameMaterial);

    topFrame.position.set(0, 1 - frameThickness / 2, 0);

    doorGr0up.add(topFrame);



    // 下边框

    const bottomFrameGeo = new THREE.BoxGeometry(doorWidth, frameThickness, doorDepth);

    const bottomFrame = new THREE.Mesh(bottomFrameGeo, frameMaterial);

    bottomFrame.position.set(0, -doorHeight / 2 + 0.05, 0);

    doorGr0up.add(bottomFrame);



    // 左右边框

    const leftFrameGeo = new THREE.BoxGeometry(doorWidth, doorHeight - 2 * frameThickness, frameThickness);

    const leftFrame = new THREE.Mesh(leftFrameGeo, frameMaterial);

    leftFrame.position.set(0, 1 - doorHeight / 2, -doorDepth / 2 + frameThickness / 2);

    doorGr0up.add(leftFrame);



    const rightFrameGeo = new THREE.BoxGeometry(doorWidth, doorHeight - 2 * frameThickness, frameThickness);

    const rightFrame = new THREE.Mesh(rightFrameGeo, frameMaterial);

    rightFrame.position.set(0, 1 - doorHeight / 2, doorDepth / 2 - frameThickness / 2);

    doorGr0up.add(rightFrame);



    scene.add(doorGr0up);

    return doorGr0up;

}

前门由一个Gr0up组装而成，包含上下左右边框，材质与机柜一致，后续将添加玻璃部分和动画。

前门动画的实现

前门的动画使用gsap库实现，设置旋转轴为左侧边框。

    gsap.to(frontDoor.rotation, {

        y: Math.PI / 2, // 90度旋转

        duration: 1,   // 动画时长

        ease: "power2.inOut",

    });

通过gsap.to方法，前门可以实现平滑的开门效果。

3. 添加后门

后门采用双开设计，左右两扇门分别由多个边框组成，并通过Gr0up进行组合。
为了优化细节我还加入了网孔结构（此处心疼一下我为写他掉的头发）

后门的实现

export function createCabinetBackDoor(scene) {

    const doorGr0up = new THREE.Gr0up();

    const doorWidth = 0.04;

    const doorHeight = 2;

    const doorDepth = 0.6;

    const singleDoorDepth = doorDepth / 2;

    const frameMaterial = materials.baseMaterial;

    const frameThickness = 0.04;



    function createSingleBackDoor(isLeft) {

        const singleGr0up = new THREE.Gr0up();



        // 上边框

        const topFrameGeo = new THREE.BoxGeometry(doorWidth, frameThickness, singleDoorDepth);

        const topFrame = new THREE.Mesh(topFrameGeo, frameMaterial);

        topFrame.position.set(0, 1 - frameThickness / 2, 0);

        singleGr0up.add(topFrame);



        // 下边框

        const bottomFrameGeo = new THREE.BoxGeometry(doorWidth, frameThickness, singleDoorDepth);

        const bottomFrame = new THREE.Mesh(bottomFrameGeo, frameMaterial);

        bottomFrame.position.set(0, -doorHeight / 2 + 0.05, 0);

        singleGr0up.add(bottomFrame);



        // 外侧边框

        const sideFrameGeo = new THREE.BoxGeometry(doorWidth, doorHeight - 2 * frameThickness, frameThickness);

        const sideFrame = new THREE.Mesh(sideFrameGeo, frameMaterial);

        sideFrame.position.set(

            0,

            1 - doorHeight / 2,

            isLeft

                ? -singleDoorDepth / 2 + frameThickness / 2

                : singleDoorDepth / 2 - frameThickness / 2

        );

        singleGr0up.add(sideFrame);



        return singleGr0up;

    }



    const leftDoor = createSingleBackDoor(true);

    const rightDoor = createSingleBackDoor(false);



    doorGr0up.add(leftDoor);

    doorGr0up.add(rightDoor);

    scene.add(doorGr0up);



    return { group: doorGr0up, leftDoor, rightDoor };

}

后门的实现与前门类似，采用双扇门设计，左右各一扇。

后门动画的实现

后门的动画同样使用gsap库实现，分别设置左右门的旋转轴。

 gsap.to(leftDoor.rotation, {

        y: Math.PI / 2, // 左门向外旋转90度

        duration: 1,

        ease: "power2.inOut",

    });



    gsap.to(rightDoor.rotation, {

        y: -Math.PI / 2, // 右门向外旋转90度

        duration: 1,

        ease: "power2.inOut",

    });

通过gsap.to方法，后门可以实现平滑的双开效果。

2:00 PM - 项目收尾

终于，随着最后一行代码的敲定，3D机柜模型在屏幕上完美呈现。前门优雅地打开，后门平滑地双开，仿佛在向我点头致意。

我靠在椅背上，长舒一口气，心中默念："果然，程序员的尊严还是要靠自己守护。"

可拓展功能

虽然当前的3D机柜模型已经实现了基本的展示和交互功能，但在实际项目中，我们可以进一步扩展以下功能：

1. U位标记

2. U位资产管理

3. 动态灯光效果

4. 数据联动

将3D机柜与后台数据联动：

• 实时更新设备状态。


• 显示设备的实时监控数据（如温度、功耗等）。


• 支持通过API接口获取和更新设备信息。

不说了，需求又来了（）我还是继续去搬砖了
代码地址：gitee.com/erhadong/th…

引言

作为一个深度使用Vue多年的开发者，最近我在新项目技术选型时，却最终选择了React。这个决定不是一时冲动，而是基于当前技术发展趋势、AI时代的需求以及生态系统的深度思考。

AI时代的前端需求

随着人工智能技术的飞速发展，前端开发的需求也发生了深刻的变化。现代应用不仅仅是静态页面或简单的数据展示，而是需要与复杂的后端服务、机器学习模型以及第三方API深度集成。这些场景对前端框架提出了更高的要求，生态的重要性，不得不说很重要。

社区对AI的支持

说实话，React社区在AI领域简直就是"社交达人"。shadcn这样的明星UI库、vercel/ai这样的实力派SDK，都是圈子里的"网红"。想要快速搭建AI应用？这些"老铁"都能帮你省下不少力气。简单列举一些知名仓库。

@vercel/ai

这是由Vercel开发的AI SDK
提供了与各种AI模型（如OpenAI, Anthropic等）交互的统一接口
支持流式响应、AI聊天界面等功能
特别适合构建类ChatGPT应用

shadcn-admin

基于shadcn/ui的管理后台模板
包含了AI聊天等现代化功能
提供了完整的后台管理系统布局

shadcn/ui

这是一个高度可定制的React组件库
不是传统的npm包，而是采用复制代码的方式
提供了大量现代化的UI组件
完美支持暗色模式
特别适合构建AI应用的界面

ChatGPTNextWeb

开源的ChatGPT Web客户端
使用Next.js构建
支持多种部署方式
提供了优秀的UI/UX设计参考

AI工具链的优先支持

React在AI工具支持方面具有明显优势

GitHub Copilot、Cursor 等AI IDE 也对React的代码提示更准确

目前多数AI辅助开发工具会优先支持React生态（Vue 生态也不错，狗头保命🐶）

结论

技术选型永远不是非黑即白的选择。在AI时代，我们需要考虑：

• 技术栈的生态活跃度


• AI工具的支持程度


• 团队的学习成本


• 项目的长期维护

总的来说，Vue和React各有千秋，但从AI时代的需求和生态系统的角度来看，React确实更适合承担复杂、高性能的应用开发任务。当然，这并不意味着Vue没有未来。事实上，Vue依然是一个优秀的框架，尤其适合中小型企业或初创团队快速搭建产品原型。

随着AI技术的进一步普及，前端框架之间的竞争也将更加激烈。无论是React还是Vue，都需要不断进化以适应新的挑战。而对于开发者来说，掌握多种技术栈并根据项目需求灵活选择，才是最重要的技能。

正如一句老话所说：“工欲善其事，必先利其器。”选择合适的工具，才能让我们的项目在AI时代脱颖而出。

还有技术人不应该局限于框架，什么都能上手，多看看新的东西，接受新的事物，产品能力也很重要。

写在最后

技术选型是一个需要综合考虑的过程，没有永远的对与错，只有更适合与否。希望这篇文章能给正在进行技术选型的你一些参考。

我们最近刚把一个后台系统从 element-plus 切成了完全自研组件，CSS 层统一用 Tailwind。全员同意设计稿一致性提升了，但代码里怨言开始冒出来。

这篇文章不讲原理，直接上代码对比和团队真实使用反馈，看看是谁在享受，谁在撑着。

1.组件内样式迁移

原先写法（BEM + scoped）：

<template>

  <div class="card">

    <h2 class="card__title">用户概览</h2>

    <p class="card__desc">共计 1280 位</p>

  </div>

</template>



<style scoped>

.card {

  padding: 16px;

  background-color: #fff;

  border-radius: 8px;

}

.card__title {

  font-size: 16px;

  font-weight: bold;

}

.card__desc {

  color: #999;

  font-size: 14px;

}

</style>

Tailwind 重写：

<template>

  <div class="p-4 bg-white rounded-lg">

    <h2 class="text-base font-bold">用户概览</h2>

    <p class="text-sm text-gray-500">共计 1280 位</p>

  </div>

</template>

优点：

• 组件直接可读，不依赖 class 定义


• 样式即结构，调样式时不用来回翻

缺点：

• 设计稿变了？全组件搜索 text-sm 改成 text-base？


• 无法抽象：多个地方复用 .text-label 变成复制粘贴

2.复杂交互样式

纯 CSS（原写法）

<template>

  <button class="btn">提交</button>

</template>



<style scoped>

.btn {

  background-color: #409eff;

  color: #fff;

  padding: 8px 16px;

  border-radius: 4px;

}

.btn:hover {

  background-color: #66b1ff;

}

.btn:active {

  background-color: #337ecc;

}

</style>

Tailwind 写法

<button

  class="bg-blue-500 hover:bg-blue-400 active:bg-blue-700 text-white py-2 px-4 rounded">

  提交

</button>

问题来了：

• ✅ 简单 hover/active 很方便


• ❌ 多态样式（如 disabled + dark mode + hover 同时组合）就很难读：

<button

  class="bg-blue-500 text-white disabled:bg-gray-300 dark:bg-slate-600 dark:hover:bg-slate-700 hover:bg-blue-600 transition-all">

>

  提交

</button>

调试时需要反复阅读 class 字符串，不能直接 Cmd+Click 查看样式来源。

3.统一样式封装，复用方案混乱

原写法：统一样式变量 + class

$border-color: #eee;



.panel {

  border: 1px solid $border-color;

  border-radius: 8px;

}

Tailwind 使用中经常出现的写法：

<div class="border border-gray-200 rounded-md" />

问题来了：

设计稿调整了主色调或边框粗细，如何批量更新？

BEM 模式下你只需要改一个变量，Tailwind 下必须靠 @apply 或者手动替换所有 .border-gray-200。

于是我们项目里又写了一堆“语义类”去封装 Tailwind：

/* 自定义 utilities */

@layer components {

  .app-border {

    @apply border border-gray-200;

  }

  .app-card {

    @apply p-4 rounded-lg shadow-sm bg-white;

  }

}

最后导致的问题是：我们重新“造了个 BEM”，只不过这次是基于 Tailwind 的 apply 写法。

🧪 实测维护成本：100+组件、多人协作时的问题

我们项目有 110 个组件，4 人开发，统一用 Tailwind，协作两个月后出现了这些反馈：

• 👨‍💻 A 开发：写得很快，能复制设计稿的 class 直接粘贴


• 🧠 B 维护：改样式全靠人肉找 .text-sm、.p-4，没有结构命名层


• 🤯 C 重构：统一调整圆角半径？所有 .rounded-md 都要搜出来替换

所以我们内部的结论是：

Tailwind 写得爽，维护靠人背。它适合“一次性强视觉还原”，不适合“结构长期型组件库”。

🔧 我们后来的解决方案：Tailwind + token 化抽象

我们仍然使用 Tailwind 作为底层 utilities，但同时强制使用语义类抽象，例如：

@layer components {

  .text-label {

    @apply text-sm text-gray-500;

  }



  .btn-primary {

    @apply bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded;

  }



  .card-container {

    @apply p-4 bg-white rounded-lg shadow;

  }

}

模板中统一使用：

<h2 class="text-label">标题</h2>

<button class="btn-primary">提交</button>

<div class="card-container">内容</div>

这种方式保留了 Tailwind 的构建优势（无 tree-shaking 问题），但代码结构有命名可依，后期批量维护不再靠搜索。

📌 最终思考

Tailwind 是给设计还原速度而生的，不是给可维护性设计的。
设计师爱是因为它像原子操作；
开发者撑是因为它把样式从结构抽象变成了“字串组合游戏”。

如果你的团队更在意开发效率，样式一次性使用，那 Tailwind 非常合适。
如果你的组件系统是要长寿、要维护、要被多人重构的——你最好在 Tailwind 之上再造一层自己的语义层，或者别用。

分享完毕，谢谢大家🙂

📌 你可以继续看我的系列文章

• 《用了三年 Vue，我终于理解为什么“组件设计”才是重灾区》


• 《我为什么觉得 React 正在逐渐失去吸引力？》


• 《为什么越来越多 Vue 项目用起了 UnoCSS？》


• 《为什么我放弃使用 Pinia？》


• 《为什么我不再相信 Tailwind？三个月重构项目教会我的事》

小白最快学会的前端灰度方案

首次访问效果如下，点击立即更新会访问灰度版本。本地cookie存在version字段后，后续访问都是指定版本代码，也不会出现弹窗提示

一、引言：为什么需要灰度发布？

1.1 血泪教训：全量发布的风险

因为一次上线，导致登录异常，用户无法使用。复盘时候，测试反馈预发环境不能完全模拟出生成环境。要不做一个灰度发布，实现代码最小化影响。

1.2 技术思考：面试的需要

多了解点技术方案，总没有坏事

二、前端灰度方案

• 在网上搜索前端灰度方案，整体看来就目前这个比较简单，上手快，易实现


• nginx + 服务端 + 前端 js（可以考虑封装成一个通用工具 js）

大致思路

> 前端通过获取版本规则，服务端计算规则

> 命中规则，重新访问页面，nginx 通过版本信息，返回指定版本

> 未命中规则，继续访问当前稳定版本页面

ps: 额外探讨，如果希望服务端接口也能有灰度版本，是不是只需要通过 nginx 配置就能实现？

三、实现细节

1. 版本规则接口

这个规则是可以自己定制的；这里我简单以 userId 进行匹配

• 案例服务端框架：koa2 + mongoose

/**

 * 获取当前用户的版本

 * @param {*} ctx

 */

exports.getVersion = async (ctx) => {

  try {

    const version = ctx.cookies.get("version");

    const userId = ctx.query.userId;

    // 这里直接写死，也可以放到redis里，做成可以动态配置也行

    const inTestList = ["68075c202bbd354b0fcb7a4c"];

    const data = inTestList.includes(userId) ? "gray" : "stable";



    if (version) {

      return ctx.success(

        {

          version: data,

          cache: true,

        },

        "缓存"

      );

    } else {

      ctx.cookies.set("version", data, { maxAge: 1000 * 60 * 60 * 24 * 7 });

      return ctx.success(

        {

          version: data,

          cache: false,

        },

        "重新计算"

      );

    }

  } catch (error) {

    ctx.fail("获取页面记录失败");

    console.error("获取页面记录失败:", error);

  }

};

• userId 匹配那块，可以引入 redis 做缓存处理，避免直接查询用户表进行比对

2. 前端触发获取版本

1. 交互方式，目前我能想到


2. 第一种，接口请求完，才开始渲染页面，自动执行指定版本


3. 第二种，接口请求、页面渲染同步进行，指定版本由用户触发

// 我把请求版本放到入口首页界面里

// 首次需要登录之后才会执行

onMounted(() => {

  const userInfo = store.getters["login/getUserInfo"];

  getVesion({ userId: userInfo.id }).then((res) => {

    if (!res.cache && res.version === "gray") {

      // 这里我增加一个弹窗提示，让用户选择

      ElMessageBox.confirm("存在新的灰度版本，是否要体验最新版本?", "新版本", {

        confirmButtonText: "立即更新",

        cancelButtonText: "不更新",

        type: "warning",

      }).then(() => {

        window.location.reload();

      });

    }

  });

  // 页面其他初始化逻辑

});

前端打包控制

1. 项目里使用的是 vite 打包工具


2. 通过增加两个配置，两者区别在于输入输出不同。当然如果嫌维护两个配置麻烦，可以把公共相同配置抽离出来或者通过环境变量区分维护一个配置


3. 新增一个入口 html 文件，并修改打包输出名称

# vite.gray.config.js



// 修改打包输出名称方便部署

const renameHtmlPlugin = () => {

  return {

    name: 'html-transform',

    enforce: 'post',

    generateBundle(options, bundle) {

      bundle['gray.html'].fileName = 'index.html'

    }

  }

}

export default defineConfig({

  // ... 其他配置

  plugins: [vue(), renameHtmlPlugin()],

  build: {

    outDir: 'gray',

    rollupOptions: {

      input: {

        main: resolve(__dirname, 'gray.html')

      }

    }

  }

  // ...

})

• 命令行部分

  "build": "vite build",

  "build:gray": "vite build --config vite.gray.config.js",

• 最终打包出来目录

// 灰度版本

-gray -

  assests -

  index.html -

  // 稳定版本

  dist -

  assests -

  index.html;

3. nginx 配置

这里我尝试很久，最终以下配置可以实现

通过 cookie 中版本标识，返回不同版本内容

http {

  map $http_cookie $target_dir {

      # 精确匹配version值，避免捕获额外内容

      "~*version=gray(;|$)"   "/gray";

      "~*version=stable(;|$)" "/stable";

      default                 "/stable";

  }

  server {

    ...已存在...



    location / {

        root html$target_dir;

        try_files $uri $uri/ /index.html;

    }



    ...已存在...

  }

}

四、总结

自此一个简单前端灰度效果就实现了。当然这里还有许多的场景没有考虑到，欢迎大家提问探讨。

案例代码：gitee.com/banmaxiaoba… 代码包含一个简易的前端监控方案实现，有空下篇文章分享讨论

Wordle 的传奇故事

说起 Wordle，这绝对是近几年最火的小游戏之一。2021年，一个叫 Josh Wardle 的程序员为了逗女朋友开心，花了几个晚上做了这个简单的猜词游戏。没想到女朋友玩得很开心，就分享给了朋友，然后朋友又分享给朋友...

结果呢？短短几个月，全世界都在玩 Wordle。Twitter 上到处都是那种绿黄灰的小方块截图，连我妈都问我那些彩色格子是什么意思。

最疯狂的是，Josh 本来只是想做个小游戏玩玩，结果《纽约时报》花了七位数把它买下来。一个周末项目变成了百万美元的生意，这大概是每个程序员的梦想吧。

点击这里先试试：wordless.online

Wordle 为什么这么火？我觉得主要是几个原因：

• 简单易懂：规则五分钟就能学会


• 每天一题：不会让人沉迷，但又让人期待明天的挑战


• 社交属性：那个分享截图的功能太聪明了，不剧透但又能炫耀成绩


• 免费纯净：没有广告，没有内购，就是纯粹的游戏乐趣

Wordle这种游戏的玩法精髓

Wordle 的规则很简单：6次机会猜出5个字母的英文单词。每次猜完会给你颜色提示：

• 绿色：字母对了，位置也对


• 黄色：字母在单词里，但位置不对


• 灰色：这个字母不在单词里

听起来简单，但要玩好还是有技巧的。老玩家都有自己的套路：

开局策略：

大部分人第一个词都会选元音字母多的，比如 "ADIEU"、"AUDIO"、"AROSE"。我个人喜欢用 "STARE"，因为 S、T、R 这些字母出现频率很高。

进阶技巧：

• 不要浪费已经确定是灰色的字母


• 如果黄色字母很多，先确定位置再考虑其他字母


• 有时候故意猜一个不可能的词来排除更多字母

心理战术：

Wordle 的单词选择其实是有规律的，不会选太生僻的词，也不会选复数形式。了解这个规律能帮你少走弯路。

Wordless 的独特之处

做 Wordless 的时候，我就在想：Wordle 虽然好玩，但为什么只能是5个字母？为什么一天只能玩一次？

所以 Wordless 就有了这些特色：

可变长度：

从3个字母到8个字母都可以选。3个字母的超简单，适合练手；8个字母的能把人逼疯，适合虐自己。我经常3个字母玩几局找找信心，然后挑战8个字母被打击一下。

无限游戏：

想玩多久玩多久，不用等到明天。有时候猜对了一个难词，兴奋得想继续玩，Wordless 就能满足这种需求。

智能单词库：

不会连续出现相同的单词，每次都是新鲜的挑战。而且按长度分类，保证每个难度级别都有足够的词汇。

策略变化：

不同长度的单词需要不同的策略。3个字母可能就是纯猜测，但8个字母就需要更系统的方法了。

玩 Wordless 的时候，我发现自己的策略会根据单词长度调整：

• 3-4字母：直接猜常见词，比如 "THE"、"AND"


• 5-6字母：用经典的 Wordle 策略


• 7-8字母：先确定元音位置，再慢慢填辅音

其他有趣的变种游戏

Wordle 火了之后，各种变种游戏如雨后春笋般出现。有些真的很有创意：

Absurdle：

这个游戏会故意跟你作对，每次都选择让你最难猜中的单词。有种跟 AI 斗智斗勇的感觉。

Worldle：

猜国家形状，地理爱好者的天堂。我经常被一些小岛国难住。

Heardle：

猜歌名，听前奏猜歌。音乐版的 Wordle，但我这种五音不全的人基本靠蒙。

Nerdle：

数学版 Wordle，猜数学等式。适合数学好的人，我一般看一眼就放弃了。

这些变种游戏都证明了 Wordle 这个核心玩法有多么强大，几乎可以套用到任何领域。

玩法心得分享

玩了这么久的词汇游戏，我总结了几个心得：

不要太执着于完美开局：

很多人纠结第一个词选什么，其实差别没那么大。重要的是根据反馈调整策略。

学会利用排除法：

有时候猜一个明知道不对的词，就是为了排除更多字母，这是高级玩法。

保持词汇积累：

经常玩这类游戏确实能学到新单词，我的英语词汇量就是这么慢慢提升的。

享受过程：

不要太在意成绩，重要的是享受那种一步步接近答案的乐趣。

最后说一句，无论是 Wordle 还是 Wordless，最重要的是玩得开心。毕竟游戏的初衷就是娱乐，不是考试。

现在就玩起来吧：wordless.online