1、可选链操作符 支持的场景： 属性访问 obj?.prop 动态属性 obj?.[expr] 函数调用 func?.() 2、空值合并运算符 作用：精准判断 null/undefined（不包含其他

AI 离前端并不遥远。 大家好！今天我们来从前端视角介绍一下AI Agent。 在过去的一年里，我们见证了大型语言模型（LLM）的飞速发展。从 ChatGPT 到各种开源模型，它们强大的对话和

本文详解了在微前端架构下，父依赖通过Webpack Module Federation的shared机制实现全局共享时，其未被共享的子依赖实际采用的版本来源与原理。文章结合实际应用场景分析了该机制可能

这篇文章主要是总结一下自己学习过的 “恶意函数” 篇章，重点是在如何获取恶意函数。get_defined_functions — 返回所有已定义函数的数组，我们主要是可以通过这个获取危险的函数...

前言 在电商数据分析领域，京东商品评论数据是洞察用户需求、评估商品质量的重要依据。通过京东开放平台提供的商品评论API接口，开发者可高效获取结构化评论数据，支撑商品口碑监测、竞品分析等核心业务场景。本

MF的 shared 依赖配置常用 requiredVersion 字段控制版本协商。本文通过源码分析与实际案例，揭示MF 如何在多版本依赖间自动选择“最大且满足条件”的版本

一、核心概念与本质 1. 定义 函数柯里化（Currying）是将多参数函数转换为单参数函数链的过程，每次调用返回一个接收下一个参数的函数，直到所有参数接收完毕后执行最终计算。 2. 核心思想 将复杂

一、核心概念与本质 1. 定义 装饰器（Decorator）是一种函数语法糖，用于在不修改原函数/类的前提下，为其添加额外功能。本质是一个高阶函数，接收目标对象作为参数，返回增强后的对象。 2. 应用

产生原因 公司大屏在国产机运行不正常,但是运行后台端都正常 排查问题 a.replaceAll() is not a function 查了下MDN 解决问题 可以使用replace去替换

公司项目对接了oss后，需要将历史数据迁移到oss上，本文将详细介绍如何安全地将Strapi中的媒体文件迁移到OSS，并更新所有数据库引用。

前言 今天搞首页优化的时候，发现首页有很多内容，需要用户向下滚动才会看到，这部分内容包括很多图片、组件、请求，这些请求其实都可以等到用户可见时再开始加载的，因为之前没有做处理，首页一加载弹出了一堆网络

Vue 和 React，都是前端框架，但一个像玩具，一个像工业武器。系兄弟就来抨击我，等你来抨击....

这个阶段是实现将编写的业务文件通过配置`webpack`打包成`HTML`、`CSS`、`JS`等最终产物文件，再通过前期实现的`elpis-core`服务去加载它们，从而输出对应的页面。

本项目演示如何基于 React + @baidumap/mapv-three + Three.js，在三维地球环境下可视化真实的登山路线。

pnpm pnpm 如何用硬链接 pnpm 在本地创建一个全局的 store（存储区， .pnpm-store），所有安装的包版本都集中存放在这里，只存一份，可以通过pnpm store path 查

最近用了@microsoft/fetch-event-source库来处理sse流式请求,发现正常情况下是挺好用的,但遇到了错误返回的时候无法捕捉 情况1: 请求报500,控制台中无可预览的内容 修复

实现一版简单的PC端基于Vue3的语音唤醒，语音识别的AI助手，以及本地开发调试时用的语音唤醒系统性能监测工具，协助监测语音唤醒系统内存占用，音频处理时间，成功率等指标

一、CSS if () 函数：前端样式编程的新范式

从 Chrome 137 版本开始，CSS 正式引入if()条件函数，这是继 CSS 变量、网格布局后又一革命性特性。该函数允许在样式声明中直接编写条件逻辑，彻底改变了传统 CSS 依赖媒体查询、属性选择器实现条件渲染的模式。

核心语法与逻辑结构

property: if(
  condition-1: value-1;
  condition-2: value-2;
  /* 更多条件... */
  else: default-value);

• 条件类型：支持media()（媒体查询）、supports()（功能检测）、style()（样式值判断）三种条件表达式
• 执行逻辑：按条件顺序从上至下判断，满足首个条件即返回对应值，全部不满足则返回else默认值

二、三大条件表达式深度解析

1. media ()：替代传统 @media 查询

场景：根据屏幕宽度动态调整导航栏布局

nav {
  display: if(
    media(min-width: 768px): flex; /* 平板以上横排 */
    else: block); /* 移动端竖排 */
  
  background-color: if(
    media(hover: hover): rgba(0,0,0,0.9); /* 支持悬停时半透明 */
    else: #000); /* 触摸设备纯黑 */
}

优势：

• 条件逻辑与样式声明同屏展示，避免代码碎片化
• 支持嵌套在任意属性中，比@media更精准控制单一属性

2. supports ()：智能兼容处理

场景：根据浏览器能力自动切换渲染方案

.hero-section {
  backdrop-filter: if(
    supports(backdrop-filter: blur(20px)): blur(20px); /* 新浏览器毛玻璃 */
    else: none); /* 旧浏览器无效果 */
  
  background: if(
    supports(backdrop-filter: blur(20px)): rgba(255,255,255,0.3); /* 配合毛玻璃半透明 */
    else: #fff); /* 纯背景色 */
}

最佳实践：

• 优先检测supports()再处理样式，避免冗余代码
• 可结合style()实现「能力检测 + 状态判断」复合逻辑

3. style ()：基于变量的状态响应

场景：根据元素数据属性动态切换主题色

<button class="btn" data-state="primary">提交</button>
<button class="btn" data-state="secondary">取消</button>

.btn {
  --state: attr(data-state);
  color: if(
    style(--state: primary): white;
    style(--state: secondary): #333;
    else: #666);
  
  background: if(
    style(--state: primary): #409EFF;
    style(--state: secondary): #F5F7FA;
    border: if(
      style(--state: secondary): 1px solid #DCDFE6;
      else: none);
}

技术要点：

• 通过attr()获取元素属性值并赋值给 CSS 变量
• style()可直接比较变量值，实现类似 JavaScript 的if (state === 'primary')逻辑

三、三大应用场景实战

1. 响应式布局优化：卡片网格自适应

.grid-container {
  display: grid;
  grid-template-columns: if(
    media(min-width: 1200px): repeat(4, 1fr); /* 大屏4列 */
    media(min-width: 768px): repeat(3, 1fr); /* 平板3列 */
    else: repeat(2, 1fr)); /* 手机2列 */
  
  gap: if(
    media(hover: hover): 24px; /* 鼠标设备宽间距 */
    else: 16px); /* 触摸设备窄间距 */
}

对比传统方案：

• 传统方案需写 3 个@media块，现合并为 1 个属性声明
• 直接控制grid-template-columns属性，避免全局布局切换

2. 交互状态动态样式：按钮加载态

<button class="action-btn" data-loading="false">提交</button>




.action-btn {
  --loading: attr(data-loading);
  cursor: if(
    style(--loading: true): wait; /* 加载中显示沙漏 */
    else: pointer); /* 常态显示小手 */
  
  opacity: if(
    style(--loading: true): 0.6; /* 加载中半透明 */
    else: 1);
  
  &::before {
    content: if(
      style(--loading: true): '加载中...'; /* 加载中显示文字 */
      else: '提交');
  }
}

动态效果：

• 通过 JS 修改data-loading属性，样式自动响应
• 无需额外类名切换，保持 HTML 结构简洁

3. 暗黑模式智能适配

<html data-theme="light">
  <body class="page">...</body>
</html>




.page {
  --theme: attr(data-theme);
  color: if(
    style(--theme: dark): #f5f5f5; /* 暗黑模式浅色文字 */
    else: #333); /* 亮色模式深色文字 */
  
  background: if(
    style(--theme: dark): #121212; /* 暗黑模式深色背景 */
    else: #f9f9f9); /* 亮色模式浅色背景 */
  
  /* 智能适配系统主题 */
  background: if(
    media(prefers-color-scheme: dark) and not(style(--theme: light)): #121212;
    else: #f9f9f9);
}

逻辑拆解：

1. 优先使用元素自身data-theme属性
2. 若未指定主题，自动检测系统暗黑模式
3. 所有逻辑集中在一个选择器中，维护成本降低 50%

四、兼容性与最佳实践

1. 浏览器支持策略

• 当前支持：Chrome 137+、Edge 137+（需开启实验性特性）

• 降级方案：

  .fallback {
    /* 基础样式（旧浏览器生效） */
    color: #333;
    
    /* 新特性增强（新浏览器覆盖） */
    color: if(style(--theme: dark): #f5f5f5; else: #333);
  }
  

2. 性能优化要点

• 避免多层嵌套：

  /* 推荐 */
  font-size: if(media(min-width: 768px): 18px; else: 16px);
  
  /* 不推荐（嵌套过深影响解析性能） */
  font-size: if(media(min-width: 1200px): if(media(hover: hover): 20px; else: 18px); else: 16px);
  

• 条件顺序优化：将高频条件放在前面

3. 工程化集成建议

• 结合 CSS 变量管理：

  :root {
    --mobile-breakpoint: 768px;
  }
  
  .component {
    width: if(media(min-width: var(--mobile-breakpoint)): 50%; else: 100%);
  }
  

• 配合 PostCSS 插件：在低版本浏览器中自动转换if()为传统语法

五、未来展望：CSS 逻辑编程的新纪元

if () 函数的引入标志着 CSS 从「声明式样式」向「逻辑式样式」的重要跨越。未来可能延伸的特性包括：

1. 循环函数：如for()实现动态生成样式

2. 数学表达式：支持calc()与条件的组合运算

3. 函数嵌套：在条件中调用自定义 CSS 函数

对于前端开发者，掌握 if () 将成为必备技能 —— 它不仅简化样式逻辑，更推动 CSS 向完整「样式编程语言」演进，让界面动态性与维护性达到新高度。

基础：

1. 所有的数字，都是用 64位双精度浮点数 表示，其内存结构分为3部分

[1位符号位][11位指数位][52位尾数位] 来存储的

符号位：决定数字的正负（0是正数，1是负数）

指数位：表示2的幂次（采用偏移码表示，实际指数 = 存储值 - 1023）

范围：-1022 到 1023（特殊值 0 和 2047用于表示0和无穷大）

尾数位/有效数字（52 bits + 隐含位）

• 关键点：实际精度是 53 bits（52位显式存储 + 1位隐含的"1"） 采用"隐含前导1"的表示法（normalized numbers）

综上： 数值的计算公式为：

最大整数Number.MAX_SAFE_INTEGER

2^53 -1

最大值：Number.MAX_VALUE