/archive/
归档
近期整理的技术文章、项目复盘和知识路线。
2026
3 篇2026 半年年度总结2026 半年年度总结 前言 2026 年过去一半，在这里简单记录一下这半年的变化、收获和一些随想。 回顾 第一个季度： 把之前开发的 APP，上架 IOS 和 Google 应用商店：这个工作其实没什么难度，主要就...博客改版记录的随想博客改版记录 前言 突然想给博客改一个风格，于是出来了新的博客风格，记录一下。这个博客上记录的东西不是很多，因为之前很多时间都写到了微信公众号上去了，后面我想还是持续记录一下到博客上。 随想 感觉之前的博客还是缺少一...徐徐的 2025 年终总结徐徐的 2025 年终总结 前言 不知不觉已经 2026 年了，想来想去还是写一下 2025 的年终总结，因为 24 年写年终总结的时候自己立下了 Flag，希望后面每一年都做个总结，不为别的，只为记录一年的经历，以...
2025
2 篇2024
35 篇徐徐的 2024 年终总结徐徐的 2024 年终总结 大家好，我是徐徐。今天说说 2024 年这一年，进行一个年终总结。 前言 还有 10 天就 2025 年了，最近刚完成了 2024 年的 OKR Review，然后对自己一年的工作做了一些...30 岁了，谈谈我做前端开发的这 6 年30 岁了，谈谈我做前端开发的这 6 年 大家好，我是徐徐，一个爱摄影的前端工程师，今天跟大家分享一下自己这些年的技术和职场历程。 前言 最近收到各个手机 APP 的生日消息以及短信生日消息，才发现自己要马上满 30...前端研发链路之代码规范前端研发链路之代码规范 大家好，我是徐徐。今天我们来聊聊前端研发链路中的代码规范。 前言 在前端开发过程中，保持代码的整洁和一致性是至关重要的。这不仅有助于团队协作，提高代码的可读性和可维护性，还能减少错误，提升开发...前端研发链路之开发前端研发链路之开发 大家好，我是徐徐。今天跟大家聊聊前端研发链路中比较重要的一环：开发。 前言 在现代前端开发中，工程化手段和工具的应用尤为重要。这些工具和技术不仅提高了开发效率，还保证了代码质量。在本文中，我们将探...从架构到API，你真的掌握了Electron的全貌吗？从架构到API，你真的掌握了Electron的全貌吗？ 大家好，我是徐徐。今天我们来浅析一下 Electron 的原理。 前言 Electron 的原理是每个开发 Electron 应用的开发者都需要了解的知识内容，...十年跨平台开发，Electron 凭什么占据一席之地？十年跨平台开发，Electron 凭什么占据一席之地？ 大家好，我是徐徐。今天我们来认识认识 Electron。 前言 其实一直想系统的写一写 Electron 相关的文章，之前在掘金上写过，但是现在来看那些文章都写...浏览器渲染的基石：DOM Tree 与 CSSOM浏览器渲染的基石：DOM Tree 与 CSSOM 大家好，我是徐徐。今天我们聊聊浏览器渲染的基石：DOM Tree 与 CSSOM 。 前言 在现代 Web 开发中，理解浏览器如何解析和渲染网页至关重要。这个过程的...前端研发链路之脚手架前端研发链路之脚手架 大家好，我是徐徐。 今天我们来聊聊前端研发链路中的脚手架。 前言 在前端开发中，研发链路的流畅与高效直接关系到项目的成败。一个好的研发链路不仅能提升开发效率，还能确保代码质量和项目的一致性。而在...前端研发链路之包管理器前端研发链路之包管理器 大家好，我是徐徐。今天和大家一起聊聊前端研发链路之包管理器。 前言 在现代前端开发中，包管理工具是不可或缺的一部分。随着前端研发链路的不断演进，项目变得愈发复杂，对高效管理依赖项的需求也日益增...教你一步步用 Julep + ChatUI 构建 AI 应用教你一步步用 Julep + ChatUI 构建 AI 应用 前言 从头开始创建一个 AI 应用程序可能是一项非常具有挑战性的任务。无论您是想构建一个简单的聊天机器人还是一个先进的智能虚拟助手，成功开发出理想的应用程...Google 浏览器中的 AI 魔法 — window.ai （本地运行 AI 程序）Google 浏览器中的 AI 魔法 — window.ai （本地运行 AI 程序） 前言 在浏览器中运行的设备端 AI 已经到来，它目前在 Chrome 的 Canary 版本中，这意味着不久之后它就会到来。在这...打造《黑神话：悟空》壁纸软件：使用 Tauri 快速上手打造《黑神话：悟空》壁纸软件：使用 Tauri 快速上手 大家好，我是徐徐！在这里跟大家分享一下我如何用半天时间实现一款《黑神话：悟空》桌面壁纸软件的。先看效果图。 Windows Mac 前言 最近 《黑神话：悟空...谈谈我做 Electron 桌面端应用的这一两年谈谈我做 Electron 桌面端应用的这一两年 大家好，我是徐徐。今天和大家谈谈我做 Electron 桌面端应用的这一两年，把一些经验和想法分享给大家。 前言 入职现在这家公司三年了，刚进公司的时候是 21 年年...CI/CD 自动构建发布 Tauri 桌面端应用CI/CD 自动构建发布 Tauri 桌面端应用 大家好我是徐徐。今天主题是如何使用 CI/CD 自动构建发布 Tauri 应用。 前言 Tauri 是一个跨平台的客户端框架，体积小而且很精悍，如果做个人应用，再合适...Tauri 日志记录功能开发Tauri 日志记录功能开发 前言 日志记录是任何应用程序的关键部分，它能够提供宝贵的行为洞察并帮助调试。在本文中，我们将探讨如何为您的 Tauri 应用程序配置日志记录。Tauri 是一个强大的框架，允许您使用 W...Tauri 主题&多语言设置开发Tauri 主题&多语言设置开发 前言 在现代应用开发中,用户界面的主题和多语言支持是提升用户体验的关键因素。本文将介绍如何在Tauri应用中实现窗口主题设置和多语言设置的开发,并提供更多实用的技巧和最佳实践。 我们...Tauri 自定义多语言开发Tauri 自定义多语言开发 前言 在现代桌面应用程序开发中，自定义菜单不仅是用户界面的重要组成部分，还直接影响用户体验和应用功能的可访问性。Tauri，作为一个轻量级的跨平台桌面应用开发框架，提供了强大而灵活的菜单...Tauri HTTP 请求开发Tauri HTTP 请求开发 大家好，我是徐徐。今天的主题是如何在 Tauri 中发起 HTTP 请求。 前言 前面铺垫了很多，但是我们一直都是在整个应用的架构层面做一些设计和开发，我们现在更近一步，集成 HTTP...Tauri 集成本地数据库Tauri 集成本地数据库 前言 Tauri 是一个构建跨平台桌面应用程序的框架，利用 Web 技术构建前端，并使用 Rust 构建后端。它以其小巧的体积和高性能受到开发者的欢迎。在开发过程中，我们常常需要数据本地持...Tauri 工程搭建Tauri 工程搭建 ⚠️注意：此工程搭建，演示环境为macOS。 终端环境要求 在开始开发tarui的项目之前，你需要安装Rust和系统依赖项。 具体可参考： https://www.rust lang.org/z...Tauri 配置介绍Tauri 配置介绍 这里主要是讲解一下 package.json 、Cargo.toml、tauri.conf.json这三个文件的配置。其中tauri.conf.json最为复杂，配置项非常多。 package....Tauri 原生能力Tauri 原生能力 原生能力简介 Tauri 是一个用于构建安全的小型桌面应用程序的框架,它结合了 Web 前端和系统后端技术。Tauri 提供了一些原生能力,让您的 Web 应用程序能够访问本地系统资源和 API...Tauri 怎么样Tauri 怎么样 Tarui是什么 Tauri 是一个用于构建针对所有主要桌面和移动平台的小型、高速二进制文件的框架。开发人员可以集成任何能编译为 HTML、JavaScript 和 CSS 的前端框架来构建用户体...React组件通信方式React组件通信方式 Props Props 是 React 组件之间传递数据的一种机制，允许父组件向子组件传递数据和方法。 在这个示例中，Parent 组件通过将 message 数据通过 props 传递给 C...JSBridge原理简析JSBridge原理简析 产生背景 在移动设备上，原生应用（Native App）与网页应用（Web App）各有优劣。原生应用访问设备功能强大，运行流畅，但开发成本高，更新维护复杂；网页应用跨平台性好，更新快，但访...纯前端实现图片切割,一键导出多张分割图片纯前端实现图片切割,一键导出多张分割图片 前言 在Web开发中,经常会遇到需要将一张大图切割成多张小图的场景,比如: 对大图进行加载优化,将大图拆分成多张按需加载 实现像素级完美拼picture效果时,需要将大图切割...获取当前网卡名称获取当前网卡名称 进入root模式列出计算机上当前可用的无线网络接口信息列出计算机上当前可用的无线网络接口信息Electron 实现一个桌面悬浮窗Electron 实现一个桌面悬浮窗 功能描述 打开客户端软件后，可以在桌面上显示一个悬浮球，悬浮球可以随意拖拽，点击悬浮球可以唤起客户端软件。 核心实现步骤思路 1.开发环境下 Vite 启动一个渲染进程页面。 2...Electron 中使用 SQLiteElectron 中使用 SQLite 准备工作 1. 安装 sqlitestudio：https://sqlitestudio.pl/ 2. 安装 sqlite3：npm install sqlite3 数据库方法...Canvas + Taro 实现图片分享功能Canvas + Taro 实现图片分享功能Js 实现一个简单的任务管理器Js 实现一个简单的任务队列 功能需求点 注册任务 执行任务 检测任务是否注册 检测任务执行状态 获取任务实例 有队列机制 设计数据结构Mac Root 模式 Tarui + Eletron 实现 WebViewMac Root 模式 Tarui + Eletron 实现 WebView 背景 macOS 系统如果在 root 模式下运行某个应用，是无法在 GUI 层面输入中文的，这就导致了很多 GUI 应用无法正常使用。因...Node.js 实现 Mac & Windows 应用安装Node.js 实现 Mac & Windows 应用安装 此片文章将介绍如何使用 Node.js 实现 Mac & Windows 应用的安装。主要包括安装exe, dmg, pkg, zip等格式的安装包。 ex...react-i18next 实现国际化react i18next 实现国际化 文档 https://react.i18next.com/ 实现 安装依赖 创建文件夹 创建locales文件夹。 zh cn.json用来存储中文翻译 en us.json用...
2023
24 篇环境&工程搭建环境&工程搭建 为什么用 Vite 已经说得非常清楚了，这里不做过多赘述，在开始用 Vite 构建 Electorn 的项目之前，我也用过 Webpack 来构建，但是从开发体验来说，Vite 给人的感觉就是爽，没啥...网络请求封装网络请求封装 前言 在之前的开发实践章节，我们基本把一个成型的Electron应用搭建起来了，形成了一个骨架，但是它还不能称为一个可以快速实现业务逻辑的框架，这一节，我们将给这个框架赋予一个核心的灵魂，那就是网络请求...应用打包应用打包 前言 在 Electron 的开发中，打包升级是非常重要的一个环节，因为在传统的前端开发中是没有升级的概念的，刷新浏览器就是更新，但是客户端程序不一样，它需要持续的迭代和优化，然后将新的功能推送给用户，在这...应用升级应用升级 前言 在Electron开发的过程中，升级流程也是一个很重要的环节，本文主要介绍升级开发的一些基本操作以及一些注意事项。 electron builder.config 配置 添加 url为你的升级文件存放...原生模块调用&开发原生模块调用&开发 前言 其实在实际的开发过程中，我们会实现一些 Node.js 或者 Electron 本身无法完成的功能，在这种情况下，我们需要封装一些底层的库，比如 dll、dylib、node 二进制文件，然...Electron跨进程通信Electron跨进程通信 前言 进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 在日常的开发中，Electron的跨进程通信是经常会用到的，一般包括几种情况， 渲染进程...Electron生态开发技术选型Electron生态开发技术选型 脚手架选型 关于脚手架的选择，其实也很多。 官方提供的有Electron Forge，Electron Fiddle，electron quick start，其实如果你的应用不复杂...Vue keep-alive 使用及缓存机制详解Vue keep alive 使用及缓存机制详解 前言 在VUE项目中，有些组件或者页面没必要多次渲染，所以需要将部分组件有条件的在内存中进行"持久化",不过这里的持久化不是简单的数据持久化，而是整个组件（包括数据和...跨域解决方案跨域解决方案 跨域的概念 跨域（Cross Origin）是指在Web开发中，一个域（网站的源）的JavaScript代码试图访问另一个域的资源，而这个资源可能位于不同的域名、端口或协议下。域是由协议、主机名和端口号...前端异步编程解决方案前端异步编程解决方案 为什么会有异步编程 首先 Javascript 语言的执行环境是"单线程"。就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。在这种情况下，如果中途出...浅拷贝和深拷贝浅拷贝和深拷贝 要讲明白浅拷贝和深拷贝，首先要明白 Javascript 的数据类型。 数据类型基础 除了 Object 以外，所有类型都定义了表示在语言最低层面的不可变值。我们将这些值称为原始值。在计算机科学中，对...真实 DOM 和虚拟 DOM真实 DOM 和虚拟 DOM 概念 真实DOM 文档对象模型（Document Object Model），它是一种用于表示和操作HTML、XML和SVG文档的编程接口。真实的DOM是一个树形结构，它将文档中的每个元...apply、call、bind 比较apply、call、bind 比较 apply 概念 apply() 方法调用一个具有给定this值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数。 thisArg 在 func 函数运行时使用的 th...HTTP和HTTPS的区别HTTP和HTTPS的区别 概念 HTTP(HyperText Transfer Protocol)：是超文本传输协议的缩写,是互联网上应用最为广泛的一种网络协议。它详细规定了浏览器和万维网服务器之间互相通信的规则。...JS 模块化JS 模块化 JavaScript 模块化发展历史 无模块化 CommonJS 规范 AMD 规范 CMD 规范 ES6 模块化 CommonJS 概述 CommonJS 规范是为了解决 JavaScript 的作用...JS垃圾回收机制JS垃圾回收机制 概念 GC 在 JavaScript 中，GC 代表"垃圾回收"（Garbage Collection）。垃圾回收是一种自动内存管理机制，负责监测不再使用的对象，并释放它们占用的内存空间，以避免内存...Vue 和 ReactVue 和 React 起源 Vue 的起源 Vue.js（简称 Vue）是由尤雨溪（Evan You）创建的。他在 Google 实习期间接触到了 AngularJS，受到了 AngularJS 的启发，但觉得它有...Vue2 和 Vue3对比Vue2 和 Vue3对比 原理 主要是数据响应式上的区别，这也是最核心的区别 Vue.js 2的响应式： 1. Object.defineProperty： Vue.js 2使用Object.definePrope...Web 应用中的存储方式Web 应用中的存储方式 Cookie Cookie 是存储在用户浏览器中的小型文本文件，用于在客户端和服务器之间传递数据。它是 Web 开发中常用的一种机制，用于在用户访问网站时跟踪和存储有关用户会话、偏好设置、状...React样式解决方案React样式解决方案 内联样式 React 允许您使用内联样式，即直接在组件元素上使用样式对象。 优点: 1. 避免命名冲突： 由于样式作用域被限制在一个组件内,所以不用担心样式会影响到其他组件。 2. 更高效的运...输入URL回车后的全过程输入URL回车后的全过程 检查缓存 当浏览当浏览器输入一个 URL 时，它会先检查本地缓存，看请求的资源是否已经存在并且还在有效期内。这是为了加速页面加载速度。 具体过程是： 1. 浏览器通过哈希 URL 计算出一个...TCP和UDP的区别TCP和UDP的区别 核心概念 TCP TCP(Transport Control Protocol)即传输控制协议：是一种面向连接的、可靠的、基于字节流的传输层通信协议，由 IETF 的 RFC 793 定义。在简...Vue组件通信方式Vue组件通信方式 Props / $emit Props用于父子组件通信:当一个组件需要向它的子组件传递数据时；$emit用于子父组件通信:当子组件需要向父组件发送消息或触发事件时。 父组件： 子组件： Props...为什么选择Electron为什么选择Electron Electron的诞生 Electron（原名为Atom Shell）是GitHub开发的一个开源框架。它通过使用Node.js（作为后端）和Chromium的渲染引擎（作为前端）完成跨平...