- 博客(171)
- 资源 (4)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 利用 Page Visibility API 优化网页性能与用户体验
Page Visibility API 是一个浏览器提供的 API，它可以告诉我们页面的可见性状态。当页面变为不可见时，我们可以暂停一些不必要的操作，比如动画或媒体播放。：返回一个布尔值，指示页面当前是否隐藏。：返回页面的可见性状态，可以是'visible'（页面可见）、'hidden'（页面隐藏）或（页面正在预渲染）。事件：当页面的可见性状态（）改变时触发。
2024-09-29 10:31:19
1146
原创 使用 Wake Lock API：保持设备唤醒的最佳实践
Wake Lock API 是一个用于防止设备进入睡眠或屏幕变暗的 Web API。通过 Wake Lock API，开发者可以请求设备保持活跃状态，防止因为电源管理机制导致任务中断。目前，screen，它用于保持屏幕亮起，防止屏幕自动关闭或调暗。Wake Lock API 为 Web 开发者提供了控制设备唤醒状态的能力，尤其适合那些需要保持屏幕长时间活跃的应用，如视频播放、实时通信、导航等。通过监听事件，应用程序可以智能地管理唤醒锁的状态，在页面可见时重新获取锁定，隐藏时释放锁定。
2024-09-18 10:29:51
992
原创 Node.js 版本管理工具对比总结
工具支持平台切换版本配置文件默认版本设置性能nvm.nvmrc性能一般n否无默认版本设置命令切换速度较快nvs默认手动(可配置自动切换).nvmrc性能一般fnm.nvmrc性能优异，极快Volta自动否极快。
2024-09-18 10:26:26
1862
原创 创建 Tauri 项目
在上一篇中，我们详细介绍了如何，包括安装所需的依赖项、配置开发工具以及处理常见的问题。这为我们顺利开始 Tauri 开发提供了坚实的基础。在本章中，我们将更进一步，学习如何创建一个全新的 Tauri 项目，并探讨如何将 Tauri 集成到一个已经存在的 Web 项目中。Tauri 的灵活性使得它可以轻松地与现有的前端框架协作，无论是 Vue、React 还是其他 JavaScript 框架，帮助开发者将 Web 应用打包成轻量级的桌面应用程序。
2024-09-13 15:08:29
807
原创 声明式 Shadow DOM：简化 Web 组件开发的新工具
Shadow DOM 是 Web 组件的一个重要组成部分，它通过创建封装的 DOM 树，让组件的内部 DOM 和样式与外部页面隔离。这使得组件可以拥有独立的样式和功能，而不会与页面的其他部分发生冲突。传统上，开发人员需要通过 JavaScript 调用方法来手动创建 Shadow DOM，并附加到自定义元素上。这样的方式增加了代码的复杂性，同时在服务端渲染和静态页面生成中也难以直接使用。声明式 Shadow DOM。
2024-09-12 08:45:00
873
原创 windows 上 Tauri 开发环境配置
在本章节我们学习了在开发 Tauri 应用的之前的环境搭建，要学习其他操作系统的 tauri 环境如何搭建，请查看官方网站了解更多。
2024-09-11 08:30:00
998
原创 在 Web 中判断页面是不是刷新
判断页面是否刷新是一个常见的需求，本文介绍了五种技术方案。每种方案都有其特定的适用场景和优缺点。方案优点缺点浏览器兼容性简单、易跨页面保持状态安全性问题，需手动清理适用于所有现代浏览器简单，不依赖复杂逻辑关闭标签页时清空支持现代浏览器及部分较旧浏览器直接提供页面刷新判断API 正被弃用广泛支持，但逐渐被废弃精确判断加载类型较新，旧版浏览器不支持仅支持现代浏览器灵活，可处理多种离开页面的操作部分浏览器不支持，尤其是在移动端大多数现代浏览器支持。
2024-09-10 11:59:16
1601
原创 [翻译] Vue 3.5 发布
3.5 修复了许多与通过选项支持自定义元素的应用程序配置。添加useHost()和this.$hostAPI 用于访问自定义元素的宿主元素和影子根。通过传递支持在没有 Shadow DOM 的情况下挂载自定义元素。支持提供nonce选项，该选项将附加到自定义元素注入的标签。这些新的仅自定义元素选项可以通过第二个参数传递给})
2024-09-10 11:53:22
1239
原创 MoseEvent 中的几种坐标系
在处理鼠标事件（MouseEvent）时，了解不同的坐标系是非常重要的。常见的坐标系包括屏幕坐标（screen）、客户端坐标（client）、页面坐标（page）、图层坐标（layer），以及偏移坐标（offset）。这些坐标系各自有不同的用途，理解它们的区别有助于我们更精确地处理用户交互事件。本文将深入探讨这些坐标系的含义及其应用场景。
2024-08-15 15:51:51
874
原创 将 Rust 代码编译为 WASM
通过这套流程，你可以轻松地将 Rust 代码编译为 WebAssembly，并将其集成到 Web 项目中。Rust 的高效性和 WebAssembly 的灵活性相结合，可以为 Web 应用带来显著的性能提升。
2024-08-14 11:13:30
909
原创 Rust 之环境搭建
Rust 是一种现代的系统级编程语言，以其内存安全性、高性能和简洁的语法而著称。本文将介绍如何在不同操作系统上搭建 Rust 开发环境，并配置好基础工具，使您能够快速开始 Rust 编程。到这里，您已经成功搭建了 Rust 开发环境，并编写了第一个简单的 Rust 程序。Rust 的生态系统不断发展，有许多学习资源和社区支持可以帮助您在这门语言上取得进展。希望这篇指南对您的 Rust 之旅有所帮助！
2024-08-14 11:13:02
1477
原创 ECMA 2023(ES14) 新特性
目前，此类主机会剥离 hashbang，以便在传递给 JS 引擎之前生成有效的 JS 源文本。这会将剥离转移到发动机上，它确实统一并标准化了剥离的方式。ECMAScript 是标准化的 JavaScript 语言，于 1997 年发布了第一版，现已发展成为世界上使用最广泛的通用编程语言之一。本 Ecma 标准定义了 ECMAScript 2023 Language，是 ECMAScript 语言规范的第 14 版。上提供了额外的方法，通过返回包含更改的新副本来启用对数组的更改。类似，唯一不同的是它们是。
2024-05-22 14:32:40
596
翻译 Vue 3.4 发布
今天，我们很高兴地宣布 Vue 3.4 “🏀灌篮高手”的发布！此版本包括一些实质性的内部改进 - 最引人注目的是重写的模板解析器，速度提高了 2 倍，以及重构的反应系统，使效果触发更加准确和高效。它还包含许多生活质量 API 改进，包括绑定 prop 时的稳定性和新的同名速记。这篇文章概述了 3.4 中的突出功能。有关更改的完整列表，请参阅 GitHub 上的。
2024-01-02 09:59:08
172
原创 lottie 动画在 vue 中的使用
最近我所负责的项目中，我采用了动画效果，并开始使用 gif 来实现。然而，在实践过程中，我发现 gif 格式的动画在 git 中出现了明显的锯齿感，这让我非常困扰。为了追求更完美的表现效果，我最终选择了 lottie 来实现我的动画需求。我深知动画效果的呈现对于用户体验至关重要，因此我非常认真地对待每一个细节，希望通过我的努力，为用户带来更加流畅、自然的视觉体验。
2023-12-26 11:02:56
1395
原创 Web前端工程的装机必备软件
最近作者的电脑 C 盘变红了，这让我很难受(有点小强迫症)，所以准备重新安装下系统，顺便把 C 盘扩大点。注意：操作系统是 windows 11 23H2。所有的命令行都是使用 Windows Terminal 中进行的。
2023-12-07 15:13:54
1028
原创 Windows Terminal 简单美化
主题一般都有一些比较特殊的符号，如果安装后 powershell 提示符出现方框类的字符就需要安装字体了。这个工具主要做命令提示管理等操作；安装操作可选的（ 这个模块是自带的，如果不可用时需要卸载并重新安装）在弹出的窗口中将下面的内容复制进入即可。是 shell 主题引擎，使用。最后重启终端就可以看到效果了。
2023-11-24 09:17:49
690
原创 比 nvm 更好用的 node 版本管理工具
Volta是一种管理 JavaScript 命令行工具的便捷方式。volta速度无缝，每个项目的版本切换跨平台支持，包括 Windows 和所有 Unix shell支持多个包管理器稳定的工具安装-无需每次升级都重新安装!可扩展性挂钩用于特定于站点的定制。
2023-09-08 09:58:56
986
原创 stencilJs学习之构建 Drawer 组件
在之前的学习中，我们已经掌握了stencilJs中的一些核心概念和基础知识，如装饰器PropStateEventListenMethodComponent以及生命周期方法。这些知识是构建复杂组件和应用的基础，而抽屉组件是一个很好的示例，能够综合运用这些知识，让我们更深入地理解它们的作用和用法。
2023-08-31 16:35:40
822
翻译 2023年 Web Component 现状
我希望本次的 Web Components 标准之旅对你来说是有意义的。你看到我们已经走了多远，未来还有什么等待我们，这很有趣。随着 v1 版本的发布，过去几年中已经发布的功能翻了一番，以及即将到来令人兴奋的新功能，现在是成为 Web 开发人员的好时机。
2023-08-30 08:53:55
296
原创 [译]2023年 Web Component 现状
本文为翻译原文地址：2023 State of Web Components: Today's standards and a glimpse into the future.最近，我写了关于如何构建你的第一个 Web Component，以及基本 v1 Web Component 规范的一些历史和解释。但是自从 v1 在 2020 年获得全面支持以来，Web Component 世界发...
2023-08-30 08:51:00
120
原创 StencilJs 学习之 JSX
Stencil 组件使用JSX渲染，这是一种流行的声明式模板语法。每个组件都有一个渲染函数，它返回在运行时渲染到 DOM 的组件树。
2023-06-21 08:26:57
465
原创 StencilJs学习之事件
其实并没有所谓的 stencil Event，相反 stencil 鼓励使用 `DOM event`。然而，Stencil 提供了一个 API 来指定组件可以触发的事件，以及组件监听的事件。 这是通过 Event()和 Listen()装饰器实现的。
2023-06-20 11:28:52
327
原创 JavaScript的数学计算库：decimal.js
如果使用超过 javascript 允许的数字的值，建议传递字符串而不是数字，以避免潜在的精度损失。与 JavaScript 数字一样，字符串可以包含下划线作为分隔符以提高可读性。如果包含适当的前缀，则也接受二进制、十六进制或八进制表示法的字符串值。，该函数需要单个参数，即数字、字符串或十进制实例。该库是单个 JavaScript 文件。有关更多信息，请参阅。该库导出单个构造函数。
2023-06-19 15:36:06
2764
原创 ⌈力扣⌋删除字符串中的所有相邻重复项
给出由小写字母组成的字符串 S，重复项删除操作会选择两个相邻且相同的字母，并删除它们。在完成所有重复项删除操作后返回最终的字符串。在 S 上反复执行重复项删除操作，直到无法继续删除。来源：力扣（LeetCode）
2023-05-30 17:39:58
89
原创 javascript中的错误类型
URIError 表示 URI错误。当 URI 的编码和解码出现问题时，会抛出 URIError。如果使用了错误的参数（无效字符），就会抛出 URIError。当找不到变量的引用、在变量作用域范围之外使用变量、使用未声明的变量时、在暂时性死区期间使用变量时都会抛出此错误。将变量设置在其限定的范围之外、将值传递给超出范围的方法、调用一个不会终止的递归函数时就会抛出此错误。当您使用不打算以特定方式使用的东西时，就会发生类型错误。元素时加载了一个不同域名下的页面，这在访问子页面时会违背。尝试访问无权访问的对象。
2023-05-23 15:20:49
858
翻译 Vue 3.3 发布
本文为翻译今天我们很高兴地宣布 Vue 3.3 “Rurouni Kenshin” 的发布！此版本侧重于开发人员体验改进 - 特别是 TypeScript 的 SFC使用。结合（以前称为 Volar）的 1.6 版本，我们解决了将 Vue 与 TypeScript 一起使用时的许多长期存在的痛点。这篇文章概述了 3.3 中突出显示的功能。有关更改的完整列表，请参阅。依赖关系更新。
2023-05-12 11:34:18
176
原创 【力扣-TS解题】1、回文数
给你一个整数x，如果x是一个回文整数，返回true；否则，返回false。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。例如，121是回文，而123不是。
2023-04-23 09:05:50
105
原创 Navigator.sendBeacon()
方法可用于通过HTTP POST将少量数据异步传输到 Web 服务器。这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而，对于开发者来说保证在文档卸载期间发送。它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如：XMLHttpRequest）发送分析数据的一些问题。
2023-04-19 14:04:36
905
原创 git cherry-pick合并其它分支的某次提交(commits)到当前分支
可以选择某一个分支中的一个或几个commit(s)来进行操作。例如，假设我们有个稳定版本的分支，叫v2.0.0，另外还有个开发版本的分支v3.0.0，我们不能直接把两个分支合并，这样会导致稳定版本混乱，但是又想增加一个v3.0.0中的功能到v2.0.0中，这里就可以使用了,其实也就是对已经存在的commit 进行再次提交。
2023-02-24 11:21:59
923
原创 VSCode 圈复杂度插件 CodeMetrics
圈复杂度(Cyclomatic Complexity)是一种代码复杂度的衡量标准。它可以用来衡量一个模块判定结构的复杂程度，数量上表现为独立现行路径条数，也可理解为覆盖所有的可能情况最少使用的测试用例数。圈复杂度大说明程序代码的判断逻辑复杂，可能质量低且难于测试和维护。程序的可能错误和高的圈复杂度有着很大关系。圈复杂度主要与分支语句（if、else、，switch 等）的个数成正相关。
2023-02-24 11:19:14
3028
原创 vue3 如何在 jsx中使用 component 组件
component组件不像其它的内置组件(tansition),可以直接从vue中直接导出，所有要在jsx使用component就要使用h函数。
2023-01-11 13:13:49
1171
原创 vite.config.js 无法使用__dirname的解决方法
_dirname是commonjs规范的内置变量。如果使用了esm是不会自动注入这个变量的。在commonjs中，注入了__dirname__filenamemoduleexportsrequire五个内置变量用于实现导入导出的能力。而在esm中实现方式是不一样的。在esm中，显然模块的导入导出使用，自然不会再用，同理__dirname__filename也有对应的写法。
2023-01-09 14:37:43
3200
1
原创 Stemciljs学习2、组件生命周期
组件有许多生命周期方法，可用于了解组件何时“将”和“执行”加载、更新和呈现。可以将这些方法添加到组件中，以便在正确的时间挂接到操作中。在组件类中实现以下方法之一，Stencil 将以正确的顺序自动调用它们：未更改Prop text时console输入的结果更改Prop text后console输出的结果具体的生命图示如下（源自官方网站）更多生命周期相关的细节请参考官方网站 - - - - - - 结束语在上一篇中)我们讲解了如何使用搭建组件库的方式；那么经过本篇的讲解，我们
2022-12-03 14:54:42
185
原创 Stemciljs学习之组件生命周期
组件有许多生命周期方法，可用于了解组件何时“将”和“执行”加载、更新和呈现。可以将这些方法添加到组件中，以便在正确的时间挂接到操作中。在组件类中实现以下方法之一，Stencil 将以正确的顺序自动调用它们：单组件的生命周期import { Component, Host, h, Prop, Watch } from '@stencil/core';@Component({ tag:...
2022-12-03 14:52:00
42
原创 Stenciljs 学习之搭建项目
stenciljs是用于构建可重用、可扩展的设计系统的工具链。生成在每个浏览器中运行的小型、超快且 100% 基于标准的 Web Component。更对介绍请参考官方网站。
2022-12-02 16:28:01
395
原创 树莓派 ubuntu server 22.x 连接无线网络
前言树莓派系统安装完成后，需要配置网络，由于家里没有多余的网线(网线多少有点乱)，所以决定配置无线上网的方式，现在记录下来操作过程具体操作sudo nano /etc/netplan/xxxxxxx.yaml # 不同的机器文件名不一样nano 是之后版本内置的命令，新手友好# 原来内容network: version: 2 ethernets: et...
2022-11-10 11:09:00
128
原创 ubuntu server 22.x 连接无线网络
树莓派系统安装完成后，需要配置网络，由于家里没有多余的网线(网线多少有点乱)，所以决定配置无线上网的方式，现在记录下来操作过程。
2022-11-10 11:05:53
1998
TA创建的收藏夹 TA关注的收藏夹
TA关注的人