前端徐徐_个人页

2024年10月

• 10.18 10:08:04
  发表了文章 2024-10-18 10:08:04

  React中样式解决方案有哪些？

  本文首发于微信公众号“前端徐徐”，探讨了React开发中的样式管理方法，包括内联样式、常规CSS、CSS-Module、CSS-in-JS及使用CSS框架等五种常见方案，分析了各自的优缺点，帮助开发者根据项目需求选择合适的样式解决方案。
• 10.18 10:03:58
  发表了文章 2024-10-18 10:03:58

  10 种方案提升你 React 应用的性能

  本文首发于微信公众号「前端徐徐」，作者徐徐分享了提升 React 应用性能的方法。文章详细介绍了 `useMemo`、虚拟化长列表、`React.PureComponent`、缓存函数、使用 Reselect、Web Worker、懒加载、`React.memo`、`useCallback` 和 `shouldComponentUpdate` 等技术，通过实际案例和代码示例展示了如何优化 React 应用的性能。这些方法不仅减少了不必要的重新渲染和计算，还提升了应用的响应速度和用户体验。
• 10.18 10:02:35
  发表了文章 2024-10-18 10:02:35

  自定义React Hooks综合指南

  本文介绍了React Hooks及其在组件开发中的作用，重点讲解了自定义Hook的创建和使用方法。通过实例展示了如何创建`useWindowWidth`、`useFetch`和`useForm`等自定义Hook，并分享了使用自定义Hook的最佳实践。文章强调了自定义Hook在提高代码复用性和组件可维护性方面的重要性。
• 10.18 10:00:05
  发表了文章 2024-10-18 10:00:05

  React将组件作为属性传递的最佳实践

  本文探讨了在React中将组件作为属性传递的三种常见方式：作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件，对比分析了每种方式的优缺点，最终推荐将组件作为函数传递，因为它提供了更好的可控性、灵活性和可扩展性。
• 10.18 09:59:07
  发表了文章 2024-10-18 09:59:07

  React开发需要了解的10个库

  本文首发于微信公众号“前端徐徐”，介绍了React及其常用库。React是由Meta开发的JavaScript库，用于构建动态用户界面，广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景，帮助开发者提升开发效率和代码质量。

  
• 10.18 09:54:22
  发表了文章 2024-10-18 09:54:22

  对比一下Vue2和Vue3？

  本文首发于微信公众号“前端徐徐”，详细对比了 Vue 2 和 Vue 3 在原理、生命周期、性能、编码方式、API、Diff 算法、打包构建、TS 支持等八个方面的差异，帮助读者全面了解两者的不同之处。

  
• 10.18 09:48:37
  发表了文章 2024-10-18 09:48:37

  Vue中组件通信方式有哪些？

  本文介绍了 Vue 中几种常见的组件间通信方式，包括 Props / $emit、provide / inject、ref / refs、eventBus、Vuex、$parent / $children、$attrs / $listeners 以及通过 vue-router 传参。每种方式都有其适用场景和注意事项，帮助开发者根据具体需求选择合适的通信方式。

  
• 10.18 09:47:23
  发表了文章 2024-10-18 09:47:23

  ES6对函数做了哪些扩展？

  本文首发于微信公众号“前端徐徐”，介绍了 ES6 中函数参数的默认值、rest 参数、严格模式、name 属性、箭头函数、尾调用优化等新特性，并详细解释了各个特性的使用方法和注意事项。同时，还介绍了 ES2017 和 ES2019 中关于函数的一些改进，如函数参数尾逗号、`Function.prototype.toString()` 方法的修改以及 `catch` 语句参数的省略。
• 10.18 09:45:56
  发表了文章 2024-10-18 09:45:56

  浅拷贝和深拷贝的区别？

  本文首发于微信公众号“前端徐徐”，介绍了JavaScript中浅拷贝和深拷贝的概念及其实现方法。文章首先解释了数据类型的基础，包括原始值和对象的区别，然后详细介绍了浅拷贝和深拷贝的定义、底层逻辑以及常见的实现方式，如 `Object.assign`、扩展运算符、`JSON.stringify` 和手动实现等。最后，通过对比浅拷贝和深拷贝的区别，帮助读者更好地理解和应用这两种拷贝方式。

  
• 10.18 09:43:38
  发表了文章 2024-10-18 09:43:38

  前端编程的异步解决方案有哪些？

  本文首发于微信公众号“前端徐徐”，介绍了异步编程的背景和几种常见方案，包括回调、事件监听、发布订阅、Promise、Generator、async/await和响应式编程。每种方案都有详细的例子和优缺点分析，帮助开发者根据具体需求选择最合适的异步编程方式。
• 10.17 10:06:36
  发表了文章 2024-10-17 10:06:36

  Js模块化有哪些方式？

  本文首发于微信公众号“前端徐徐”，介绍了JavaScript模块化的发展历程，从无模块化到CommonJS、AMD、CMD，再到ES6模块化。文章详细解释了每种规范的特点、基本语法及注意事项，并对比了ES6模块与CommonJS模块的主要差异。

  
• 10.17 10:05:44
  发表了文章 2024-10-17 10:05:44

  比较一下apply/call/bind ？

  本文首发于微信公众号“前端徐徐”，详细介绍了 JavaScript 中 `apply`、`call` 和 `bind` 方法的概念、使用场景及手动实现。主要内容包括： - **apply**：使用数组作为参数调用函数，并指定 `this`。 - **call**：直接传递参数调用函数，并指定 `this`。 - **bind**：返回一个绑定了 `this` 和部分参数的新函数。 文章还对比了这三个方法的区别，并提供了手动实现的代码示例。
• 10.17 10:02:32
  发表了文章 2024-10-17 10:02:32

  Web应用中的存储方式有哪些？

  本文首发于微信公众号“前端徐徐”，介绍了几种常见的前端数据存储技术：Cookie、Web Storage（包括 localStorage 和 sessionStorage）、IndexedDB、Cache Storage 和 Memory Storage。每种技术的特点和使用场景不同，适用于不同的开发需求。文章详细解释了它们的使用方法、特点和应用场景，并提供了代码示例。

  
• 10.17 10:01:39
  发表了文章 2024-10-17 10:01:39

  JS垃圾回收机制有哪些?

  本文介绍了JavaScript中的垃圾回收（GC）机制，包括其概念、产生原因及重要性。文章详细讲解了几种常见的垃圾回收算法，如引用计数、标记清除、标记整理和分代回收，并分析了它们的优缺点。最后总结了垃圾回收对JS开发的重要作用，强调了其在自动内存管理和性能优化中的关键地位。

  
• 10.17 10:00:39
  发表了文章 2024-10-17 10:00:39

  判断数组为空的方法有哪些？

  本文介绍了多种判断数组是否为空的方法，包括使用 `length` 属性、隐式类型转换、`toString()`、`join()`、`every()`、`reduce()`、`filter()`、`some()` 方法以及循环。每种方法都有其适用场景，其中使用 `length` 属性和隐式类型转换最为常见和简单。文章首发于微信公众号“前端徐徐”。

  
• 10.17 09:58:52
  发表了文章 2024-10-17 09:58:52

  前端研发链路之 CI/CD

  本文首发于微信公众号“前端徐徐”，作者徐徐介绍了前端研发链路中的CI/CD。文章从CI/CD的背景、意义、运作方式及常用工具等方面进行了详细探讨，帮助读者理解如何在前端开发中有效应用CI/CD，提升开发效率和产品质量。

  
• 10.17 09:57:56
  发表了文章 2024-10-17 09:57:56

  前端研发链路之构建

  本文首发于微信公众号“前端徐徐”，作者徐徐探讨了前端研发链路中的构建过程。文章介绍了构建器、JavaScript编译器和CSS编译器的作用及常见工具，详细解析了它们如何协同工作，提高开发效率和项目可维护性。适合前端开发者阅读，帮助理解现代前端构建体系。

  
• 10.17 09:56:50
  发表了文章 2024-10-17 09:56:50

  前端研发链路之测试

  本文由前端徐徐撰写，介绍了前端测试的重要性及其主要类型，包括单元测试、E2E测试、覆盖率测试、安全扫描和自动化测试。文章详细讲解了每种测试的工具和应用场景，并提供了选择合适测试策略的建议，帮助开发者提高代码质量和用户体验。

  
• 10.17 09:55:49
  发表了文章 2024-10-17 09:55:49

  前端研发链路之开发

  本文首发于微信公众号“前端徐徐”，作者徐徐。文章介绍了前端研发链路中的开发部分，重点探讨了开发服务器（dev-server）、热更新（hot-reload）、数据模拟（mock）和代理（proxy）等关键技术，帮助开发者理解其基本原理和应用场景，提升开发效率和代码质量。

  
• 10.17 09:54:49
  发表了文章 2024-10-17 09:54:49

  前端研发链路之代码规范

  大家好，我是徐徐。本文将探讨前端研发链路中的代码规范，包括业界流行规范、CSS命名规范和相关工具。通过保持代码整洁和一致性，不仅能提高团队协作效率，还能减少错误，提升开发质量。文中详细对比了几种常见的代码规范和工具，如 Airbnb Style Guide、BEM、Eslint 和 Prettier，并展望了未来代码规范的发展趋势。希望对大家有所帮助。

  
• 10.16 10:00:29
  发表了文章 2024-10-16 10:00:29

  如何实现一个类似 vite 的脚手架并发布 npm

  本文介绍了如何实现一个类似 Vite 的脚手架工具。通过详细解析和实践，文章分享了从零开始构建脚手架的过程，包括技术选型、开发步骤及发布 NPM 包的完整流程。最终目标是让用户能够通过 `yarn create electron-prokit myapp` 快速搭建 Electron 项目。项目源码可在 GitHub 上获取。
• 10.16 09:59:28
  发表了文章 2024-10-16 09:59:28

  前端研发链路之脚手架

  本文首发于微信公众号“前端徐徐”。文章介绍了前端开发中脚手架工具的重要性及其工作原理。脚手架工具能够大幅提升开发效率，确保代码质量和项目一致性。文章详细探讨了脚手架的历史、工作原理、常见工具及其优势与潜在问题，并展望了其未来发展方向，帮助开发者更好地理解和应用脚手架工具。

  
• 10.16 09:58:26
  发表了文章 2024-10-16 09:58:26

  前端研发链路之包管理器

  本文首发于微信公众号“前端徐徐”。作者徐徐将探讨前端研发链路中的包管理器，分析 Npm、Yarn 和 Pnpm 的特点与应用场景，帮助开发者选择最适合项目的包管理工具，提升开发效率和项目稳定性。文章涵盖包管理器的基本概念、解决的问题、组成部分及各工具的优缺点对比。
• 10.16 09:55:55
  发表了文章 2024-10-16 09:55:55

  Tauri 开发实践 — 使用 CI/CD 自动构建发布 Tauri 桌面端应用

  本文介绍如何使用 CI/CD 自动构建发布 Tauri 应用。Tauri 是一个轻量级跨平台客户端框架，适合个人应用。文章首先概述了 CI/CD 的基本流程，并介绍了 GitHub Actions、GitLab CI 和 Jenkins 三种工具。最终选择了 GitHub Actions 进行配置。文中详细展示了使用 GitHub Actions 脚本实现 Tauri 应用构建的过程，并解决了权限和安全问题。项目源码可在 GitHub 上获取。

  
• 10.16 09:54:27
  发表了文章 2024-10-16 09:54:27

  Tauri 开发实践 — Tauri HTTP 请求开发

  本文介绍了如何在 Tauri 中发起 HTTP 请求。首先通过安装 Tauri 生态中的工具包并配置 `tauri.conf.json` 文件来允许特定域名的 HTTP 通信。接着封装了一个简单的 HTTP 客户端类，并在页面中使用该客户端实现 GET 和 POST 请求。最后提供了完整的源码地址以供参考。此功能使得桌面应用能够与远程服务器进行交互，增强了应用的实用性。

  
• 10.16 09:53:11
  发表了文章 2024-10-16 09:53:11

  Tauri 开发实践 — Tauri 日志记录功能开发

  本文介绍了如何为 Tauri 应用配置日志记录。Tauri 是一个利用 Web 技术构建桌面应用的框架。文章详细说明了如何在 Rust 和 JavaScript 代码中设置和集成日志记录，并控制日志输出。通过添加 `log` crate 和 Tauri 日志插件，可以轻松实现多平台日志记录，包括控制台输出、Webview 控制台和日志文件。文章还展示了如何调整日志级别以优化输出内容。配置完成后，日志记录功能将显著提升开发体验和程序稳定性。

  
• 10.16 09:51:40
  发表了文章 2024-10-16 09:51:40

  Tauri 开发实践 — Tauri 自定义多语言菜单开发

  本文介绍了如何在 Tauri 应用中实现自定义菜单并支持多语言。首先，通过 `Translator` 类加载和解析多语言 JSON 文件，实现简单的翻译功能。接着，创建包含文件、编辑和窗口子菜单的基本菜单结构，并根据当前语言进行翻译。最后，在主函数中读取语言设置，创建菜单并处理菜单事件，确保应用的国际化和用户体验。源码可在 GitHub 上查看。
• 10.16 09:50:32
  发表了文章 2024-10-16 09:50:32

  Tauri 开发实践 — Tauri 主题&多语言设置开发

  本文首发于微信公众号「前端徐徐」，介绍了在 Tauri 应用中实现窗口主题设置与多语言支持的方法。主题设置包括静态和动态两种方式，前者在应用初始化时设定，后者允许运行时更改。文章详细描述了通过 tauri-plugin-theme 插件实现动态主题变更的过程，并提供了代码示例。对于多语言支持，文章介绍了使用 i18next 进行多语言文件初始化及切换的方法。最后，提供了完整的源码链接，帮助读者更好地理解和实践。
• 10.16 09:49:25
  发表了文章 2024-10-16 09:49:25

  Tauri 开发实践 — Tauri 集成本地数据库

  本文介绍了在 Tauri 框架中集成本地数据库的几种方案，包括直接绑定 SQLite、使用第三方数据库库和使用 tauri-plugin-sql-api 插件。最终选择了 tauri-plugin-sql-api，因为它集成简单、支持多种数据库类型，并且与 Tauri 框架深度整合，提升了开发效率和安全性。文章详细介绍了如何安装和使用该插件，以及如何编写核心代码实现数据库操作。
• 10.16 09:48:02
  发表了文章 2024-10-16 09:48:02

  Tauri 开发实践 — Tauri 原生能力

  本文介绍了如何使用 Tauri 框架构建桌面应用，并详细解释了 Tauri 提供的原生能力，包括文件系统访问、系统托盘、本地消息通知等。文章通过一个具体的文件下载示例展示了如何配置 Tauri 来使用文件系统相关的原生能力，并提供了完整的代码实现。最后，文章还提供了 Github 源码链接，方便读者进一步学习和参考。

  
• 10.15 20:33:58
  发表了文章 2024-10-15 20:33:58

  Tauri 开发实践 — Tauri 配置介绍

  本文首发于微信公众号“前端徐徐”，主要讲解`package.json`、`Cargo.toml`及`tauri.conf.json`三个文件的配置。其中，`tauri.conf.json`最为复杂，涉及众多配置项。`package.json`用于配置前端依赖与脚本；`Cargo.toml`用于声明Rust应用依赖；`tauri.conf.json`则管理前端资源、API白名单等。这些配置对于Tauri应用的开发至关重要。
• 10.15 20:31:37
  发表了文章 2024-10-15 20:31:37

  Tauri 开发实践— Tauri 工程搭建

  本文首发于微信公众号“前端徐徐”，介绍了在 macOS 环境下使用 Rust 和 Tauri 构建跨平台桌面应用的过程。首先需安装 Rust 及系统依赖，参考链接：[Rust 入门](https://www.rust-lang.org/zh-CN/learn/get-started) 和 [Tauri 前置条件](https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites)。

  
• 10.15 20:28:31
  发表了文章 2024-10-15 20:28:31

  Tauri 开发实践— Tauri 怎么样

  Tauri 是一个用于构建高效、小型二进制文件的框架，适用于所有主流桌面及移动平台。开发人员可以利用任何可编译为 HTML、JavaScript 和 CSS 的前端框架构建应用，并借助 Rust、Swift 或 Kotlin 进行后端开发。Tauri 采用三层架构，包括 tauri-app、WRY（跨平台 Webview 库）和 TAO（跨平台窗口管理器）。相较于 Electron，Tauri 使用系统内置浏览器引擎执行 Web APP，具有更小的资源占用和更高性能。详情见：[Tauri 官网](https://tauri.app/)。

  
• 10.15 16:17:29
  发表了文章 2024-10-15 16:17:29

  跨平台开发的新纪元：Tauri 2.0 横空出世，移动端、桌面端一网打尽！

  Tauri 2.0 正式版于 2024 年 10 月 2 日发布，带来了多项重大更新。此次更新不仅全面支持 iOS 和 Android，实现“一次编写，到处运行”，还升级了插件系统，增强了灵活性与可扩展性。安全性大幅提升，引入新的权限系统，并优化了 IPC 层，支持原始有效载荷传输，大幅提高性能。此外，Tauri 2.0 还支持热模块替换（HMR），简化了应用分发流程，成为跨平台开发的重要里程碑。

  
• 10.15 16:15:51
  发表了文章 2024-10-15 16:15:51

  打造《黑神话：悟空》壁纸软件：使用 Tauri 快速上手

  本文首发于微信公众号“前端徐徐”。作者分享了如何仅用半天时间实现《黑神话：悟空》桌面壁纸软件的过程，并展示了实际效果。文中详细介绍了使用 Tauri 开发跨平台桌面应用的核心流程与关键技术，包括下载壁纸、更换壁纸以及前后端交互等细节。此外，还提供了源码和下载链接供读者体验。

  
• 10.15 16:05:30
  发表了文章 2024-10-15 16:05:30

  揭秘 electron-builder:macOS 应用打包背后到底发生了什么?

  本文详细介绍了 Electron 应用在 macOS 平台上的打包流程，涵盖配置文件、打包步骤、签名及 notarization 等关键环节。通过剖析 `electron-builder` 的源码，展示了如何处理多架构应用、执行签名，并解决常见问题。适合希望深入了解 macOS 打包细节的开发者。
• 10.15 16:04:03
  发表了文章 2024-10-15 16:04:03

  electron-builder 解析：你了解其背后的构建原理吗？

  本文首发于微信公众号“前端徐徐”，详细解析了 electron-builder 的工作原理。electron-builder 是一个专为整合前端项目与 Electron 应用的打包工具，负责管理依赖、生成配置文件及多平台构建。文章介绍了前端项目的构建流程、配置信息收集、依赖处理、asar 打包、附加资源准备、Electron 打包、代码签名、资源压缩、卸载程序生成、安装程序生成及最终安装包输出等环节。通过剖析 electron-builder 的原理，帮助开发者更好地理解和掌握跨端桌面应用的构建流程。
• 10.15 16:02:16
  发表了文章 2024-10-15 16:02:16

  十年跨平台开发，Electron 凭什么占据一席之地？

  本文首发于微信公众号“前端徐徐”。作者徐徐将系统整理Electron的相关知识，分享更多开发经验。Electron是一个已有10年历史的跨端开发框架，本文将从其诞生背景、优劣势、生态、案例等方面进行详细介绍，并与其他框架进行对比，帮助读者全面了解Electron。

  
• 10.15 16:00:32
  发表了文章 2024-10-15 16:00:32

  从架构到API，你真的掌握了Electron的全貌吗？

  本文首发于微信公众号“前端徐徐”。作者徐徐从架构层面、协作方式、底层支持、源码层面及API设计等方面剖析了Electron的原理。通过分析Electron的核心组件（Chromium和Node.js）、进程隔离、上下文桥接及IPC机制等内容，揭示了Electron在设计上的精妙之处及其对开发高效、稳定桌面应用的重要性。了解这些原理有助于开发者更好地设计和解决问题。

  
• 10.15 15:38:41
  发表了文章 2024-10-15 15:38:41

  谈谈我做 Electron 应用的这一两年

  本文首发于微信公众号“前端徐徐”，作者徐徐分享了过去一两年间开发Electron桌面应用的经验与心得。文章详细介绍了从项目启动、技术选型到具体实施的过程，并探讨了桌面端开发面临的挑战及解决方案，如软件更新、任务队列设计、性能优化等。此外，还列举了一些特殊需求的实现方法，如静默安装、进程禁用等。作者认为，尽管桌面端开发有其独特性，但通过不断探索与实践，仍能显著提升用户体验和技术水平。