/archive
归档
所有文章按时间归档，读者可以先按年份浏览，再回到分类和标签继续筛选。
2026
1 篇2024
33 篇前端研发链路之代码规范前端研发链路之代码规范 大家好，我是徐徐。今天我们来聊聊前端研发链路中的代码规范。 前言 在前端开发过程中，保持代码的整洁和一致性是至关重要的。这不仅有助于团队协作，提高代码的可读性和...前端研发链路之开发前端研发链路之开发 大家好，我是徐徐。今天跟大家聊聊前端研发链路中比较重要的一环：开发。 前言 在现代前端开发中，工程化手段和工具的应用尤为重要。这些工具和技术不仅提高了开发效率，还保...从架构到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 M...谈谈我做 Electron 桌面端应用的这一两年谈谈我做 Electron 桌面端应用的这一两年 大家好，我是徐徐。今天和大家谈谈我做 Electron 桌面端应用的这一两年，把一些经验和想法分享给大家。 前言 入职现在这家公司三年...CI/CD 自动构建发布 Tauri 桌面端应用CI/CD 自动构建发布 Tauri 桌面端应用 大家好我是徐徐。今天主题是如何使用 CI/CD 自动构建发布 Tauri 应用。 前言 Tauri 是一个跨平台的客户端框架，体积小而...Tauri 日志记录功能开发Tauri 日志记录功能开发 前言 日志记录是任何应用程序的关键部分，它能够提供宝贵的行为洞察并帮助调试。在本文中，我们将探讨如何为您的 Tauri 应用程序配置日志记录。Tauri...Tauri 主题&多语言设置开发Tauri 主题&多语言设置开发 前言 在现代应用开发中,用户界面的主题和多语言支持是提升用户体验的关键因素。本文将介绍如何在Tauri应用中实现窗口主题设置和多语言设置的开发,并提供...Tauri 自定义多语言开发Tauri 自定义多语言开发 前言 在现代桌面应用程序开发中，自定义菜单不仅是用户界面的重要组成部分，还直接影响用户体验和应用功能的可访问性。Tauri，作为一个轻量级的跨平台桌面应用...Tauri HTTP 请求开发Tauri HTTP 请求开发 大家好，我是徐徐。今天的主题是如何在 Tauri 中发起 HTTP 请求。 前言 前面铺垫了很多，但是我们一直都是在整个应用的架构层面做一些设计和开发，...Tauri 集成本地数据库Tauri 集成本地数据库 前言 Tauri 是一个构建跨平台桌面应用程序的框架，利用 Web 技术构建前端，并使用 Rust 构建后端。它以其小巧的体积和高性能受到开发者的欢迎。在开...Tauri 工程搭建Tauri 工程搭建 ⚠️注意：此工程搭建，演示环境为macOS。 终端环境要求 在开始开发tarui的项目之前，你需要安装Rust和系统依赖项。 具体可参考： https://www...Tauri 配置介绍Tauri 配置介绍 这里主要是讲解一下 package.json 、Cargo.toml、tauri.conf.json这三个文件的配置。其中tauri.conf.json最为复杂，...Tauri 原生能力Tauri 原生能力 原生能力简介 Tauri 是一个用于构建安全的小型桌面应用程序的框架,它结合了 Web 前端和系统后端技术。Tauri 提供了一些原生能力,让您的 Web 应用程...Tauri 怎么样Tauri 怎么样 Tarui是什么 Tauri 是一个用于构建针对所有主要桌面和移动平台的小型、高速二进制文件的框架。开发人员可以集成任何能编译为 HTML、JavaScript 和...React组件通信方式React组件通信方式 Props Props 是 React 组件之间传递数据的一种机制，允许父组件向子组件传递数据和方法。 在这个示例中，Parent 组件通过将 message...JSBridge原理简析JSBridge原理简析 产生背景 在移动设备上，原生应用（Native App）与网页应用（Web App）各有优劣。原生应用访问设备功能强大，运行流畅，但开发成本高，更新维护复杂；...纯前端实现图片切割,一键导出多张分割图片纯前端实现图片切割,一键导出多张分割图片 前言 在Web开发中,经常会遇到需要将一张大图切割成多张小图的场景,比如: 对大图进行加载优化,将大图拆分成多张按需加载 实现像素级完美拼pi...获取当前网卡名称获取当前网卡名称 进入root模式列出计算机上当前可用的无线网络接口信息列出计算机上当前可用的无线网络接口信息Electron 实现一个桌面悬浮窗Electron 实现一个桌面悬浮窗 功能描述 打开客户端软件后，可以在桌面上显示一个悬浮球，悬浮球可以随意拖拽，点击悬浮球可以唤起客户端软件。 核心实现步骤思路 1.开发环境下 Vi...Electron 中使用 SQLiteElectron 中使用 SQLite 准备工作 1. 安装 sqlitestudio：https://sqlitestudio.pl/ 2. 安装 sqlite3：npm insta...Canvas + Taro 实现图片分享功能Canvas + Taro 实现图片分享功能Js 实现一个简单的任务管理器Js 实现一个简单的任务队列 功能需求点 注册任务 执行任务 检测任务是否注册 检测任务执行状态 获取任务实例 有队列机制 设计数据结构Mac Root 模式 Tarui + Eletron 实现 WebViewMac Root 模式 Tarui + Eletron 实现 WebView 背景 macOS 系统如果在 root 模式下运行某个应用，是无法在 GUI 层面输入中文的，这就导致了很...Node.js 实现 Mac & Windows 应用安装Node.js 实现 Mac & Windows 应用安装 此片文章将介绍如何使用 Node.js 实现 Mac & Windows 应用的安装。主要包括安装exe, dmg, pkg...react-i18next 实现国际化react i18next 实现国际化 文档 https://react.i18next.com/ 实现 安装依赖 创建文件夹 创建locales文件夹。 zh cn.json用来存储...
2023
24 篇环境&工程搭建环境&工程搭建 为什么用 Vite 已经说得非常清楚了，这里不做过多赘述，在开始用 Vite 构建 Electorn 的项目之前，我也用过 Webpack 来构建，但是从开发体验来说，...网络请求封装网络请求封装 前言 在之前的开发实践章节，我们基本把一个成型的Electron应用搭建起来了，形成了一个骨架，但是它还不能称为一个可以快速实现业务逻辑的框架，这一节，我们将给这个框架赋...应用打包应用打包 前言 在 Electron 的开发中，打包升级是非常重要的一个环节，因为在传统的前端开发中是没有升级的概念的，刷新浏览器就是更新，但是客户端程序不一样，它需要持续的迭代和优化...应用升级应用升级 前言 在Electron开发的过程中，升级流程也是一个很重要的环节，本文主要介绍升级开发的一些基本操作以及一些注意事项。 electron builder.config 配置...原生模块调用&开发原生模块调用&开发 前言 其实在实际的开发过程中，我们会实现一些 Node.js 或者 Electron 本身无法完成的功能，在这种情况下，我们需要封装一些底层的库，比如 dll、dy...Electron跨进程通信Electron跨进程通信 前言 进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 在日常的开发中，Electron的跨进程通信是经常会用到...Electron生态开发技术选型Electron生态开发技术选型 脚手架选型 关于脚手架的选择，其实也很多。 官方提供的有Electron Forge，Electron Fiddle，electron quick s...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 在...HTTP和HTTPS的区别HTTP和HTTPS的区别 概念 HTTP(HyperText Transfer Protocol)：是超文本传输协议的缩写,是互联网上应用最为广泛的一种网络协议。它详细规定了浏览器和...JS 模块化JS 模块化 JavaScript 模块化发展历史 无模块化 CommonJS 规范 AMD 规范 CMD 规范 ES6 模块化 CommonJS 概述 CommonJS 规范是为了解...JS垃圾回收机制JS垃圾回收机制 概念 GC 在 JavaScript 中，GC 代表"垃圾回收"（Garbage Collection）。垃圾回收是一种自动内存管理机制，负责监测不再使用的对象，并释...Vue 和 ReactVue 和 React 起源 Vue 的起源 Vue.js（简称 Vue）是由尤雨溪（Evan You）创建的。他在 Google 实习期间接触到了 AngularJS，受到了 Ang...Vue2 和 Vue3对比Vue2 和 Vue3对比 原理 主要是数据响应式上的区别，这也是最核心的区别 Vue.js 2的响应式： 1. Object.defineProperty： Vue.js 2使用Ob...Web 应用中的存储方式Web 应用中的存储方式 Cookie Cookie 是存储在用户浏览器中的小型文本文件，用于在客户端和服务器之间传递数据。它是 Web 开发中常用的一种机制，用于在用户访问网站时跟踪...React样式解决方案React样式解决方案 内联样式 React 允许您使用内联样式，即直接在组件元素上使用样式对象。 优点: 1. 避免命名冲突： 由于样式作用域被限制在一个组件内,所以不用担心样式会影...输入URL回车后的全过程输入URL回车后的全过程 检查缓存 当浏览当浏览器输入一个 URL 时，它会先检查本地缓存，看请求的资源是否已经存在并且还在有效期内。这是为了加速页面加载速度。 具体过程是： 1. 浏...TCP和UDP的区别TCP和UDP的区别 核心概念 TCP TCP(Transport Control Protocol)即传输控制协议：是一种面向连接的、可靠的、基于字节流的传输层通信协议，由 IETF...Vue组件通信方式Vue组件通信方式 Props / $emit Props用于父子组件通信:当一个组件需要向它的子组件传递数据时；$emit用于子父组件通信:当子组件需要向父组件发送消息或触发事件时。...为什么选择Electron为什么选择Electron Electron的诞生 Electron（原名为Atom Shell）是GitHub开发的一个开源框架。它通过使用Node.js（作为后端）和Chromiu...