- 博客(331)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 Git命令详解
Git常用命令汇总以及其它相关操作一、常用的git命令 --文件目录操作命令 mkdir * 创建一个空目录 *指目录名 pwd 显示当前目录的路径。 cat * 查看*文件内容 git rm * 删除**文件 --git初始化操作 git init 把当前的目录变成git仓库，生成隐藏.git文件。 git remote add origin url 把本地仓库的内容推送到GitH
2020-11-04 18:46:38
2453
转载 元素是否进入了“视口“之IntersectionObserver API 使用
作者：网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。上图的绿色方块不断滚动，顶部会提示它的可见性。传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成。目前有一个新的，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。
2025-07-23 09:51:22
20
原创 前端开发必备的JavaScript库（最新）
一个简单易用的库，它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟。一个高效的 Javascript 动画引擎，与jQuery的 $.animate() 有相同的API, 同时还支持彩色动画、转换、循环、画架、SVG支持和滚动等效果。一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样, 体积只有2kb。零依赖，为 web 和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容。
2025-07-14 15:08:07
882
原创 一行代码生成绝对唯一 ID？你还在用 Date.now() 吗
Date.now()我们总会遇到需要生成“唯一ID”的场景，“唯一ID”这个需求看似简单，但要实现一个绝对不会重复的 ID，却比想象中要复杂。
2025-07-14 11:42:55
406
原创 如何禁止用户复制页面内容？
某些特定的业务场景下，我们可能会有禁止用户复制页面内容的需求。虽然从技术上完全阻止一个“有心人”拷贝内容几乎是不可能的（毕竟还有截图、拍照等物理手段），但作为前端开发者，我们有多种方法可以极大地增加复制的难度，从而在一定程度上达到我们的目的。
2025-07-07 11:48:48
856
原创 前端a链接实现Excel文件的导出
1.通过xlsx插件导出安装npm install xlsx --save-dev使用import XLSX from 'xlsx'myDownLoad() { import("@/utils/Export2Excel").then(excel => { excel.export_json_to_excel({ header: ["姓名", "工资"],//导出数据的表头 data: [1, 2],//导出的具体数据
2025-07-01 16:03:43
190
原创 JS在 forEach 循环里写的异步await，其实根本没在等
需求：批量更新一组用户的状态。后端提供了一个接口，它是一个返回 Promise 的异步函数。${${运行这段代码，控制台输出了什么？这句话几乎是立即打印出来的，它根本没有“等待”任何函数的完成。
2025-07-01 16:03:26
967
原创 Vue有不同风格的写法，你知道么？
我们需要新建一个 jsx/tsx 文件，然后只要保证导出的仍然是一个组件就可以了。有了前面的铺垫，我们不难发现，这不就是去掉 script 标签的选项式写法吗？确实！这是因为我故意在前面安排了选项式写法的例子，所以过渡到这里完全没有压力！setup() {const name = ref('天气好')setup() {const name = ref('天气好')});同样地，前面对于 defineComponent 不同方式的使用这里也都可以的。
2025-05-28 10:42:49
200
原创 纯前端实现图文识别 OCR
Tesseract.js 是一个基于 Google Tesseract OCR 引擎的 JavaScript 库，利用 WebAssembly 技术将的 OCR 引擎带到了浏览器中。它完全运行在客户端，无需依赖服务器，适合处理中小型图片的文字识别。
2025-05-19 11:59:59
628
原创 前端隔离：Proxy、Web Workers 与 iframe 的对比
Proxy 代理：灵活轻量，适合需精细控制权限的场景。Web Workers：安全高效，适合计算密集型或高安全需求的任务。iframe：终极隔离，但成本和复杂度较高，适合完全不可信内容。在需要部分访问DOM的情况下，Proxy更合适；在高安全性要求的场景下，Web Workers更好；而iframe适用于完全隔离的第三方内容，如广告或用户生成内容。需要根据具体需求权衡利弊。
2025-04-29 17:10:45
1068
原创 AutoJs相关学习
优先用 bounds() + click(x,y)：最灵活，适用于所有情况。控件可点击时用 target.click(offsetX, offsetY)：代码更简洁。var arrAll = text("头像").find();// 获取元素位置find()方法会返回所有匹配的控件集合（类似数组）nonEmpty()是判断集合是否非空的方法（至少有一个元素）size()获取集合中元素的数量get(index)通过索引获取集合中的元素，这里用size()-1获取最后一个元素。
2025-04-22 16:51:07
411
原创 如何从0设计开发一款JS-SDK
前端SDK是什么？前端SDK是为了帮助前端实现特定需求，而向开发者暴露的一些JS-API的集合，规范的SDK包括若干API实现、说明文档等前端SDK其实很常见了，比如：UI组件库：通过封装一系列组件，通过配置帮助开发者调用JS类库：通过实现一类常用的方法，便于开发处理数据，也不用再考虑兼容性监控统计工具：通过API，来监听前端系统的报错、统计数据。
2025-03-25 13:51:53
1008
原创 一次性上传 1000 张图片, 总量 10GB 的方案设计
最近有一个上传文件方面的需求，上传图片，用户可以选择文件夹上传。文件夹里的图片可能很多，而且由于特殊的项目背景，用户选择的图片可能会比较大，10MB左右。这里就需要做一些方案上的设计了，确保整个过程的流畅和容错。
2025-02-24 17:27:42
711
原创 纯前端怎么实现检测版本更新
在传统的多页Web应用中，每次用户访问页面时，都会从服务器获取最新的页面和资源，因此版本更新相对简单，用户总是能获取到最新的版本。然而，SPA在首次加载后，前端的静态资源会缓存在浏览器内存中，且在整个使用过程中通常不会自动重新加载。这种特性意味着如果应用有新的版本发布，用户可能仍在使用旧版本，无法立即获得最新的功能、修复或安全更新。为了确保用户始终使用最新的版本并体验到最佳的功能和安全性，SPA应用需要实现版本检测和更新提示机制。
2025-02-06 10:21:04
513
原创 前端工程师必需要记住的CLI命令
作为前端开发工程师，我们需要了解哪些命令？如果您熟悉这些命令，它们将大大提高您的工作效率。小伙伴们，你们知道如何列出一个目录的文件结构吗？它在显示文件之间的目录关系方面做得很好，这真的很酷。在此之前，您需要安装命令树。然后只需在文件目录中执行tree即可。wc 是 word count 的缩写，常用于文件统计。它可以统计字数、行数、字符数、字节数等。我经常用它来计算文件中的代码行数。打印出一个目录的文件大小信息。我们使用它的频率较低，但它是一个非常值得学习的命令。du -h：打印出适合人类阅读的信息
2025-02-06 10:14:26
748
原创 新一代CSS选择器：12个技巧让代码量减少70%
CSS选择器的使用技巧直接影响着我们的代码质量和维护效率。分享一些新一代的CSS选择器技巧，这些技巧不仅能让你的代码更简洁，还能提升样式表的可维护性。
2025-01-21 15:36:41
363
转载 基于web-see的前端监控方案实现
最近在研究前端项目的监控，找到了web-see这个工具，，还有使用。这个工具提供了上报错误、定位错误源码、记录用户行为等功能。
2025-01-17 15:16:43
103
原创 Vue中nextTick实现原理
通过这样分成三步、循序渐进的方式，我们深入探讨了 「nextTick」 的原理和实现机制。希望这篇文章能够对你有所帮助，让你在前端开发的道路上更加得心应手！🚀。
2025-01-14 14:33:40
1097
原创 【airtest】自动化入门教程Poco元素定位
本文将详细讲解Poco控件定位的各种方式，利用这些方法可以帮助我们编写出目标控件的定位脚本。我们在IDE录制的poco脚本，常见的都是类似 poco(“star_single”).click()这样的脚本，其中 poco(“star_single”) 这块就属于Poco控件定位脚本啦。
2025-01-13 11:37:11
1648
原创 前端错误捕获定位工具
作为一个兢兢业业的前端er，虽然每天都被各种CRUD的需求包围着，但总归还是有一颗爱玩的心。这篇文章也是之前想要做的一个小玩具，最近终于挤出时间把这个玩具给实现了，感觉有点意思，整理出来给掘友们玩一下~
2024-12-05 15:59:46
1186
原创 npm, yarn, pnpm之间的区别
在现代化的开发中，一个人可能同时开发多个项目，安装的项目越来越多，所随之安装的依赖包也越来越臃肿，而且有时候所安装的速度也很慢，甚至会安装失败。因此我们就需要去了解一下，我们的包管理器，在前端比较主流的包管理器主要有三个（当然还有其他优秀的包管理器，本文主要介绍这三个），分别是：npm，yarn，pnpmnpm 是 Node.js 默认的包管理工具，最早由 Node 社区开发并捆绑到 Node.js 中，因此使用最为广泛。
2024-12-05 15:59:18
1226
原创 为什么前端打包出来的静态文件名字是一串 Hash 值 ？
前端打包时使用 Hash 值作为静态文件名，主要是为了缓存优化、版本管理和避免缓存污染。当文件内容发生变化时，打包工具会生成不同的 Hash 值，确保文件名唯一，从而强制浏览器加载最新版本的资源，避免加载旧缓存文件引发的问题。同时，如果文件内容没有变化，文件名保持不变，浏览器可以继续使用缓存中的资源，从而减少网络请求，提升加载性能和用户体验。通过这种方式，前端应用可以高效地管理静态资源，保证用户始终访问到最新内容。
2024-11-28 14:50:09
1292
原创 禁止别人调试前端代码
作为web开发者，我们应该都有这样一个认识：前端代码是公开的，所有人都能拿到我们代码，不能把秘钥等信息写死在前端。为了避免他人轻易看懂前端代码，通常我们会对代码进行压缩、混淆等处理。今天带来一篇文章，作者介绍了几种避免他人调试前端代码的常见方式，感兴趣的同学可以在自己项目里试试。下面是正文部分。这里我们不介绍禁止右键菜单禁止F12快捷键和代码混淆方案。
2024-11-28 10:08:23
1262
原创 node服务器实战-日志持久化
日志对于 Web 后台应用来说是必要的，Koa 原生并不支持支持日志模块，所幸 GitHub 已经有很多优秀的 Node.js 日志框架，这节实战将使用来处理 Koa 的日志，当然也有像这样的 Koa 中间件对 log4js-node 进行了封装，本节实战也会实现一个中间件来处理日志。
2024-11-25 17:44:09
1162
原创 程序员如何找 logo 图标和插画？（建议收藏）
作为一个程序员，不管你是平时要自己做博客网站、写文章，还是独立开发一些产品，基本上会用到一些图片资源，比如 Logo、插画、icon，哪怕是写 PPT ，也是会用到的。
2024-11-25 17:43:32
1018
原创 前端中的 File 和 Blob两个对象到底有什么不同
Blob 是纯粹的二进制数据，它可以存储任何类型的数据，但不具有文件的元数据（如文件名、最后修改时间等）。File 是 Blob 的子类，File 对象除了具有 Blob 的所有属性和方法之外，还包含文件的元数据，如文件名和修改日期。你可以将 File 对象看作是带有文件信息的 Blob。// true二者在文件上传和二进制数据处理的场景中被广泛使用。Blob 更加通用，而 File 更专注于与文件系统的交互。
2024-11-11 16:31:35
1077
原创 前端拖拽库方案之react-beautiful-dnd
近期，知名 React 拖拽库宣布了项目弃用的决定，未来将不再维护。这一决定源于其存在的缺陷与局限性，促使作者转向开发一个更加现代化的拖拽解决方案——（下面会介绍），其旨在提供更佳的性能、灵活性和可访问性。作为 React 生态中不可或缺的工具库，react-beautiful-dnd 曾以其卓越的拖放体验赢得了广泛赞誉，其 npm 周下载量高达 163 万次。
2024-10-31 10:37:11
1547
原创 Vue的不同风格写法，你知道么？
我们需要新建一个 jsx/tsx 文件，然后只要保证导出的仍然是一个组件就可以了。有了前面的铺垫，我们不难发现，这不就是去掉 script 标签的选项式写法吗？确实！这是因为我故意在前面安排了选项式写法的例子，所以过渡到这里完全没有压力！setup() {const name = ref('天气好')setup() {const name = ref('天气好')});同样地，前面对于 defineComponent 不同方式的使用这里也都可以的。
2024-10-24 10:37:37
1168
原创 在 Gitlab 中使用 ChatGPT 进行 CodeReview
GitHub上看到一个使用 ChatGPT 进行 Code Review 的项目。它实现了一个代码审查机器人，当你在 GitHub 上创建一个新的 Pull request 时，机器人会自动进行代码审查，审查信息将显示在 PR timeline / file changes 中。由于该版本不支持gitlab，于是自己用js写了一版。代码审查机器人：在 Gitlab 中使用 ChatGPT 或 其他模型（兼容openai的api） 进行 CodeReview。
2024-09-27 10:28:06
1223
转载 一文解读react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)
react在16版本之后，加入了fiber架构，官方推荐使用纯函数组件，为此react-hook应运而生。
2024-08-26 17:23:23
213
原创 Monorepo与pnpm：前端项目管理的完美搭档
pnpm又称 performant npm，翻译过来就是高性能的npm。Monorepo 是一种项目开发与管理的策略模式，它代表"单一代码仓库"（Monolithic Repository）。在 Monorepo 模式中，所有相关的项目和组件都被存储在一个统一的代码仓库中，而不是分散在多个独立的代码仓库中，这些项目之间还可能会有依赖关系。npm、yarn、pnpm 等是用来管理项目依赖、发布包、安装依赖的工具，它们都提供了对工作区（workspace）的支持，允许在单个代码库中管理多个项目或包。
2024-08-06 10:45:32
1853
原创 前端错误日志上报解决方案
项目上线之后，用户如果出现错误（代码报错、资源加载失败以及其他情况），基本上没有办法复现，如果用户出了问题但是不反馈或直接不用了，对开发者或公司来说都是损失。由于我这个项目比较小，只是一个迷你商城，所以不需要收集很复杂的数据，只需要知道有没有资源加载失败、哪行代码报错就可以了，市面上有很多现成的监控平台比如sentry，在这里我选择通过nodejs自己搭一个服务。我的项目是使用Vue2写的，所以本文主要是讲Vue相关的部署过程1、部署后台服务（使用express）
2024-08-06 10:45:09
2211
1
原创 前端怎么实现检测版本更新？
在传统的多页Web应用中，每次用户访问页面时，都会从服务器获取最新的页面和资源，因此版本更新相对简单，用户总是能获取到最新的版本。然而，SPA在首次加载后，前端的静态资源会缓存在浏览器内存中，且在整个使用过程中通常不会自动重新加载。这种特性意味着如果应用有新的版本发布，用户可能仍在使用旧版本，无法立即获得最新的功能、修复或安全更新。为了确保用户始终使用最新的版本并体验到最佳的功能和安全性，SPA应用需要实现版本检测和更新提示机制。
2024-07-29 10:14:28
1094
原创 APP如何与H5通信？
window.postMessage中的window指的是你想发送跨域消息的那个窗口(你需要通信的目标窗口)，而不是自身窗口的window父页面中：父页面向子页面发送跨域信息，window就是在父页面中嵌入的iframe指向的子页面的window，即：iFrame.contentWindow子页面中：子页面想父页面发送跨域信息，window就是父页面的window，在这里因为子页面是嵌入到父页面中的，对于子页面来讲，window就是top或者parent。
2024-07-29 10:13:42
1701
转载 双因素认证（2FA）教程
双因素认证的优点在于，比单纯的密码登录安全得多。就算密码泄露，只要手机还在，账户就是安全的。各种密码破解方法，都对双因素认证无效。缺点在于，登录多了一步，费时且麻烦，用户会感到不耐烦。而且，它也不意味着账户的绝对安全，入侵者依然可以通过盗取 cookie 或 token，劫持整个对话（session）。双因素认证还有一个最大的问题，那就是帐户的恢复。一旦忘记密码或者遗失手机，想要恢复登录，势必就要绕过双因素认证，这就形成了一个安全漏洞。除非准备两套双因素认证，一套用来登录，另一套用来恢复账户。
2024-07-24 11:38:36
1191
原创 nginx配置浏览器缓存
Expires：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存（http1.0的产物，现在一般用cache-control）。cache-control的优先级高于expires，expires是http1.0的产物，而cache-control是http1.1的产物，两者同时存在的时候expire会被cache-control的max-age覆盖，在不支持http1.1的情况下可能就需要expires来保持兼容。强缓存、协商缓存、无缓存区别。
2024-07-22 11:02:00
812
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人