在网络上关于CSS的文章中，有时候能听到“标准流”，“浮动流”，“定位流”等等词语，还有像“文档流”，“文本流”等词，这些流是什么意思？它们是CSS中的一些布局方案和特性。今天我们就来聊一下CSS中的

### 一、什么是迭代器（Iterator）？ #### 1.1 迭代器的定义 迭代器是一个可以

一、断链检测与状态同步 ‌连接状态实时监控‌ ‌服务端数据版本控制‌ 二、内容时效性验证机制 ‌客户端版本校验‌ ‌服务端数据变更广播‌ 三、断链恢复后的数据同步 ‌重连时增量同步‌ ‌服务端差异数据

一、核心流程架构 ‌三方协作模型‌ Web端：生成/展示二维码 + 轮询状态 移动端：扫码 + 授权确认 服务端：协调认证流程 + 状态同步 ‌关键步骤时序‌ 二、关键代码实现 QRCode插件是前端

亮点：1. 从实际需求出发引出设计思路；2. 结合可视化图表解释架构；3. 大量代码示例说明具体实现；4. 总结可复用的设计模式5. 强调可维护性和扩展性的平衡。这种设计思路可复用到其他基础组件的开发

我为啥不写了，antdx-pro 写好了，咱是前端孩子，首先得对得起自己，就这个库，其他的玩去！～～

最近，我用 UniApp 搭配 CodeBuddy 实现了一个充满童话感的小应用，名叫 IdeaBubbles（灵感泡泡机）。它是一个单页 WebApp，用来记录那些转瞬即逝的灵感时刻。整个界面以梦幻

在 JavaScript 开发中，垃圾回收和内存泄漏是两个重要的概念。垃圾回收机制可以自动管理内存，但如果不了解其原理，很容易导致内存泄漏，进而影响程序性能甚至导致崩溃。

useState参数的类型可以是基本数据类型，还可以是复杂类型，复杂类型中我们介绍一下数组， 在 React 中使用 useState 管理数组时，直接调用数组方法修改原数组会导致视图无法更新

前言

当我们在开发类库时，往往会在实际项目中引入开发中的类库，来调试实际使用的效果。并且最好是需要类库改变后，能够自动、实时的在项目中反馈。 npm有三种方法实现不发布npm包，就在本地像npm i安装一样去使用它，如下：

特性	工作空间（Workspaces）	本地路径依赖 (file:)	npm link
依赖管理方式	单仓库多包（monorepo）	跨项目文件引用	全局符号链接
版本控制	由根 package.json 统一管理	各自维护版本，可能冲突	忽略版本，直接引用源码
修改传播	实时生效（无需重新安装）	实时生效	实时生效
依赖结构	扁平化（共享根 node_modules）	嵌套结构（可能导致重复安装）	全局链接，可能与其他项目冲突
生产环境兼容性	完全兼容（发布独立包）	需替换为 npm 包版本	不可用（必须替换为 npm 包）
适用场景	大型项目内部模块协作	临时引用本地包	频繁开发的本地包

下面我们就来分别介绍它们的使用

1.前置条件

首先我们建立一个项目目录，后面的案例都按照这个目录操作

├─ app/                     # app项目
│  ├─ index.js               
│  └─ package.json           
├─ lib1/                     # sub项目
│  ├─ index.js             
│  └─ package.json  

1.本地路径依赖 and npm link

本地依赖开发非常简单，直接将依赖指向本地地址即可。它其实最终也是执行的npm link，相对于"scripts"项的脚本一样

// app/package.json
{
    "dependencies":{
        "lib-name1":"../lib1",// lib目录必须是一个npm项目
    }
}

执行npm i，npm就会自动把./lib目录链接到app/node_modules下,然后像普通模块一样引入即可

// app/index.js
import m from "lib-name1";

然后我们看看npm link的使用方式,直接在app/目录的命令行中执行

app> npm link ../lib1; //在app/node_modules中的文件名由../lib1/package.json中的name项决定

你可以查看app/node_modules目录，可以看到本地路径依赖和npm link最终都是在其内部生成了一个目录链接符

2.workspace

建立一个新的目录结构

├─ app/ # app项目
|   ├─ index.js
|   ├─ package.json
|   |
|   ├─ pack1/
|   |   ├─ index.js
|   |   └─ package.json #s 引入lib1
|   |
|   └─ packages/
|       └─ pack2/
|           ├─ index.js
|           └─ package.json #s 引入lib2
│             
├─ pack0/                 
   ├─ index.js             
   └─ package.json #s 引入lib0

然后配置workspace

// app/package.json
{
  "workspace":[
      "../pack0",
      "./pack1",
      "./packages/*", // 引入./packages/目录下所有项目
  ]
}

workspace最终也是建立一个"npm link"目录链接，但是它与npm link和本地路径依赖不一样的是，workspace如果配置的是在当前根目录内的项目作为依赖,那么所有的依赖都是统一安装到根目录的node_module下进行复用,即便你是在依赖项中执行npm i也不会安装到workspace项目中的node_module

如果配置的workspace项目，根目录外,则无法复用。依赖项会安装到workspace项目的node_modules中。

在上面的目录结构执行完npm i之后，包安装位置结果如下

|-app/node_modules
|    |- lib1
|    |- lib2
|-pack0/node_modules
     |- lib0

3.结论

不论是库还是单体项目，都推荐使用workspace进行包管理！

一、基本定义

类型	定义
Serverless Runtime	指在云服务（如 AWS Lambda）上运行的无状态函数，按请求触发，运行在**中心化服务器（Region）**中。
Edge Runtime	指代码运行在**CDN 边缘节点（Edge Node）**的沙箱环境中，靠近用户，延迟更低，使用 Web 标准 API 执行。

二、底层运行原理对比

特性	Serverless Runtime	Edge Runtime
运行环境	Node.js、支持 CommonJS/ESM	基于 V8 引擎（非 Node.js），无 Node 核心模块
执行位置	云 Region 中心服务器（如 AWS us-east-1）	离用户最近的 CDN 边缘节点（如东京、新加坡）
触发方式	按请求启动（有冷启动）	按请求启动（极低冷启动）
资源限制	内存大、运行时间长	内存小、执行时间短
支持 API	Node.js API 全支持，如 fs、http、crypto	仅支持 Web 标准 API，如 fetch、Request、Response
文件系统访问	✅ 支持	❌ 不支持
数据库连接	✅ 支持直连 MySQL/MongoDB 等	⚠️ 不推荐（无 TCP 支持、无连接池）

三、启动与响应性能对比

对比项	Serverless	Edge
启动时间	50ms ~ 800ms（冷启动）	<10ms（近似无冷启动）
运行时长限制	通常几分钟（如 AWS Lambda 最长 15 分钟）	通常几秒（如 Cloudflare Worker 最多 30 秒）
并发能力	支持高并发（自动扩展）	支持极高并发（且无需冷启动）
本地模拟支持	✅ 可用 next dev 本地模拟	⚠️ 本地模拟困难、需平台支持（如 Vercel CLI）

四、应用场景对比

场景类型	Serverless Runtime	Edge Runtime
SSR 页面渲染	✅ 推荐，支持数据库、缓存等复杂逻辑	⚠️ 不推荐，因不支持数据库直连
国际化重定向	✅ 可做，但慢	✅ 非常推荐，极快
登录鉴权	✅ 推荐	✅ 推荐（如 JWT 验证）
A/B 实验	✅ 推荐	✅ 推荐（执行速度快）
数据库操作	✅ 推荐	❌ 不推荐
静态资源预处理	❌ 无意义	✅ 可拦截 CDN 请求处理逻辑
CDN 边缘响应 API	❌ 慢	✅ 最佳选择
页面 Layout Server Components（App Router）	✅ 支持	✅ 支持，需 export const runtime = 'edge'

五、Next.js 中的使用方式

1. Serverless（默认）

适用于任何 API 路由、SSR 页面：

// 默认 Node.js Runtime
export async function GET(req: Request) {
  // 可以连接数据库、使用 fs、进行 SSR 等
}

2. Edge Runtime

在 middleware.ts、API 路由或 page.tsx 中启用：

export const runtime = 'edge';

export async function GET() {
  return new Response('Hello from Edge!');
}

六、与平台的关系

平台	Serverless Runtime	Edge Runtime
Vercel	✅ 默认支持	✅ 强力支持（推荐平台）
Cloudflare Workers	❌ 不支持	✅ 支持（原生）
Netlify Functions	✅ 支持	✅ 支持（部分）
AWS Lambda	✅ 支持	✅ 需使用 Lambda@Edge
阿里云函数计算	✅ 支持	⚠️ 支持有限
自建 Node.js 服务	✅ 支持	❌ 不支持 Edge

七、优缺点总结

✅ Serverless Runtime 优势

• 支持数据库连接、文件操作

• 更强的计算能力和执行时长

• 更灵活，调试方便

❌ Serverless Runtime 缺点

• 冷启动慢（尤其是首次）
• 距离用户远，延迟高
• 无法处理 CDN 级别请求

✅ Edge Runtime 优势

• 毫秒级冷启动
• 离用户更近，延迟极低
• 非常适合轻量请求、前置逻辑、边缘缓存判断

❌ Edge Runtime 缺点

• 无法访问 Node 核心模块
• 无法直连数据库
• 无文件系统、不适合重计算任务

总结建议

场景	推荐运行时
页面 SSR + 数据库渲染	✅ Serverless
登录状态校验 / token 验证	✅ Edge
CDN 边缘路由拦截（如国际化）	✅ Edge
复杂 API 接口处理	✅ Serverless
页面 Layout 的快速响应组件	✅ Edge（App Router）

实战例子

登录校验（middleware.ts + Edge）

export function middleware(request) {
  const token = request.cookies.get('token')
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  return NextResponse.next()
}

国际化跳转

export function middleware(req) {
  const lang = req.headers.get('accept-language')
  const url = req.nextUrl
  if (!url.pathname.startsWith('/zh')) {
    url.pathname = '/zh' + url.pathname
    return NextResponse.redirect(url)
  }
}

一. 使用SVG文本呈现文字

 <svg width="100%" height="20">
       <text x="50%" y="10" font-size="7" font-family='SourceHanSansCN-bold' fill="#a62f1c" font-weight="600" text-anchor="middle">{{ gift.txt }}</text>
</svg>

1. 使用x="50%"和text-anchor="middle"实现文字水平居中

二. 使用 transform: scale()缩小文字

.txt {
     font-size: 12px;
     transform: scale(0.8);
 }

1. font-size的大小取决于浏览器限制的最小字体

AI回答：

‌突破浏览器最小字号限制的方法主要有以下几种‌：

1. ‌使用CSS的transform: scale()属性‌：通过将字体大小设置为一个较大的值，然后使用transform: scale()属性进行缩放，可以实现小于12px的字体效果。例如，将字体大小设置为20px，然后通过0.5倍缩放来实现10px的字体效果。这种方法适用于块级元素和行内块元素，但需要注意缩放属性会影响元素的布局和样式‌12。
2. ‌使用SVG文本‌：对于需要在图标或徽标中显示非常小的文本，可以考虑使用SVG（可缩放矢量图形）来呈现文本。SVG文本不受浏览器最小字体大小的限制，可以直接设置所需的字体大小‌4。
3. ‌修改Chrome浏览器设置‌：可以通过调整Chrome浏览器的设置来禁用最小字体大小限制。在Chrome地址栏输入chrome://settings/，然后搜索“字体”或“外观”，尝试调整相关设置。但这种方法可能因Chrome版本和操作系统而异，且不保证所有用户都会进行相同的设置‌45。

‌这些方法的优缺点如下‌：

• ‌CSS缩放‌：

  • ‌优点‌：代码简洁，文本可选中，兼容性好。
  • ‌缺点‌：影响布局和样式，大量文本缩放会影响渲染性能‌。

• ‌SVG文本‌：

  • ‌优点‌：不受浏览器最小字体大小限制，适合特定场景。
  • ‌缺点‌：需要使用SVG，不适合所有文本内容‌。

• ‌修改浏览器设置‌：

  • ‌优点‌：操作简单，直接。
  • ‌缺点‌：只对当前用户的浏览器生效，不适用于所有用户‌45。

zoom

CSS 中的 zoom 属性用于缩放元素的大小，包括其内容、边框和内边距。它类似于 transform: scale()，但有一些关键区别。以下是关于 zoom 的详细说明和使用方法。

---

1.基本用法

zoom 属性接受一个数值或百分比，表示元素的缩放比例。

.example {
  zoom: 1.5; /* 放大到 150% */
}css

• zoom: 1：默认大小（无缩放）。
• zoom: 0.5：缩小到 50%。
• zoom: 200%：放大到 200%。

---

2.与 transform: scale() 的区别

特性	zoom	transform: scale()
兼容性	仅部分浏览器支持（如 IE、Edge）	所有现代浏览器支持
布局影响	会重新计算布局，影响其他元素	不会影响布局，仅视觉缩放
性能	性能较差	性能较好
缩放中心	默认从左上角缩放	可以通过 transform-origin 设置中心点

---

3.使用 zoom 的场景

• 兼容旧版浏览器：如果需要支持 IE 或旧版 Edge，可以使用 zoom。
• 简单缩放：如果不需要复杂的布局控制，zoom 是一个简单的解决方案。

---

4.示例

放大元素

.zoom-in {
  zoom: 1.5; /* 放大到 150% */
}css

缩小元素

.zoom-out {
  zoom: 0.75; /* 缩小到 75% */
}css

结合百分比

.zoom-percent {
  zoom: 200%; /* 放大到 200% */
}css

---

5.注意事项

1. 兼容性问题：

   • zoom 不是标准属性，现代浏览器（如 Chrome、Firefox）不支持。
   • 如果需要跨浏览器兼容，建议使用 transform: scale()。

2. 布局影响：

   • zoom 会重新计算元素的布局，可能导致页面其他元素的位置发生变化。

3. 性能问题：

   • zoom 的性能较差，尤其是在复杂页面中。

---

6.替代方案：transform: scale()

如果不需要支持旧版浏览器，建议使用 transform: scale()。

.example {
  transform: scale(1.5); /* 放大到 150% */
  transform-origin: 0 0; /* 设置缩放中心点 */
}css

• transform-origin：设置缩放的中心点，默认是元素中心。

---

7.结合 JavaScript 动态缩放

通过 JavaScript 动态设置 zoom 或 transform: scale()。

<div id="box" style="width: 100px; height: 100px; background: red;"></div>
<button onclick="zoomIn()">放大</button>
<button onclick="zoomOut()">缩小</button>

<script>
  const box = document.getElementById('box');

  function zoomIn() {
    box.style.zoom = (parseFloat(box.style.zoom) || 1) + 0.1;
  }

  function zoomOut() {
    box.style.zoom = (parseFloat(box.style.zoom) || 1) - 0.1;
  }
</script>html

---

8.响应式缩放

通过媒体查询实现响应式缩放。

@media (max-width: 600px) {
  .responsive-zoom {
    zoom: 0.8; /* 在小屏幕上缩小到 80% */
  }
}css

---

总结

• zoom 是一个简单的缩放属性，但兼容性和性能较差。
• 现代开发中，建议使用 transform: scale() 作为替代方案。
• 如果需要支持旧版浏览器（如 IE），可以结合 zoom 和 transform: scale() 实现兼容性。

参考文档

blog.csdn.net/weixin_4509…

juejin.cn/post/733874…

每当初始化一个uni-app项目，都要从0到1开始，这样很浪费时间，趁这一次正好接手一个全新项目，我整理了一套项目模板,整理并分享，一起来看看吧

在智能设备普及的今天，位置服务已成为移动应用的基础设施。无论是外卖配送的实时轨迹追踪、导航应用的路径规划，还是运动健康类App的卡路里计算，精准的位置定位都是用户体验的关键支撑。鸿蒙nex

因为团队规模比较小，没有专门的设计师，就尝试使用Trae + figma + MCP来优化页面样式，没想到效果超级棒，真的惊艳到我了， 非常适合没有设计师提供设计稿的小团队或者独立开发者。

引言 在计算机图形学中，法线（Normal）是一个基础且关键的概念。它们在光照计算、表面交互、物理模拟等多个领域都有重要应用。理解法线的概念及其工作原理，是掌握计算机图形学渲染技术的重要一步。 为什么

在 Web 图形绘制领域，SVG（Scalable Vector Graphics）和 Three.js 是两个常用的技术。SVG 主要用于二维矢量图形绘制，而 Three.js 则是用于创建和渲染三

在日常开发中，你是否遇到过以下情况： “某个包你明明没有安装，却能正常使用。” “CI 测试莫名其妙挂了，本地一切正常。” “升级依赖后突然报错，毫无头绪。” “不仅安装依赖慢，node_module