❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年6月29日首页

小米汽车：APP显示的交付时间为预估交付时间参考

✇36氪
2025年6月29日 10:30
6月28日深夜发布的小米汽车答网友问（第163集）显示，小米汽车中APP显示的交付时间为预估交付时间参考，小米根据锁单量及当前产能情况测算，首次更新了所有订单的预计交付周期。 然而，随着产线磨合提效、产能挖潜爬坡，实际交付时间也可能会有动态变化。小米会在小米汽车APP中动态更新最新的预估时间。

贵州榕江：灾后清淤，所有停在县城主次道路车辆一律驶离

✇36氪
2025年6月29日 10:18
6月29日，贵州省榕江县公安局发布关于榕江县城灾后清淤清障工作的通告。 6月28日，榕江县再次遭遇严重的洪涝灾害。目前，灾后清淤清障工作正在紧张有序地进行中。为保障清淤清障工作安全高效开展，特作如下通告： 一、目前榕江县清淤工作现场各类大型机械、车辆往来频繁，道路情况较为复杂，根据抗洪抢险和灾后重建工作需要，从6月29日起至清淤清障工作结束，请平永、八开、从江方向的一切社会车辆禁止驶入抢险救灾核心区域，以便为清淤作业车辆让出道路空间，降低道路拥堵风险，减少交通安全隐患，让清淤工作得以顺利进行和尽早结束。 二、所有停在县城主次道路的车辆一律驶离，不得影响清淤清障作业，对不听劝阻和不服从现场工作人员指挥扰乱社会秩序的，一律依法给予治安处罚，构成犯罪的，依法追究刑事责任。（央视网）

光大证券：部分被基金低配的行业在中长期维度里值得关注

✇36氪
2025年6月29日 10:14
近日，光大证券在研报中分析称，内外因素交织下，预计指数整体将维持震荡。短期外部风险扰动最严重的时候或许已经过去，但仍需要对特朗普后续政策的反复保持警惕。短期内出口或将保持高增，预计消费仍是经济修复的重要动能之一。关注三条主线：1）内需消费，扩内需一直是近期国内政策的重点，未来有望持续迎来政策催化。2）国产替代，关注业绩确定性与主题投资两条线索。3）基金低配方向，《推动公募基金高质量发展行动方案》或将对基金行业配置产生深远影响，部分被基金低配的行业在中长期维度里值得关注。

以技术驾驭技术：华为Pura 80系列如何解决「防不胜防」的电诈套路？

✇爱范儿
作者 艾 梵
2025年6月29日 10:00

如果你是足球迷，想必听说过年初的一则新闻：

诈骗分子利用 AI 语音技术，完美模仿了意大利国防部长及其工作人员的声音，竟成功诱骗多位顶级富豪，包括Prada CEO、前国际米兰足球俱乐部老板莫拉蒂等，甚至有消息称后者已向诈骗分子汇款超百万欧元。事后接受媒体采访时，莫拉蒂感叹：

「这些家伙非常专业，一切听起来都像是真的，每个人都可能遇到类似的情况。」

▲ 一个 AI 拟声平台

我们总自认足够警觉，但如果连顶级富豪都上了「我，秦始皇，打钱」的当，普通人又该如何防范？

因此，在今年的全国反欺诈宣传日节点，AI 诈骗的话题才更值得被重视。

AI 诈骗是技术，更是人性软肋

技术不分好坏，但当技术的力量被恶意利用，它便能直击人性中最脆弱的部分。正如电话的发明极大拓展了人类沟通的边界，但也催生了「电信诈骗」这个庞大的灰色产业。

据统计，2024 年至今，相关部门已拦截诈骗电话 46.9 亿次、诈骗短信 33.7 亿条，拦截涉案资金 3151 亿元——仅从数据，就能看出电信诈骗规模之大、渗透之深。

每一次重大技术突破，总是伴随着新的技术风险。生成式 AI，无疑是这场「猫鼠游戏」的下一个战场。

比如，诈骗分子如今可能不再「广撒网」。相反，他们会利用你泄露的照片、声音、社交关系，借助多模态 AI 定制出以假乱真的音视频内容，再冒充你的身份去诈骗你的身边人。

对熟人不假思索的信任是现代社会运行的基石，却也让我们在精心设计的「剧本」前更显脆弱。

尤其是在面对以假乱真的 AI 换脸技术时，即便理论上可通过观察面部细微特征、动作或光影变化来辨别真伪，但大多数人都缺少「肉眼辨 AI」的动机和经验。

而面对数亿用户，公安部门虽持续努力宣传反诈，但教育效果终究存在边界，很难让每个人时刻保持警惕。

人们所需要的，就是好技术应当填补的。

如果说有限的意识、知识和精力，让普通人在面对日益复杂精巧的 AI 诈骗时逐渐力不从心，那么新的解决方案就应当多走一步，将同样自动化的「AI 防诈功能」前置到设备端，替我们分担这份认知考验。

正因如此，AI 防诈功能在今天已不再是「附加品」，而是正迅速转变成为手机的「新基建」，就像骚扰电话拦截功能也早已成为智能手机的标配。

这是一种安全范式的深刻转变，也是数字生活安全进化的必然：从被动防范到主动防护、从依赖个人警觉到系统智能识别。

AI 防诈的责任，不能只让个人承担。

华为Pura 80系列的解法，是用 AI 打败 AI

目前流行的 AI 诈骗套路层出不穷，但总归离不开两个核心要素：

1. 先获取极度私密的个人数据
2. 再生成以假乱真的 AI 内容实施诈骗

因此，AI 防诈的核心，就在于「保护个人数据」并「甄别 AI 生成内容」。

不久前，我们在华为Pura 80系列手机上看到一套全新的 AI 隐私安全防护方案，非常有想法。它不仅将 AI 技术武装到了牙齿，更将复杂科技融入了日常生活的细枝末节。

想象这样一个场景：你在早高峰拥挤的地铁上，习惯性地刷着微信朋友圈，或者不经意间打开了相册——殊不知，身后有人悄悄地偷瞄你的屏幕……

过去，面对这种情况，我们只能下意识遮挡屏幕、调整手机角度，或者使用碍眼的「防窥膜」；但华为Pura 80系列却将这种被动防范转为主动守护——

其全新的 AI 防窥保护功能，可通过智慧视觉感知能力，智能识别旁人注视风险，在他人看向你屏幕时自动提醒你留意屏幕隐私；甚至在浏览隐藏相册时，若识别到旁人注视，会自动隐藏保护全局内容。这块自动的「数字屏风」，让隐私在公共场合也能得到充分保护。

现在还有很多陌生电话，对方自称「银行客服」或「公安民警」，话术严谨，真假难辨。这正是 AI 诈骗最常见的「入口」之一。

此时，华为Pura 80系列的 AI 通话防诈功能便派上用场：它能通过端侧AI能力识别通话内容，比对常见的诈骗剧本、话术，一旦识别到可疑内容即弹出预警提示，提醒用户谨防上当受骗。

而针对更具迷惑性的 AI 换脸诈骗，华为Pura 80系列还带来了 AI 换脸检测，让视频通话中的伪装无所遁形。

比如你可能接到「亲人」或「好友」打来的视频电话，对方语气急切，想要向你借钱。此时，华为Pura 80系列就能通过端侧大模型辅助推理判断，若屏幕上的人脸「似是而非」，便实时提醒人脸伪造风险，让你在关键时刻洞悉真相。

值得强调的是，所有这些强大的 AI 隐私安全功能，都部署在华为Pura 80系列手机端侧运行，而非上传到云端处理。

这背后有着务实的考量：数据无需上传到服务器，能最大限度保护用户隐私；本地处理响应速度快，能实现真正的实时防护。

当然，端侧大模型对手机能力要求极高，它要求手机能实现实时音视频分析、复杂的 AI 计算和高度安全的分布式协作，无论是底层的系统框架、算力支撑，还是多传感器协同，都需要有深厚的技术积累。它不仅是AI技术的进步，更是华为在系统设计、性能优化和软硬件深度整合上的「硬实力」展示。

调动设备的方方面面，共同构筑起一套完整技术体系，是华为鸿蒙系统一贯的风格。在评测华为Mate 70系列的信息流转功能时，我们已见证过这种「全面耦合」的技术思路；到了华为Pura 80系列，多项AI隐私安全功能也并非孤立存在，而是建立在 HarmonyOS 5.1「星盾安全架构」的技术底座之上，从底层架构到应用层面全方位设计的系统级 AI 防诈方案。

华为鸿蒙内核不仅是首个获得国际 CC EAL6+ 安全等级认证的操作系统内核，更基于软硬协同，重构了操作系统的安全体系与秩序。

具体而言，鸿蒙系统在应用上架层面就通过 200 多项检测的严格管控，阻止了不满足安全要求的应用上架和安装，从源头上确保应用的纯净可靠；而在权限管理上，它禁止开放访问通话记录、读取应用列表等九项不合理权限。「安全访问机制」更强制应用单次获取数据须获得用户授权，且只能访问你选定的部分数据，彻底杜绝了过度授权的隐患。

还记得 AI 诈骗的第一步吗？精细化的权限管理，正是在源头上就切断了隐私泄露的途径，当诈骗分子无从获取你的隐私信息时，后续遭遇 AI 诈骗的风险就已大大降低了。

宏大的技术，只有真正帮助到最广泛人群解决日常痛点，才拥有其意义和价值。

在这里，我们看到，华为Pura 80系列将 AI 进步落到用户感知最深的安全痛点之上，转化为每一个普通用户可知可感的效益，这是华为践行用户隐私安全承诺的最佳表率。

AI 防诈不是可选项，而是手机的「新基建」

AI 防诈功能，在今天或许还未成为所有手机的「标配」，但它的普及速度，必定会远超预期。

原因很简单：用户需求迫切，而技术条件已然成熟。

回望骚扰电话拦截功能的普及历程，我们便能窥见类似的轨迹：曾几何时，骚扰电话让人不胜其扰，但当用户需求强烈且技术可行时，这项功能便迅速从部分厂商的「创新」，蜕变为所有智能手机的标配。

AI 诈骗的威胁远比传统电话诈骗更隐蔽、更具迷惑性，因此，AI 防诈功能的普及路径，无疑会来得更快。

在过去，我们主要依赖公安部门打击犯罪团伙、银行系统阻断资金流向，以及运营商识别异常短信，但所有这些外置的防护，依然存在被绕过的风险；而现在，在终端设备上建立「最后一道防线」，已成为至关重要的一环。

这是一种「技术对抗技术」的必然趋势，用更先进的 AI 技术来反制 AI 诈骗，正是破解这一难题的关键所在。

我们所期待的，是以用户为中心，将 AI 能力转化为人性化的基础防护。

这种先行探索，不仅能为产品带来差异化竞争力，更是在为行业「打样」，推动安全标准向更高阶进发。

首发搭载 HarmonyOS 5.1 的华为Pura 80系列，已用实际行动证明了技术可行性，这无疑将促进其他有实力的厂商加速跟进。有理由相信，短短数年内，AI 防诈将成为高端手机的「标配」。

这种由点及面的创新扩散，最终将实现真正的科技普惠——让每个人都能在 AI 时代的数字洪流中，找到安身之所。

#欢迎关注爱范儿官方微信公众号：爱范儿（微信号：ifanr），更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


Angular 应用中 i18next 的作用解析及实现示例

✇掘金 前端
作者 华山风清扬
2025年6月29日 09:50

Angular 应用中 i18next 依赖的核心作用在于为应用提供国际化 i18n 解决方案，其主要功能集中于语言资源管理、动态语言切换以及翻译文本的格式化处理。此依赖借助 JavaScript 生态系统中成熟且灵活的 i18next 库，突破了框架内置国际化方案在灵活性和扩展性方面的局限，使开发者能够根据业务需求实现针对不同语言环境的实时翻译与文化适应。本文将从概念解析、架构设计、 RxJS 整合以及实现示例等多个角度逐步推演，探索 Angular 应用中 i18next 的运作原理和优势，同时提供一份可运行的源代码实例来帮助开发者掌握实际应用技巧。

在 Angular 应用中，国际化需求通常要求根据用户所在地区或选择的语言动态更新页面文本， i18next 提供的接口能够对翻译资源进行统一管理。i18next 能够加载多个语言文件，并在用户切换语言时根据预先定义的键值对自动更新界面内容。此过程通常牵涉到异步资源加载、数据状态管理及事件驱动编程， RxJS 为此提供了强大的响应式编程支持。Angular 开发者可以利用 RxJS 提供的 Observable 和 Subject 等工具，将翻译状态的变化封装在服务中，从而在整个应用中实现即时响应式更新，保证不同模块之间语言状态的一致性和高效通信。

在开发中， i18next 既能满足简单的文本翻译也能应对诸如占位符替换、复数规则、格式化数字和日期等复杂场景需求。通过与 Angular 的依赖注入机制相结合，开发者可以创建专门的国际化服务，将 i18next 的初始化、语言切换及翻译提取封装成模块化接口，然后通过组件间的 RxJS 数据流观察翻译状态的变化实现界面动态渲染。此设计模式不仅降低了多语言支持过程中的耦合度，也增强了单元测试和维护的便捷性。

Angular 应用中集成 i18next 通常需要关注以下关键技术细节：配置国际化初始状态、制定翻译资源文件格式、实现异步加载翻译资源以及借助 RxJS 处理翻译状态变化。配置初始化时需要调用 i18next 提供的 init 接口，指定当前语言、备用语言、翻译资源等；翻译资源的组织结构要求按照语言代码划分模块，每种语言对应一个包含键值对关系的对象；而动态切换语言则需要调用 i18next 提供的 changeLanguage 接口，配合 RxJS 的数据流管理实现全局状态更新。这样一来，每当翻译状态发生变化时，依赖于国际化服务的组件就会通过订阅相应的 Observable 自动刷新显示内容。

借助 RxJS ，可以使用 BehaviorSubject 作为数据载体保存当前语言状态，并暴露 Observable 供组件订阅。组件在构造函数中引入国际化服务，并在生命周期钩子内订阅当前语言状态更新，从而实现动态翻译文本的实时刷新。通过这种方式，即使应用在多组件、复杂交互场景下也能保持语言翻译的一致性，而服务层负责与 i18next 库进行交互，屏蔽了低层细节，组件只需关注如何处理接收到的翻译文本即可。

以下提供一份详细示例代码，该代码涉及 Angular 服务、组件以及模块配置等部分，展示了如何在 Angular 应用中初始化 i18next、加载翻译资源以及利用 RxJS 实现语言切换和界面刷新。代码实例经过测试可在实际项目中直接运行。代码中的字符串采用模板字符串表示，所有成对匹配的英文双引号已替换为特殊符号 `。代码与中文文字之间确保均有空格分隔，便于阅读。

下面是国际化服务 i18next.service.ts 代码示例：

import { Injectable } from `@angular/core`;
import i18next from `i18next`;
import { BehaviorSubject } from `rxjs`;

@Injectable({
  providedIn: `root`
})
export class I18NextService {
  private currentLanguageSubject = new BehaviorSubject<string>(`en`);
  public currentLanguage$ = this.currentLanguageSubject.asObservable();

  constructor() {
    this.initI18Next();
  }

  async initI18Next() {
    await i18next.init({
      lng: `en`,
      fallbackLng: `en`,
      resources: {
        en: {
          translation: {
            greeting: `Hello World`
          }
        },
        zh: {
          translation: {
            greeting: `你好 世界`
          }
        }
      }
    });
  }

  async changeLanguage(lang: string) {
    await i18next.changeLanguage(lang);
    this.currentLanguageSubject.next(lang);
  }

  t(key: string): string {
    return i18next.t(key);
  }
}

上述服务代码封装了 i18next 的初始化与语言切换两大模块。通过调用 initI18Next 方法，服务初始化时便加载了英文和中文两套翻译资源；借助 BehaviorSubject 存储当前语言状态，当调用 changeLanguage 方法切换语言时，不仅更新 i18next 内部状态，同时借助 RxJS 向应用中其它订阅组件推送最新状态。方法 t 则对外暴露翻译接口，让组件通过传入翻译键获取对应语言文本。

接下来是组件 AppComponent 示例代码，该组件展示如何利用国际化服务进行动态翻译及界面更新：

import { Component, OnInit } from `@angular/core`;
import { I18NextService } from `./i18next.service`;
import { Observable } from `rxjs`;

@Component({
  selector: `app-root`,
  template: `
    <div>
      <h1>{{ greeting }}</h1>
      <button (click)="switchLanguage()">Switch Language</button>
    </div>
  `
})
export class AppComponent implements OnInit {
  greeting = ``;
  language$: Observable<string>;

  constructor(private i18n: I18NextService) {
    this.language$ = this.i18n.currentLanguage$;
  }

  ngOnInit() {
    this.loadGreeting();
    this.language$.subscribe(() => {
      this.loadGreeting();
    });
  }

  loadGreeting() {
    this.greeting = this.i18n.t(`greeting`);
  }

  switchLanguage() {
    const newLang = this.greeting === `Hello World` ? `zh` : `en`;
    this.i18n.changeLanguage(newLang);
  }
}

在上述代码中，组件在初始化时调用 loadGreeting 方法加载当前语言下的 greeting 文本，并订阅国际化服务中暴露的 Observable，当语言状态发生变化时自动更新页面显示。通过点击按钮调用 switchLanguage 方法实现英文和中文之间的切换，从而看到界面文字即时变化。此设计充分利用 RxJS 响应式编程思想，将状态变化与视图更新解耦，确保应用逻辑清晰易于维护。

为了完整构造一个 Angular 应用，还需要配置模块文件 AppModule，代码如下：

import { BrowserModule } from `@angular/platform-browser`;
import { NgModule } from `@angular/core`;

import { AppComponent } from `./app.component`;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

上述模块配置确保 Angular 能够正常加载根组件，并将国际化服务作为全局单例注入。开发者在实际项目中可根据具体需求扩展翻译资源，例如添加更多语言及翻译键，并支持异步加载远程翻译文件，这会涉及到 i18next-http-backend 模块以及更多高级配置。

在该实现过程中， RxJS 的核心优势体现在语言状态管理与组件间数据通信中。通过 BehaviorSubject 方式订阅当前语言，组件无需关心底层 i18next 的内部实现，只需响应数据变化便可更新显示。此种方式不仅提高了代码模块化程度，也降低了应用的维护难度。开发者可以进一步利用 RxJS 提供的操作符（如 map、filter 等）对状态进行复合处理，甚至可以实现更复杂的国际化逻辑（例如根据路由参数加载对应语言包）。

还可以拓展一个场景，当应用需要支持动态加载多个模块翻译时，可使用 i18next 的分命名空间机制。开发者可以将翻译资源拆分为多个文件，通过设置命名空间分别管理不同业务场景下的翻译内容。此时国际化服务需要调用 i18next 提供的 loadNamespaces 方法，并结合 RxJS 将加载状态反馈给各个组件，确保页面中每个模块的翻译内容独立且高效载入。这样的设计适用于大型企业级应用，能够大幅提高开发效率和多语言管理的便捷性。

关于国际化配置细节，开发者需注意以下关键点：加载语言包时要确保资源路径正确，避免因网络请求错误导致国际化功能失效；在组件中更新视图时，需保证在 Angular 检测周期内同步状态变化，防止脏值检测错误；对于异步加载场景，错误处理逻辑和超时保护机制也应当充分考虑，防止局部翻译资源未加载成功而影响整体用户体验。结合 RxJS 的错误捕捉机制，可以使用 catchError 等操作符为国际化服务添加鲁棒性设计，从而保证整个系统在面对异常情况时仍保持稳定。

开发者在实际项目中往往会依据业务需求和国际化复杂度选择不同的 i18next 配置策略，如果应用语言种类较多且资源文件较大，则建议采用懒加载模式，在用户切换语言时按需加载对应资源。与此同时，利用 RxJS 的缓存机制可以保存已加载的翻译资源，减少重复网络请求，提高应用响应速度。这些设计思路都体现出 i18next 与 RxJS 组合后带来的协同增效效果，既满足了国际化需求，又充分利用了响应式编程带来的优势。

通过以上代码示例与逻辑推演，可以看出 Angular 应用中引入 i18next 依赖后，不仅能够灵活管理多语言翻译资源，还可以利用 RxJS 实现动态状态更新、降低模块之间的耦合程度。该方案适用于跨地域、多语言以及文化适应性要求较高的应用场景，同时能够兼顾性能与易用性。开发者在项目开发过程中，只需关注业务逻辑，而国际化相关的细节均由封装良好的国际化服务统一管理，为项目的扩展和维护提供了有力保障。

飞天茅台价格，大面积回升

✇36氪
2025年6月29日 09:47
6月28日，据酒类行情监测平台“今日酒价”公众号披露的批发参考价， 25年飞天茅台（53度/500ml，下同）、24年飞天茅台、23年飞天茅台价格较前一日均有上涨，价格上涨同时涉及原箱、散瓶包装。 但巽风飞天（53度/375ml）、生肖蛇（53度/500ml）等产品仍较上一日价格有下跌。（21世纪经济报道）

浏览器前进后退的底层实现

✇掘金 前端
作者 Aphasia
2025年6月29日 09:36

一、核心数据结构：双栈模型

浏览器的历史导航通常采用两个栈（stack）来实现：

  • 后退栈（Back Stack） ：保存从当前页面可以“后退”的历史页面。
  • 前进栈（Forward Stack） ：保存从当前页面可以“前进”的页面，仅在用户执行“后退”后才有内容。

这种双栈结构可以很好地模拟用户的导航行为。

1.1 页面访问流程

当用户从页面 A 访问到页面 B 时：

  • 当前页面 A 被压入 后退栈
  • 前进栈被清空
  • 当前页面变为 B

状态如下：

Back Stack: [A]
Forward Stack: []
Current Page: B

1.2 后退操作

点击“后退”按钮时：

  • 当前页面 B 被压入 前进栈
  • 后退栈弹出页面 A 作为当前页面

状态更新：

Back Stack: []
Forward Stack: [B]
Current Page: A

1.3 前进操作

点击“前进”按钮时：

  • 当前页面 A 被压入 后退栈
  • 前进栈弹出页面 B 作为当前页面

状态更新：

Back Stack: [A]
Forward Stack: []
Current Page: B

二、浏览器中的 window.history 对象

浏览器提供了 window.history 对象，以编程方式访问和操作浏览历史记录。常用的方法有：

方法 功能说明
history.back() 等同于点击“后退”按钮
history.forward() 等同于点击“前进”按钮
history.go(n) 跳转到相对位置的历史记录，n 可正可负
history.pushState() 添加一条历史记录（不会刷新页面）
history.replaceState() 替换当前历史记录

这套 API 在单页应用（SPA）中尤为重要，它让开发者可以模拟浏览器的原生导航行为，同时避免页面刷新。

三、现代浏览器的内部机制

3.1 NavigationController

现代浏览器会使用 NavigationController 来管理会话历史。这个控制器负责：

  • 记录历史记录条目（SessionHistoryEntry）
  • 控制页面导航方向
  • 管理与渲染进程之间的切换（跨进程导航）

3.2 SessionHistoryEntry

每条历史记录不仅包含页面 URL，还记录：

  • 页面状态（滚动位置、表单数据等）
  • 页面是否为跨域页面
  • 页面来源（是用户点击链接跳转，还是脚本跳转）

这样，即便用户返回到很久之前的页面，浏览器也能尽量还原页面原貌。

3.3 跨进程导航

如果用户在多站点间切换（如从 example.com 到 google.com），出于安全性考虑，浏览器会将页面分配到不同的渲染进程。此时，后退或前进操作会触发“跨进程导航”，需要更复杂的调度机制。

四、模拟实现

const backStack = [];
const forwardStack = [];
let currentPage = "A";

function visit(page) {
    backStack.push(currentPage);
    currentPage = page;
    forwardStack.length = 0;
    console.log("Visit:", currentPage);
}

function back() {
    if (backStack.length > 0) {
        forwardStack.push(currentPage);
        currentPage = backStack.pop();
        console.log("Back to:", currentPage);
    }
}

function forward() {
    if (forwardStack.length > 0) {
        backStack.push(currentPage);
        currentPage = forwardStack.pop();
        console.log("Forward to:", currentPage);
    }
}

// 示例
visit("B");   // 当前 A -> B
visit("C");   // 当前 B -> C
back();       // 当前 C -> B
back();       // 当前 B -> A
forward();    // 当前 A -> B

五、单页应用中的前进后退

在传统页面中，浏览器自动处理历史记录。但在单页应用（SPA）中，页面不会刷新，所有状态由 JavaScript 管理。这就需要使用 pushState 和 popstate 来手动控制导航行为：

// 添加新的历史记录
history.pushState({ page: 2 }, "Title 2", "/page2");

// 监听用户点击“后退”按钮的行为
window.addEventListener("popstate", function (event) {
    console.log("User navigated to:", event.state);
});

结语✒️

知识点+1✨✨✨

猫抓爱心.gif

深入浅出手写new操作符：从青铜到王者的进阶之路

✇掘金 前端
作者 FogLetter
2025年6月29日 09:21

大家好，我是你们的老朋友FogLetter，今天我们来聊聊JavaScript中那个既熟悉又神秘的new操作符。相信很多小伙伴在面试时都被问过："能不能手写一个new的实现？"今天就让我们彻底搞懂它！

一、new操作符的日常用法

首先，我们来看一个简单的例子：

function Person(name, age) {
    this.name = name
    this.age = age
}

Person.prototype.sayHi = function() {
    console.log(`hi,我是${this.name}`)
}

const p = new Person('张三', 18)
p.sayHi() // hi,我是张三

这是我们最熟悉的用法：通过new关键字调用构造函数，创建一个新对象。但new背后到底做了什么呢？

二、new操作符的四步魔法

实际上，new操作符主要做了以下几件事：

  1. 创建一个空对象：这个对象将成为最终的实例
  2. 链接原型：将空对象的__proto__指向构造函数的prototype
  3. 绑定this：将构造函数的this指向这个新对象并执行
  4. 处理返回值：如果构造函数返回对象则使用该对象，否则返回新对象

三、手写new实现（ES5版本）

让我们先看一个ES5的实现方式：

function objectFactory() {
    var obj = {}; // 1. 创建空对象
    
    // 2. 获取构造函数（arguments第一个参数）
    // 类数组没有shift方法，借用数组方法
    var Constructor = [].shift.call(arguments); 
    
    // 3. 链接原型
    obj.__proto__ = Constructor.prototype;
    
    // 4. 绑定this并执行构造函数
    var ret = Constructor.apply(obj, arguments);
    
    // 5. 处理返回值
    // 如果构造函数返回对象则使用该对象，否则返回新对象
    return typeof ret === 'object' ? ret || obj : obj;
}

这个实现有几个关键点值得注意：

  1. [].shift.call(arguments)：因为arguments是类数组对象，没有shift方法，我们通过借用数组的shift方法来获取构造函数
  2. obj.__proto__ = Constructor.prototype：这是实现原型继承的关键
  3. 返回值处理：这里有个小技巧，ret || obj是为了处理返回null的情况

四、手写new实现（ES6版本）

ES6的写法更加简洁：

function objectFactory(Constructor, ...args) {
    const obj = {}; // 创建空对象
    obj.__proto__ = Constructor.prototype; // 链接原型
    const ret = Constructor.apply(obj, args); // 执行构造函数
    
    // 处理返回值
    return typeof ret === 'object' ? ret || obj : obj;
}

ES6版本利用了剩余参数...args，代码更加清晰易读。

五、边界情况处理

我们的实现需要考虑构造函数有返回值的情况：

  1. 返回对象：使用返回的对象

    function Person() {
    return { custom: 'object' }
}
const p = objectFactory(Person)
console.log(p) // { custom: 'object' }

  2. 返回基本类型：忽略返回值

    function Person() {
    return 1
}
const p = objectFactory(Person)
console.log(p) // Person {}

  3. 返回null：虽然typeof null是'object'，但我们仍然返回新对象

    function Person() {
    return null
}
const p = objectFactory(Person)
console.log(p) // Person {}

六、深入理解原型链

让我们通过一个图来理解原型链：

实例(p) → Person.prototype → Object.prototype → null

当我们访问p.sayHi时，JavaScript会沿着这条原型链查找：

  1. 先在p自身查找
  2. 找不到就去Person.prototype查找
  3. 还找不到就去Object.prototype查找
  4. 最后到null停止

七、性能优化小技巧

虽然直接设置__proto__很方便，但在生产环境中，更推荐使用Object.create：

function objectFactory(Constructor, ...args) {
    const obj = Object.create(Constructor.prototype); // 创建对象并链接原型
    const ret = Constructor.apply(obj, args);
    return typeof ret === 'object' ? ret || obj : obj;
}

Object.create是ES5引入的方法，性能更好，也更符合规范。

八、面试常见问题

在面试中，关于new可能会被问到以下问题：

  1. new操作符做了什么？

    • 创建空对象
    • 设置原型链
    • 绑定this执行构造函数
    • 处理返回值

  2. 如果构造函数返回一个对象会怎样？

    • new操作符会返回这个对象而不是新创建的对象

  3. 如何判断一个对象是否是通过某个构造函数new出来的？

    • 使用instanceof操作符
    • 或者检查对象的constructor属性

九、实际应用场景

手写new不仅仅是为了面试，在实际开发中也有应用：

  1. 框架开发：一些框架需要自己控制对象创建过程
  2. 性能优化：特殊场景下可能需要定制对象创建逻辑
  3. 库开发：提供更灵活的对象创建方式

十、总结

通过今天的学习，我们不仅掌握了如何手写new，更重要的是理解了JavaScript中对象创建的机制。记住：

  1. new操作符本质上是一个语法糖
  2. 原型继承是JavaScript的核心特性
  3. 理解this绑定和原型链是进阶的关键

希望这篇笔记能帮助大家彻底理解new的奥秘！如果觉得有帮助，别忘了点赞收藏哦～

这篇笔记从基础用法到实现原理，再到面试应用，全面讲解了new操作符的方方面面。通过代码示例和分步解析，让读者能够深入理解JavaScript对象创建的机制。

杭州→南昌2小时内可达 下月起沪昆高铁杭长段按时速350公里运行

✇36氪
2025年6月29日 09:18
7月1日起，上海至昆明高铁杭州东至长沙南段（以下简称沪昆高铁杭长段）复兴号动车组列车将常态化按时速350公里高标运行，同步新投用23组复兴号智能动车组列车。沪昆高铁杭长段安排开行速度快、停站少、旅时短的标杆列车46列，较目前增加36列。上海、上海虹桥等车站开行的标杆列车每日7时至18时整点及整点前后时刻始发，按时段、去向均匀分布。 (央视新闻)

英国5月汽车产量创70多年来同期新低

✇36氪
2025年6月29日 09:12
近日，英国汽车制造商与贸易商协会公布的数据显示，5月英国汽车总产量同比大幅下降32.8%至49810辆。今年前五个月，英国汽车总产量累计约为34.82万辆，同比下降12.9%，为1953年以来的同期最低水平。英国汽车制造商与贸易商协会认为，当前英国汽车产量下滑的主要原因包括贸易壁垒加剧、车型更替进程延长、能源成本持续高企等。（财联社）

特斯拉首次完成全自动驾驶交付；YU7 锁单交付时间更新，标准版最快 53 周；OpenAI 首次采用谷歌芯片训练

✇极客公园
2025年6月29日 08:53

特斯拉 Model Y 首次完成全自动驾驶交付，全程无人控制

北京时间 6 月 28 日消息，特斯拉 CEO 马斯克在 X 平台宣布：「首辆特斯拉 Model Y 已实现全自动从工厂开到客户家的交付任务，包括高速路段，而且比原计划提前一天完成！」

马斯克还提供了一些细节：车内全程无人且没有远程操控，是「真正意义上」的全自动驾驶。「据我们所知，这是全球首例在公共高速路上实现车内无人、无远程控制的自动驾驶。」

此前报道，特斯拉已悄悄为得州奥斯汀超级工厂生产的新款 Model Y 和 Cybertruck 车型部署「自动行驶至出厂区」功能，让这些汽车在无需监督的情况下自动下产线开入交付车辆停车场，以便于降低人力成本，并向业界展示其为自动驾驶出租车持续做准备的决心。（来源：新浪科技）

 

小米更新 YU7 车型锁单交付时间：标准版最快 53 周、Max 版最快 33 周

北京时间 6 月 28 日消息，小米 YU7 车型于 27 日正式开售，仅 18 小时锁单量便突破 24 万台。目前小米已刷新其 App 中订单交付周期，官方称后续相应数据也会随着产能爬坡动态更新。

目前交付时间为：小米 YU7：锁单后最快 53-56 周交付；小米 YU7 Pro：锁单后最快 48-51 周交付；小米 YU7 Max：锁单后最快 33-36 周交付。

预定 YU7 者需支付 5000 元定金，7 天内未锁单可退。此外，小米 SU7 / 小米 SU7 Ultra 锁单未交付用户，6 月 26 日晚 10 点 - 6 月 29 日晚 12 点前可限时改配小米 YU7。（来源：IT 之家）

苹果 3.5 亿美元买下湾区两栋写字楼，位于总部 11 公里外

6 月 28 日消息，据外媒 AppleInsider 报道，苹果本周花费 3.5 亿美元购买了加州湾区的两栋写字楼，两栋写字楼的总面积超 3.5 万平方米。

这两栋写字楼位于加州圣克拉拉县，其布局为双栋式办公园区，距离苹果总部 Apple Park 约为 11 公里，苹果此前曾租用过这两栋写字楼。

这两栋写字楼总面积超 35303 平方米，可为 1500-1900 名员工提供办公空间，圣克拉拉县记录员办公室提交的文件显示苹果花了 3.5 亿美元购买这两栋写字楼。（来源：IT 之家）

 

不再单一依赖英伟达，传 OpenAI 首次采用谷歌 AI 芯片训练 ChatGPT

北京时间 6 月 28 日消息，据路透社今日援引知情人士消息，OpenAI 开始租用谷歌的人工智能芯片，为 ChatGPT 和其他产品提供算力支持。

OpenAI 是英伟达 GPU 的最大客户之一，长期依赖后者 AI 芯片来训练模型及执行推理任务。本月早些时候有消息称 OpenAI 有意接入谷歌云服务，以应对日益增长的算力需求。

对谷歌而言，这项合作正值其扩大自研 Tensor 处理器（TPU）对外供货之际。此前 TPU 多用于内部项目，随后又开始向外部客户开放，并已吸引到包括苹果在内的大型科技公司，以及由前 OpenAI 高管创办的 Anthropic 和 Safe Superintelligence 等初创企业。（来源：IT 之家）

高德地图被曝提供逆行导航路线，回应称仅作展示用途并强化警示

北京时间 6 月 28 日消息，近日，有网友表示，在使用高德地图骑行导航时，提供的路线中竟出现「逆行」选项。

网友表示，虽然地图页面显示有「逆行」字样，但或许会有用户真的跟着逆行路线骑行，存在安全风险。不过，也有网友认为，在一些老城区，由于当初规划不合理，原地逆行十几米就能到达对面，而前往前方几百米的路口掉头则较为麻烦，因此高德地图提供逆行选项是更人性化的表现。

针对此事，高德地图相关工作人员日前向媒体回应称，地图显示的「逆行」路线仅作展示用途，实际上无法为用户提供该条线路导航。「逆行」路线在页面中仅作参考，旨在告诉用户该路线虽然更近，但属于「逆行」路线。此外，高德地图进一步强化了警示提醒，在逆行标签中新增「不可行」标识，明确此类路线不可用于实际导航，切实保障用户出行安全与使用体验。（来源：网易科技）

 

德国要求苹果与谷歌下架 DeepSeek 应用

北京时间 6 月 28 日消息，据路透社报道，德国数据保护专员梅克·坎普 27 日在一份声明中声称，已要求苹果和谷歌公司从其在德国的应用商店下架中国初创公司自主研发的人工智能大语言模型「深度求索」（DeepSeek）应用，理由是所谓数据安全担忧。

坎普指控 DeepSeek「非法将用户个人数据传输至中国」，并声称苹果与谷歌需尽快审查这一要求并决定是否在德国封禁该应用，但未设定具体处理时限。谷歌证实已收到通知正在进行评估，苹果公司暂未回应。（来源：36Kr）

传苹果 M5 芯片将采用「齐发」战略，今年秋季 MacBook Pro / iPad Pro 同步升级

北京时间 6 月 28 日消息，据 9to5Mac 报道，苹果 M5 芯片将采用 Mac / iPad 齐发战略，也就是今年秋季该公司将同步推出搭载相应芯片的 MacBook Pro / iPad Pro。与之相对的是，苹果在去年 5 月推出了搭载 M4 芯片的 iPad Pro，但直到 6 个月后才推出搭载相应芯片的 Mac。

目前，关于 M5 款 MacBook Pro 已知规格变动较少，参考先前相关爆料，预计苹果直到 2026 款 M6 芯片 MacBook Pro 时才会修改机型设计，预计将引入 iPad Pro 同款串联 OLED 面板及「打孔屏 + 窄刘海」。因此可以预计今年的 M5 MacBook Pro 还是以换处理器为主。（来源：IT 之家）

 

iPhone 17 Pro 调整后盖 Logo 位置，下调至机身下半部

北京时间 6 月 29 日消息，长期爆料苹果的博主 Majin Bu 发文，透露苹果 iPhone 17 Pro 将调整手机后盖苹果 Logo 徽标位置，将原先位于后盖中间位置的苹果徽标调整至相机模组和机底中间位置。据推测此举可能是为了平衡机身上半部分的摄像头模组设计。

虽然苹果将修改相应机型中 Logo 徽标位置，不过该公司并不会同步调整手机中的 MagSafe 无线充电线圈设计。但苹果公司预计将对其 MagSafe 保护壳进行修改，以匹配新设计。（来源： IT 之家）

今起民航局航班禁带「无 3C 标识充电宝」，电商平台屏蔽相应贴纸关键词

6 月 28 日消息，今年以来，旅客携带的充电宝等锂电池产品机上起火冒烟事件多发。近期多个头部品牌充电宝厂家因电芯存在安全风险对多批次产品实施召回。

参考民航局通知，自今天起旅客禁止携带没有 3C 标识、3C 标识不清晰、被召回型号或批次的充电宝乘坐境内航班。不过后续有网友发现，电商平台有商家正在售卖「CCC 贴纸」「3C 贴纸」，标价低至 0.91 元 1260 枚。

多个电商平台针对「3C 贴纸」等关键词已设置屏蔽词，相应内容已无法被搜索到。二手交易平台上也基本搜索不到相应内容。（来源：IT 之家）

做了一个小游戏：笔画猜成语

✇Limboy
2025年6月29日 08:00

前几天在看跑男，有一个游戏环节是这样的：嘉宾通过努力得到一个笔画，目标文字中如果包含该笔画就会出现。感觉挺有意思的，对它稍加改造，于是就有了这个小游戏：笔画猜成语

游戏机制是这样的：

  • 初始显示 20% 的笔画作为提示
  • 每隔一分钟会多 10% 的笔画，最多显示 50% 的笔画
  • 总共有 5 次猜测机会
  • 新题每日更新

和周围的人玩了下，还是挺有乐趣的。如果你也感兴趣的话，可以在这里体验哦。

JavaScript中let关键字的解析

✇掘金 前端
作者 moyu84
2025年6月28日 19:52

JavaScript中let关键字的解析

引言

ES6引入的let关键字彻底改变了JavaScript的变量声明方式。与传统的var相比，let提供了更严格的块级作用域和更可预测的变量行为。本文将详细对比let与var的区别，并通过实例代码展示let的特性，最后提供一些常见的面试问题。

一、let与var的核心区别

1. 变量提升(Hoisting)

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 1;

console.log(b); // undefined
var b = 2;

关键点：

  • var存在声明提升，但初始化不提升
  • let不存在声明提升，存在"暂时性死区"(TDZ)

这里我来解释一下上什么是暂时性死区，暂时性死区是指在代码块中，使用 let 或 const 声明的变量在声明之前不可访问的区域。这个概念解释了为什么在声明之前访问 let 或 const 变量会抛出引用错误。

  • 变量存在但不可访问：在进入作用域时，变量就已经存在了，但在声明语句之前不能访问
  • 与 var 的区别：var 声明的变量会提升并初始化为 undefined，而 let/const 不会初始化
  • 报错类型：在 TDZ 中访问变量会抛出 ReferenceError
示例
// 暂时性死区示例
console.log(myVar); // undefined (var 会提升)
var myVar = 'var value';

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 'let value';

更复杂的例子：

function example() {
  // 这里开始是 myVariable 的 TDZ
  console.log(typeof myVariable); // 抛出 ReferenceError
  
  let myVariable = 10; // TDZ 结束
  console.log(myVariable); // 10
}

example();

循环中的 TDZ

for (let i = 0; i < 3; i++) {
  // 每次迭代都会创建一个新的绑定，前一次迭代的变量在本次迭代的 TDZ 中
  setTimeout(() => console.log(i), 0); // 输出 0, 1, 2
}

为什么需要 TDZ？

  1. 帮助捕获编程错误：在变量声明前使用通常是错误的
  2. 提供更可预测的行为：避免了 var 提升带来的混淆
  3. 支持 const：确保常量在声明前不会被访问或修改

2. 重复声明

let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared

var b = 1;
var b = 2; // 允许重复声明

3. 全局作用域行为

let a = 1;
var b = 2;

console.log(window.a); // undefined
console.log(window.b); // 2

二、块级作用域与暂时性死区

块级作用域示例

if (true) {
  let x = 10;
  var y = 20;
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // 20

暂时性死区(TDZ)示例

let a = 1;
if (true) {
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 2;
}

三、const与let的关系

const obj = {
  name: '小明'
}
obj.name = '小芳'; // 允许修改属性
console.log(obj); // {name: '小芳'}

obj = {}; // TypeError: Assignment to constant variable

const特性：

  1. 必须初始化
  2. 基本类型值不可变
  3. 引用类型的内容可变(指针不变)
  4. 同样具有块级作用域和TDZ

四、面试常见问题

1. let、var和const的主要区别是什么？

参考答案：

  • var有函数作用域，会变量提升，可重复声明，会挂载到window
  • let有块级作用域，有TDZ，不可重复声明，不会挂载到window
  • const类似let，但必须初始化且不能重新赋值(引用类型内容可修改)

2. 什么是暂时性死区？

参考答案： 暂时性死区(TDZ)是指从进入作用域到变量声明语句执行前的区域。在此区域内访问变量会抛出引用错误。这是let和const的特性，避免了变量提升带来的不确定性。

3. 为什么需要块级作用域？

参考答案： 块级作用域解决了：

  1. 内层变量覆盖外层变量
  2. 循环变量泄露为全局变量
  3. 使代码更符合直觉，减少意外错误

4. 如何选择使用let/const/var？

参考答案：

  • 默认使用const，确保变量不被意外修改
  • 需要重新赋值时使用let
  • 避免使用var，除非需要特殊行为
  • 遵循团队编码规范

五、实际应用建议

  1. 循环中使用let：
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100); // 输出0,1,2,3,4
}
  1. 模块开发中：
// 模块内使用let/const
let privateVar = '内部变量';
export const publicVar = '公开变量';
  1. 避免全局污染：
// 使用IIFE封装
(() => {
  let localVar = '局部变量';
  // 代码逻辑
})();

总结

let关键字为JavaScript带来了真正的块级作用域，解决了var的诸多设计缺陷。理解let的暂时性死区、不可重复声明等特性，能够帮助开发者写出更安全、更可维护的代码。在实际开发中，建议优先使用const，必要时使用let，避免使用var，这是现代JavaScript开发的最佳实践。

鸿蒙汽车仪表盘项目-粒子流动

✇掘金 前端
作者 给我卷
2025年6月28日 18:45

实现了一个动态油量显示组件，其中的粒子效果模拟了液体流动的视觉效果。粒子从底部向上流动，到达顶部后重新从底部出现，形成循环流动的效果。

一，粒子数据结构

首先定义了一个Particle接口来描述每个粒子的基本属性。

  • x和y表示粒子位置坐标
  • size表示粒子大小

image.png

二，粒子初始化

在aboutToAppear生命周期方法中调用generateParticles()方法初始化粒子。

  • 使用generateParticles方法生成初始粒子群

  • 该方法设置了粒子的X/Y轴所在的位置，以及粒子的大小，并且这是X/Y值和粒子大小的值都是随机的。

image.png

确定粒子大小：

  • Math.random() * 8 生成 0~8 的随机数。
  • + 8 确保粒子最小为 8px，最大为 16px。

粒子在X轴的位置：

  • this.INNER_WIDTH 是容器的宽度（175px）。

  • -16 是因为粒子的大小是 8 + Math.random() * 8（即 8~16px）。

  • 防止粒子溢出：如果粒子大小是 16px，那么它的右边界 x + size 不能超过 INNER_WIDTH，所以最大 x 只能是 INNER_WIDTH - 16。

  • this.INNER_LEFT 是容器的左边界偏移量（计算出的内框起始位置）。

  • 保证粒子在容器内：

    • 如果直接 Math.random() * INNER_WIDTH，粒子可能超出容器左侧。

    • 加上 INNER_LEFT 确保粒子在正确的区域内生成。

三，粒子动画机制

  • 使用setInterval定时器(约16ms/帧)实现60fps动画

  • 每次更新时创建新数组(遵循ArkUI状态管理规范)

  • 每个粒子以固定速度(flowSpeed)向上移动

  • 当粒子移出顶部边界时，将其重置到底部随机位置

    ```**private** startParticleFlow(): void {  
  **this**.flowSpeed = 1.5;             *//* *设置流动速度*  
  **this**.particleTimer = setInterval(() => {  
    *//* *创建新数组（避免直接修改状态）**  
***const** newPositions: Particle[] = [];  
    *//* *遍历并更新每个粒子**  
***this**.particlePositions.forEach(particle => {  
      **let** newY = particle.y - **this**.flowSpeed;     *//* *粒子向上移动*  
      **let** newX = particle.x;  
      *//* *当粒子移出顶部时，从底部重新出现**  
***if** (newY < **this**.INNER_TOP) {  
        newY = **this**.INNER_TOP + **this**.INNER_HEIGHT - particle.size;  
        newX = Math.random() * (**this**.INNER_WIDTH - particle.size) + **this**.INNER_LEFT;  
      }  
      *//* *显式创建符合接口的新对象**  
*newPositions.push({  
        x: newX,  
        y: newY,  
        size: particle.size *//* *保持原大小**  
*});  
    });  
    *//* *更新状态**  
***this**.particlePositions = newPositions;  
  }, 16);  
}

四，粒子渲染

使用BuildParticles构建器方法渲染粒子：

```
```@Builder  
BuildParticles() {  
  ForEach(**this**.particlePositions, (item: Particle) => {  
    Circle()  
      .width(item.size)  
      .height(item.size)  
      .borderRadius(50)  
      .position({ x: item.x, y: item.y })  
      .fill('#ffff10fb') *//* *鲜艳的橙红色**  
*.opacity(0.7 + Math.sin(Date.now()/500) * 0.2)  *//* *提高基础透明度**  
*.transition(  
        TransitionEffect.OPACITY  
          .combine(TransitionEffect.scale({ x: 0.8, y: 0.8 })) *//* *使用小写* *scale  
*.animation({  
            duration: 300,  
            curve: Curve.Ease *//* *可选添加缓动曲线**  
*})  
      )  
  }, (item: Particle) => `${item.x}-${item.y}`)  
}

最后进行渲染，将每个粒子遍历出来，为每个粒子创建一个圆形视觉元素，这样粒子看起来都是圆的，并设置其大小等等的元素，便可以实现动态粒子的展示。

智能前端之图片识别：用React和Moonshot AI打造图片识别应用

✇掘金 前端
作者 FogLetter
2025年6月29日 07:54

前言：当图片遇见AI

大家好！今天我们要探索一个非常酷炫的前端技术——图片识别。想象一下，用户上传一张图片，我们的前端应用不仅能显示预览，还能通过AI识别图片内容并生成详细描述。这听起来像是未来科技，但其实用React和一些现代API就能轻松实现！

作为前端开发者，我们正处在一个令人兴奋的时代。计算机视觉和自然语言处理的进步让我们可以在浏览器中实现以前只能在科幻电影中看到的功能。本文将带你一步步构建这样一个应用，同时分享一些我在开发过程中的心得和最佳实践。

项目概述

我们要构建的应用具有以下功能：

  1. 用户可以选择并上传本地图片
  2. 实时显示图片预览
  3. 将图片发送到AI API进行分析
  4. 显示AI生成的图片描述

听起来很简单？让我们深入细节，看看如何优雅地实现这些功能。

技术栈选择

  • React：我们的前端框架，提供组件化和状态管理
  • FileReader API：处理本地文件读取
  • Moonshot AI：提供图片识别能力
  • Vite：项目构建工具，支持环境变量管理

严格模式：React的安全网

// StrictModel react 默认启动的严格模式
// 执行一次，测试一次 两次

在React 18+中，严格模式(Strict Mode)默认启用。这是一个非常有用的开发工具，它会：

  • 故意双重调用组件函数（仅在开发环境）
  • 检查过时的API使用
  • 检测意外的副作用

这解释了为什么你可能会在控制台看到某些日志出现两次。这不是bug，而是React在帮助我们提前发现潜在问题。

开发建议：始终保留严格模式，它能帮你捕获许多难以追踪的问题，特别是在使用useEffect时。

环境变量：安全地管理API密钥

console.log(import.meta.env.VITE_API_KEY)

在现代前端开发中，我们经常需要使用API密钥等敏感信息。Vite提供了优雅的环境变量解决方案：

  1. 创建.env文件在项目根目录
  2. 变量必须以VITE_前缀开头
  3. 通过import.meta.env访问

安全提示：永远不要将.env文件提交到版本控制！将其添加到.gitignore中。

状态管理：React的核心

const [content, setContent] = useState('')
const [imgBase64Data, setImgBase64Data] = useState('')
const [isValid, setIsValid] = useState(false)

React的useState hook是我们管理组件状态的主要工具。在这个应用中，我们维护三个状态：

  1. content：存储AI返回的图片描述
  2. imgBase64Data：存储图片的Base64编码
  3. isValid：控制提交按钮的禁用状态

设计原则：保持状态最小化，只存储必要的数据。派生数据应该在渲染时计算。

图片预览：即时反馈的重要性

const updateBase64Data = (e) => {
  const file = e.target.files[0];
  if(!file) return;
  
  const reader = new FileReader();
  reader.readAsDataURL(file);
  
  reader.onload = () => {
    setImgBase64Data(reader.result)
    setIsValid(true)
  }
}

图片上传和处理可能很慢，良好的用户体验要求我们提供即时反馈。这里我们使用FileReader API来实现：

  1. 用户选择文件后，触发onChange事件
  2. 通过e.target.files[0]获取文件对象
  3. 创建FileReader实例
  4. 使用readAsDataURL方法将文件转换为Base64字符串
  5. 转换完成后，更新状态

Base64小知识：Base64是一种用64个字符表示二进制数据的编码方案。它可以将图片数据转换为字符串，方便在JSON中传输。

无障碍访问：为所有人构建

<label htmlFor="fileInput">文件：</label>
<input 
  type="file"
  id='fileInput'
  className='input'
  accept='.jpeg,.jpg,.png,.gif'
  onChange={updateBase64Data}
/>

无障碍访问(A11Y)经常被忽视，但它对用户体验至关重要。这里我们：

  1. 使用label与input通过htmlFor和id关联
  2. 为输入添加明确的标签
  3. 限制可接受的图片格式

无障碍提示：屏幕阅读器依赖正确的标签关联来向视障用户描述表单控件。不要忽视这些细节！

与AI API交互：异步编程的艺术

const update = async () => {
  if(!imgBase64Data) return;
  
  const endpoint = 'https://api.moonshot.cn/v1/chat/completions';
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${import.meta.env.VITE_API_KEY}`
  }
  
  setContent('正在生成...')
  
  const response = await fetch(endpoint, {
    method: 'POST',
    headers,
    body: JSON.stringify({
      model: 'moonshot-v1-8k-vision-preview',
      messages: [
        {
          role: 'user',
          content: [
            {
              type: 'image_url',
              image_url: {
                url: imgBase64Data
              }
            },
            {
              type: 'text',
              text: '请详细描述这张图片的内容'
            }
          ]
        }
      ]
    })
  })
  
  const data = await response.json()
  setContent(data.choices[0].message.content)
}

这是与Moonshot AI API交互的核心代码。让我们分解这个异步过程：

  1. 首先检查是否有图片数据
  2. 设置API端点和请求头（包含认证）
  3. 立即更新状态显示"正在生成..."（即时反馈）
  4. 使用fetch发起POST请求
  5. 请求体包含图片数据和提示文本
  6. 解析响应并更新状态

异步编程选择：我们使用async/await而不是.then链，因为它提供了更线性的代码结构，更易于理解和维护。

错误处理：被忽视的重要部分

虽然示例代码中没有展示，但在生产环境中，我们必须添加错误处理：

try {
  const response = await fetch(endpoint, { /* ... */ });
  if (!response.ok) throw new Error('网络响应不正常');
  const data = await response.json();
  setContent(data.choices[0].message.content);
} catch (error) {
  setContent('识别失败: ' + error.message);
  console.error('API调用失败:', error);
}

最佳实践：总是处理网络请求可能失败的情况，并向用户提供友好的错误信息。

性能优化：减少不必要的渲染

React组件在状态变化时会重新渲染。对于我们的应用，可以做一些优化：

  1. 使用useCallback记忆事件处理函数
  2. 对于大型图片，考虑压缩后再上传
  3. 添加防抖或节流（如果适用）
const updateBase64Data = useCallback((e) => {
  // ...原有逻辑
}, []);

性能提示：React DevTools的Profiler工具可以帮助你识别性能瓶颈。

样式与布局：不只是功能

虽然本文主要关注功能实现，但良好的UI同样重要。我们的CSS可能包含：

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.preview img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.input {
  margin: 10px 0;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

UI原则：确保应用在不同设备上都能良好显示（响应式设计），并为交互元素提供视觉反馈。

扩展思路：让应用更强大

这个基础应用可以扩展许多有趣的功能：

  1. 多图片分析：允许用户上传多张图片并比较结果
  2. 自定义提示：让用户输入自己的问题而不仅是描述图片
  3. 历史记录：保存之前的识别结果
  4. 图片编辑：添加简单的裁剪或滤镜功能

总结：前端开发的未来

通过这个项目，我们看到了现代前端开发的强大能力。借助React和现代浏览器API，我们能够：

  1. 处理本地文件
  2. 提供实时预览
  3. 与AI服务交互
  4. 创建响应式和无障碍的界面

图片识别只是计算机视觉在前端的冰山一角。随着WebAssembly和WebGPU等技术的发展，前端将能够处理更复杂的AI任务。

最后的思考：作为开发者，我们不仅要关注功能的实现，还要考虑用户体验、性能和可访问性。每一个细节都可能影响用户对我们产品的感受。

希望这篇文章能激发你对智能前端的兴趣！如果你有任何问题或想法，欢迎在评论区讨论。Happy coding! 🚀

附录：完整代码

import { useState, useCallback } from 'react'
import './App.css'

function App() {
  const [content, setContent] = useState('')
  const [imgBase64Data, setImgBase64Data] = useState('')
  const [isValid, setIsValid] = useState(false)

  const updateBase64Data = useCallback((e) => {
    const file = e.target.files[0];
    if(!file) return;
    
    const reader = new FileReader();
    reader.readAsDataURL(file);
    
    reader.onload = () => {
      setImgBase64Data(reader.result)
      setIsValid(true)
    }
  }, [])

  const update = async () => {
    if(!imgBase64Data) return;
    
    try {
      const endpoint = 'https://api.moonshot.cn/v1/chat/completions';
      const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${import.meta.env.VITE_API_KEY}`
      }
      
      setContent('正在生成...')
      
      const response = await fetch(endpoint, {
        method: 'POST',
        headers,
        body: JSON.stringify({
          model: 'moonshot-v1-8k-vision-preview',
          messages: [
            {
              role: 'user',
              content: [
                {
                  type: 'image_url',
                  image_url: {
                    url: imgBase64Data
                  }
                },
                {
                  type: 'text',
                  text: '请详细描述这张图片的内容'
                }
              ]
            }
          ]
        })
      })
      
      if (!response.ok) throw new Error('网络响应不正常');
      const data = await response.json()
      setContent(data.choices[0].message.content)
    } catch (error) {
      setContent('识别失败: ' + error.message)
      console.error('API调用失败:', error)
    }
  }

  return (
    <div className='container'>
      <div>
        <label htmlFor="fileInput">文件：</label>
        <input 
          type="file"
          id='fileInput'
          className='input'
          accept='.jpeg,.jpg,.png,.gif'
          onChange={updateBase64Data}
        />
        <button onClick={update} disabled={!isValid}>提交</button>
      </div>
      <div className="output">
        <div className="preview">
          {imgBase64Data && <img src={imgBase64Data} alt="预览" />}
        </div>
        <div>
          {content}
        </div>
      </div>
    </div>
  )
}

export default App

实现CSS滚动视差效果的几种方式

✇掘金 前端
作者 一诺滚雪球
2025年6月29日 02:32

前言

视差滚动效果是一种视觉设计。这种效果通过让页面中不同元素创造出层次感，让网页看起来更加生动。

本文将详细介绍如何使用纯CSS实现滚动视差效果，重点分析三种不同的实现方式。

1. 实现思路

在CSS中实现视差效果主要有以下几种思路：

  1. 固定背景法：使用background-attachment: fixed属性将背景图片固定在视口中，当内容滚动时背景保持不动，从而产生视差效果。
  2. 粘性定位法：使用position: sticky属性让特定元素在滚动到特定位置时"粘"在视口中，而其他内容继续滚动，产生视差感。
  3. 基于CSS 3D变换 使用 transform-style: preserve-3d 和 perspective 的3D视差滚动效果

在实际项目中，可以根据自身具体需求选择最适合的方法。

2. 具体实现

下面详细介绍三种具体的CSS滚动视差实现方法：

  1. 基于粘性定位的视差效果
  2. 基于固定背景的视差效果
  3. 基于CSS 3D变换

2.1 基于粘性定位的视差效果

第一种实现方式，使用了position: sticky属性来创建视差效果。

具体代码如下：


    <style>
        .container {
            position: relative;
            width: 100%;
        }
        .container section {
            position: sticky;
            top: 0;
            height: 100vh;
            background: #333;
            display: flex;
        }
        .container section img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>

    <div class="container">
        <section>
            <img src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422">
        </section>
        <section>
            <img src="https://img2.baidu.com/it/u=3018303209,1765139986&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=722">
        </section>
        <section>
            <img src="https://img1.baidu.com/it/u=2376489989,3127732063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=657">
        </section>
        <section>
            <img src="https://img0.baidu.com/it/u=3739429570,2783758709&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750">
        </section>
        <section>
            <img src="https://img2.baidu.com/it/u=1533484450,2625314894&fm=253&fmt=auto&app=138&f=JPEG?w=664&h=500">
        </section>
    </div>

代码为每个section都使用了position: sticky属性，设置为top: 0，高度为100vh(视口高度)。当滚动页面时，每个section会在到达视口顶部时粘住，保持在视口中可见。

2.2 基于固定背景的视差效果

第二种实现方式，使用了background-attachment: fixed属性来创建视差效果。

具体代码如下：

section {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
            background-attachment: fixed;
        }

        section:nth-child(1) {
            background-image: url("https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422");
        }

        section:nth-child(2) {
            background-image: url("https://img2.baidu.com/it/u=3018303209,1765139986&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=722");
        }

        section:nth-child(3) {
            background-image: url("https://img1.baidu.com/it/u=2376489989,3127732063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=657");
        }

        section:nth-child(4) {
            background-image: url("https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422");
        }

<section></section>
<section></section>
<section></section>
<section></section>

代码通过background-attachment: fixed属性将背景图片固定在视口中。当用户滚动页面时，背景图片保持不动，而内容区域(包含文字的div)正常滚动，从而产生视差效果。

这种方法实现简单，兼容性好，适合创建全屏背景视差效果。

2.3 基于CSS 3D变换

通过CSS 3D变换实现了一个简单的视差滚动效果，主要利用transform-style: preserve-3d以及perspective属性实现。

具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100vh;
            overflow: hidden;
        }

        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            background: #222;

            /* 设置景深，并且开启3D效果 */
            perspective: 1px;
            transform-style: preserve-3d;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .section1::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            background: url("https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422") top center;
            background-size: cover;

            /* 将图片图层换到-1图层，并放大图片 */
            transform: translateZ(-1px) scale(2.2);
        }

        .section1,
        .section2 {
            width: 100%;
            min-height: 100vh;
            position: relative;

            /* 保留字类的3D属性 */
            transform-style: preserve-3d;

        }

        .section2 {
            background: rgb(68, 35, 19);
        }

    </style>
</head>

<body>
    <div class="section1">
    </div>

    <div class="section2">
    </div>

</body>

</html>

  • perspective :perspective 定义我们眼睛看到的 3d 立体效果，即空间感。所以perspective: 1px 时，我们是在告诉浏览器，以一个非常近的的距离（1 像素）来观察元素的 3D 变换。

  • transform-style: preserve-3d 开启3D空间。

  • transform: translateZ(-1px) scale(2.2); translateZ(-1px)把元素放在-1图层，距离越远物体越小，所以我们要设置scale将其放大。

  • transform-style: preserve-3d;这是为了让它有自己的3D样式，避免父元素的3D效果对其造成影响。

  • .section1::before: 通过 ::before 伪元素，可以将其视为一个实际的元素，具有自己的 position、transform、opacity 等属性，使得我们可以对背景图像进行 3D 变换、动画效果等操作。而这些操作使用 background-image 可能无法轻松实现。

利用透视（perspective）和Z轴位移（translateZ）控制不同层级的滚动速度差异，形成近快远慢的视差效果。

3. 总结

最后总结一下，通过本文的介绍，我们三种方式的纯CSS实现滚动视差效果的方法：基于粘性定位的方法和基于固定背景的方法和基于3D方式。

希望能对你有所帮助，如有错误，请指正O^O!

现代前端演变摘要

✇掘金 前端
作者 YeeWang
2025年6月29日 00:15

本文 500%+ 内容来自 AI 撰写，但绝不口水

image.png

现代前端开发体系远比传统网页制作流程复杂，已从最初的静态页面演变为高度模块化、工程化、自动化的开发范式。本文系统梳理现代前端渲染的基本原理，主要围绕：开发环境为何需要本地服务（如 Node.js）、现代前端框架（如 React）的技术演进与核心价值、代码编译与构建工具（如 Vite）的作用、热更新机制、代理与调试流程，并对比传统前端方案的弊端，明确现代前端复杂性的源头及其带来的显著优势。

传统前端开发模式的局限性

技术架构概览

image.png

典型的技术栈包括：服务端采用 JSP/PHP/ASP.NET 等模板引擎，配合 Struts、Spring MVC 等 MVC 框架；前端使用 jQuery 处理 DOM 操作和 AJAX 请求；数据库层面以 MySQL、Oracle 为主；部署在 Tomcat、Apache 等 Web 服务器上。

这种架构下，服务器承担了绝大部分的计算和渲染工作。每次页面请求，服务器都需要查询数据库、处理业务逻辑、渲染 HTML 模板，最终返回完整的 HTML 页面给浏览器。前端 JavaScript 的作用主要是增强交互体验，如表单验证、动画效果、局部刷新等。

典型项目结构

image.png

工作流程

image.png

前后端混编 是这一时期最显著的特征。JSP 页面中混杂着 Java 代码、HTML 标记和 JavaScript 脚本，前端工程师需要理解后端逻辑，后端工程师也要处理页面展示。这种模式在小型项目中尚可接受，但随着项目规模扩大，代码维护变得极其困难。

 存在的核心问题

开发效率低下： 修改一行 CSS 可能需要重启整个应用服务器，调试 JavaScript 需要不断刷新页面，没有热更新机制。前后端开发人员需要共享同一个项目，经常出现代码冲突。开发流程相对原始：使用 Eclipse 或 MyEclipse 进行 Java 开发，Dreamweaver 编辑前端页面，通过 SVN 进行版本控制。

代码组织混乱： JavaScript 代码散落在各个 JSP 页面中，大量使用全局变量，没有模块化概念。复杂的业务逻辑通过 jQuery 回调嵌套实现，形成"回调地狱"。HTML、CSS、JavaScript、Java 代码混杂在一起，违反关注点分离原则。

性能优化困难： 缺乏自动化的压缩、合并工具，需要手动处理静态资源。没有缓存策略，每次请求都可能重复加载相同的资源。服务端渲染的压力大，用户量增长时容易出现性能瓶颈。

工程化能力缺失： 没有包管理器，引入第三方库需要手动下载和管理版本。没有代码规范检查，代码质量参差不齐。部署流程完全手动：将项目打包成 WAR 文件，通过 FTP 上传到服务器，手动执行部署脚本。

时代的终结与变革的开始

尽管 JSP + jQuery 的组合在当时已经是最佳实践，但面对日益复杂的前端需求，这种开发模式的局限性愈发明显。企业开始追求更好的用户体验，希望 Web 应用能够像桌面软件一样流畅；项目复杂度提升，需要更好的代码组织和工程化手段。

这些需求的累积，为前端技术的革命性变化创造了条件。业界开始思考：能否让前端开发独立出来？能否用 JavaScript 统一前后端技术栈？能否建立完善的前端工程化体系？这些问题的答案，都指向了一个即将改变整个 Web 开发格局的技术——Node.js。

从手工作坊式的开发模式到工程化、自动化的现代开发体系，Web 前端即将迎来其发展史上最重要的转折点。

现代前端渲染体系的演进

前端工程化的核心诉求

随着 Web 应用复杂度的急剧提升，前端开发从简单的页面制作演变为复杂的工程体系。企业级应用动辄包含数千个组件、数万行代码，传统的开发模式已无法满足需求。前端工程化成为行业共识，其核心诉求体现在以下几个方面：

模块化开发： 在 jQuery 时代，全局变量污染是普遍问题，一个页面可能存在数百个全局变量，命名冲突频发。模块化让每个功能单元独立封装，通过明确的接口进行通信，极大提升了代码的可维护性与可复用性。

组件化 UI 构建： 将页面拆分为独立的、可复用的组件，每个组件包含自己的模板、样式和逻辑。这种开发方式不仅提高了开发效率，更让大型团队协作成为可能。

自动化构建与优化： 代码压缩、图片优化、资源合并、缓存处理等繁琐工作全部自动化，构建工具能够根据配置自动完成这些任务，输出生产环境优化后的代码。

开发调试便利性： 热更新让代码修改即时生效，Source Map 让压缩后的代码可以调试，浏览器开发工具的完善让问题定位更加精准。这些改进让前端开发效率提升了数倍。

本地服务的引入：Node.js 的关键作用

本地开发服务器的必要性

动态资源响应： 传统的静态文件直连模式（file:// 协议）无法满足模块加载、动态编译等需求。Node.js 本地服务器可以拦截资源请求，实时编译 TypeScript、转换 JSX、处理 CSS 预处理器，按需返回处理后的资源。当检测到文件变化时，自动触发热更新，将变更推送到浏览器，无需手动刷新页面。

本地接口代理： 通过 Express、Koa 等框架搭建的本地服务，配合 http-proxy-middleware 等中间件，可以灵活配置代理规则。开发环境下，将 /api/* 的请求代理到后端服务器，既解决了浏览器跨域限制，又能在本地环境访问真实接口。更高级的代理工具如 Whistle、AnyProxy 还提供了请求拦截、响应修改、流量录制等功能。

构建与优化流程集成： 本地服务不仅服务于开发阶段，还集成了完整的构建流程。Webpack、Rollup 等构建工具通过 Node.js API 提供服务，实现代码分割、Tree Shaking、懒加载等优化策略。开发时注重速度和体验，生产构建时注重体积和性能，一套配置满足不同场景需求。

工作流程

image.png

这种架构下，Node.js 本地服务成为连接开发者与浏览器的桥梁。它不仅提供静态资源服务，更是一个功能完备的开发平台：处理模块依赖、编译源代码、优化资源加载、代理网络请求。开发者只需要关注业务逻辑，工程化的复杂性被工具链完美封装。

现代前端工程化体系的建立，标志着前端开发从"刀耕火种"进入了工业化时代。Node.js 在其中扮演了至关重要的角色，它让 JavaScript 不再局限于浏览器，而是成为贯穿整个开发流程的统一语言。

现代前端框架的技术变革：为何采用 React？

传统前端 UI 构建的痛点

在前端框架出现之前，构建复杂的用户界面如同在沙地上建造城堡，稍有不慎便会崩塌。开发者们在与 DOM 的搏斗中疲惫不堪，每一个看似简单的交互背后都隐藏着大量的陷阱。

DOM 操作繁琐： 一个简单的待办事项列表，需要监听输入框、创建元素、绑定事件、更新计数，每一步都需要精确的 DOM 操作。更糟糕的是，状态散落在 DOM 属性、JavaScript 变量、后端数据等多个地方，稍有疏忽就会造成界面与数据不同步。开发者需要记住每个元素的状态，手动维护它们之间的关系，这种开发方式在复杂应用中几乎不可维护。

状态管理不一致： 当一个购物车的商品数量发生变化时，需要更新商品列表、总价、优惠信息、结算按钮状态等多处界面。传统开发模式下，这些更新逻辑散落在各个事件处理函数中，极易遗漏某个更新点。更复杂的是，当多个组件共享状态时，保持它们的同步几乎成为不可能完成的任务。大型应用因此举步维艰。

UI 复用性差： 虽然可以通过模板引擎实现一定程度的复用，但这种复用仅限于 HTML 结构。一个完整的 UI 组件包含结构、样式、行为和状态，传统方式无法将它们有效封装。开发者经常需要复制粘贴大段代码，稍作修改后用于不同场景，这种做法不仅低效，还给后期维护埋下隐患，严重影响开发效率。

缺乏响应式更新： 每当数据发生变化，开发者需要手动找到对应的 DOM 元素并更新其内容。这种命令式的编程方式不仅繁琐，还容易出错。在数据频繁变化的场景下，性能问题也随之而来，因为开发者很难判断哪些 DOM 操作是必要的，往往会过度更新。数据驱动的开发成为奢望。

维护成本高： 随着项目规模增长，代码库变成了一团乱麻。全局变量满天飞，事件监听器忘记解绑造成内存泄漏，复杂的 jQuery 选择器让人望而生畏。新加入的开发者需要花费大量时间理解代码逻辑，一个简单的需求变更可能牵一发而动全身。

现代化前端框架的核心创新

React、Vue 的出现如同黑暗中的一道光芒，它用全新的思维方式重新定义了前端开发。

声明式 UI： 通过 JSX 语法，开发者只需要描述在特定状态下界面应该是什么样子，而不用关心如何从当前状态转换到目标状态。这种方式就像告诉画家"画一个红色的圆"，而不是"拿起红色画笔，移动到坐标(x,y)，画一个半径为 r 的圆"。当状态发生变化时，React 会自动计算出最优的更新路径，使开发者从繁琐的 DOM 操作中彻底解放出来。这彻底改变了开发者的思维模式。

虚拟 DOM 与高效 Diff 算法： React 在内存中维护一棵轻量级的 JavaScript 对象树来表示 DOM 结构。当状态变化时，React 会创建新的虚拟 DOM 树，通过高效的 Diff 算法比较新旧两棵树的差异，只将必要的变更应用到真实 DOM 上。这种批量更新的方式避免了频繁的 DOM 操作，显著提升了性能。这是 React 性能优化的核心。

组件化开发范式： 每个组件都是一个独立的单元，包含自己的状态、属性、生命周期和渲染逻辑。组件可以嵌套、组合，形成复杂的 UI 结构。这种方式不仅提高了代码复用性，更重要的是建立了清晰的边界和接口，让大型团队协作成为可能。前端开发真正进入了工程化时代。

单向数据流： 数据永远从父组件流向子组件，子组件通过回调函数向上传递事件。这种明确的数据流向让应用状态变化有迹可循，配合状态管理库，即使是最复杂的应用也能保持清晰的架构。这确保了应用的可预测性。

技术栈演进对比

image.png

方案 视图声明方式 组件化 状态管理 性能优化 典型代表
传统 jQuery 命令式 无 手动维护 手动优化 jQuery + 插件
传统模板引擎 模板+数据 弱（仅模板复用） 数据绑定 手动优化 Handlebars、artTemplate
React/Vue 声明式 强（完整组件） 响应式/单向流 自动优化 React、Vue、Angular

微前端与性能优化：架构演进与用户体验优化

微前端架构的兴起背景

随着企业数字化转型的深入，前端应用的规模达到了前所未有的程度。一个大型 SaaS 平台可能包含数百个页面、数千个组件，由几十个团队共同维护。传统的单体前端架构在这种规模下暴露出诸多问题。

团队协作困境： 当多个团队在同一个代码仓库中工作时，代码冲突成为日常。一个团队的技术升级可能影响其他团队的功能，发布窗口需要严格协调，任何一个模块的 Bug 都可能导致整个应用无法发布。这种耦合严重制约了团队的自主性和创新能力。

技术栈锁定： 单体应用一旦选定技术栈，迁移成本极高。即使出现了更适合的技术方案，团队也只能望洋兴叹。老旧代码与新技术并存，技术债务不断累积，最终拖累整个应用的发展。

构建部署瓶颈： 随着代码量增长，构建时间从几秒增长到几十分钟。一个小改动需要重新构建整个应用，开发效率严重下降。部署风险也随之增加，任何一处错误都可能影响全局。

微前端架构的出现，正是为了解决这些痛点。它借鉴了后端微服务的思想，将巨大的前端应用拆分成多个可独立开发、测试、部署的小型应用。

服务端渲染（SSR）的价值回归

在 SPA（单页应用）盛行多年后，服务端渲染重新回到了开发者的视野。这并非技术的倒退，而是对用户体验更深层次的思考。

首屏性能优化成为核心： 传统 SPA 需要下载 JavaScript、执行代码、请求数据、渲染页面，用户往往需要盯着白屏或加载动画等待数秒。而 SSR 直接返回渲染好的 HTML，浏览器收到即可显示，首屏时间可以缩短 50% 以上。对于电商、新闻等对首屏速度敏感的场景，这种提升直接影响转化率。

SEO 优化的必然选择： 搜索引擎爬虫对 JavaScript 渲染的支持仍然有限，纯客户端渲染的页面难以被正确索引。SSR 返回的是完整的 HTML 内容，确保搜索引擎能够准确理解页面内容。对于依赖搜索流量的业务，SSR 几乎是唯一选择。

渐进式增强的最佳实践： SSR 并不意味着放弃客户端的交互能力。现代 SSR 框架采用"同构"架构，服务端渲染初始页面，客户端接管后续交互。这种方式兼顾了首屏性能和交互体验，实现了真正的渐进式增强。

现代性能优化策略

性能优化已经从简单的文件压缩、图片优化，演进为一门系统工程。现代前端性能优化围绕用户体验展开，关注的不仅是加载速度，更是可交互时间和运行时性能。

代码分割与懒加载：

image.png

通过路由级别的代码分割，首次加载只包含当前页面所需代码。Webpack 的动态 import() 配合 React.lazy() 或 Vue 的异步组件，可以将代码拆分到极致。大型图表库、富文本编辑器等重量级依赖只在使用时才加载，极大减少了初始包体积。

缓存策略优化：

  • 静态资源永久缓存：通过内容哈希命名（如 app.a3b5c7.js），配合 Cache-Control: max-age=31536000，实现静态资源的永久缓存

  • Service Worker 离线缓存：关键资源通过 Service Worker 缓存到本地，即使断网也能访问

  • HTTP/2 Server Push：服务器主动推送关键资源，减少往返时间

  • CDN 边缘缓存：静态资源部署到 CDN，用户从最近的节点获取资源

运行时性能优化：

  • 虚拟列表技术：只渲染可视区域的元素，支持数万条数据的流畅滚动

  • Web Worker 计算：将复杂计算移到 Worker 线程，避免阻塞主线程

  • 防抖与节流：优化高频事件处理，减少不必要的计算和渲染

  • 懒加载与预加载：图片懒加载配合 Intersection Observer，关键资源预加载提升体验

构建优化与部署策略：

  • Tree Shaking：移除未使用的代码，减少包体积

  • Scope Hoisting：减少函数作用域，优化代码执行效率

  • 增量构建：只构建变更的模块，提升开发效率

  • 并行构建：利用多核 CPU 并行处理，缩短构建时间

  • 灰度发布：通过 Nginx 配置或前端路由，逐步推送新版本

这些优化策略的综合应用，让现代前端应用在功能日益复杂的同时，依然能够保持优秀的性能表现。从架构设计到代码实现，从构建流程到部署策略，性能优化贯穿整个开发周期，成为前端工程化不可或缺的一环。

总结：前端复杂性的必然与价值

复杂性背后的驱动力

站在 2025 年回望前端技术的演进历程，我们不禁要问：为什么曾经简单的网页开发，变成了今天需要掌握众多技术栈的复杂工程？这种复杂性是技术的过度设计，还是时代发展的必然？

用户期待的指数级增长： 二十年前，用户满足于静态的信息展示；十年前，用户期待流畅的交互体验；今天，用户要求媲美原生应用的性能和功能。从简单的表单提交到实时协作编辑，从页面跳转到无缝切换，每一次体验提升的背后，都是技术复杂度的成倍增加。

业务复杂度的爆炸式增长： 现代 Web 应用承载的不再是简单的内容展示，而是完整的业务系统。一个在线协作平台需要实时同步、冲突解决、权限管理、版本控制；一个电商系统需要商品展示、库存管理、支付流程、物流跟踪。业务逻辑的复杂必然带来技术架构的复杂。

开发规模的量级跃升： 从个人开发到团队协作，从单一产品到产品矩阵，前端工程的规模发生了质变。当代码量从千行增长到百万行，当开发人员从个位数增长到数百人，简单的开发模式已经无法支撑。工程化、模块化、自动化不是选择，而是生存的必需。

性能与体验的极致追求： 在注意力稀缺的时代，每 100ms 的延迟都可能导致用户流失。首屏加载、运行时性能、离线可用、跨端一致，这些看似苛刻的要求推动着技术不断进化。虚拟 DOM、Service Worker、WebAssembly，每一项技术都是为了突破性能的边界。

6.2 回到过去，会更好吗？

假如我们真的回到 jQuery 时代，抛弃所有现代化的工具和框架，会得到怎样的结果？

开发效率的断崖式下跌： 没有组件化，每个 UI 元素都需要手写 HTML、CSS、JavaScript；没有状态管理，数据同步全靠手动维护；没有构建工具，代码组织全凭个人经验。一个现在一周能完成的功能，可能需要一个月。

代码质量的不可控： 没有 TypeScript 的类型检查，运行时错误防不胜防；没有 ESLint 的代码规范，团队代码风格各异；没有单元测试框架，代码质量全靠人工保证。每一次重构都如履薄冰，每一个 Bug 都可能引发连锁反应。

用户体验的全面倒退： 回到页面整体刷新的时代，每次操作都要等待服务器响应；没有懒加载和代码分割，用户需要一次性下载所有资源；没有离线缓存，网络稍有波动就无法使用。这样的体验在今天是无法被接受的。

创新能力的严重受限： WebGL 3D 渲染、WebRTC 视频通话、PWA 离线应用、WebAssembly 高性能计算，这些推动 Web 边界的创新都建立在现代技术栈之上。回到过去，意味着放弃这些可能性，将 Web 限制在简单的信息展示层面。

6.3 复杂性的价值与未来

前端的复杂性不是目的，而是手段。每一层抽象、每一个工具、每一种模式，都是为了解决实际问题：

image.png

复杂性带来了专业化： 正如医学从单一学科分化出内科、外科、儿科等专业方向，前端也在细分。性能优化工程师、可视化专家、工程化架构师，每个方向都有深厚的技术积累。这种专业化让前端能够应对更具挑战性的问题。

复杂性促进了标准化： ECMAScript 规范的持续演进、W3C 标准的不断完善、社区最佳实践的广泛认同，复杂性倒逼着行业建立标准。这些标准不仅提高了代码质量，更重要的是建立了共同语言，促进了知识传播和人才流动。

复杂性推动了创新： 每一次技术栈的更新都伴随着新的可能性。React Hooks 改变了状态管理的思维方式，Web Components 探索了原生组件化的道路，Web Assembly 打开了高性能计算的大门。

拥抱复杂，但保持简单

面对前端技术的复杂性，正确的态度不是逃避或对抗，而是理解和驾驭：

理解本质，而非追逐潮流： 框架会更替，但组件化思想长存；工具会演进，但工程化理念不变。掌握技术背后的原理和思想，比学会使用工具更重要。

**选择合适，而非盲目跟风：**不 是每个项目都需要微前端，不是每个应用都需要 SSR。根据实际需求选择技术栈，避免过度设计。复杂性应该用在解决真实问题上，而非炫技。

持续学习，但保持聚焦： 前端技术日新月异，但核心知识相对稳定。深入掌握 JavaScript、理解浏览器原理、精通一个主流框架，比浅尝辄止地追逐每个新技术更有价值。

回归初心，关注用户价值： 技术的复杂性最终要服务于用户体验。性能优化是为了更快的加载速度，组件化是为了更一致的交互体验，工程化是为了更稳定的产品质量。不让技术复杂性成为目的本身。

前端技术的复杂化是互联网发展的必然结果，是 Web 从简单的文档展示平台演进为通用应用平台的必经之路。这种复杂性带来了挑战，但更带来了机遇。它让 Web 开发者能够构建前所未有的应用，创造令人惊叹的体验，推动数字世界的边界。

站在历史的角度看，我们正处在前端发展最好的时代。工具链的成熟让开发更高效，生态的繁荣提供了无限可能，社区的活跃促进了知识共享。复杂性不是终点，而是通向更广阔未来的阶梯。

参考资料

[1] A Brief History of Frontend Engineering - DEV Community

[2] A Brief History of Frontend Engineering: From Basics to Modern ...

[3] Comparing JavaScript Bundlers: Rollup vs Webpack vs Parcel - Kinsta

[4] Using ES Modules in the Browser Today

[5] CommonJS modules | Node.js v24.2.0 Documentation

[6] Book Review & Summary: The Pyramid Principle by Barbara Minto

[7] Why is front-end development so complicated? - DEV Community

[8] Top 10 Front-End Frameworks for Modern Web Development

[9] History of front-end frameworks - LogRocket Blog

[10] webpack dev server - GitHub

❌
❌