- 博客(322)
- 资源 (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
2432
原创 如何从0设计开发一款JS-SDK
前端SDK是什么？前端SDK是为了帮助前端实现特定需求，而向开发者暴露的一些JS-API的集合，规范的SDK包括若干API实现、说明文档等前端SDK其实很常见了，比如：UI组件库：通过封装一系列组件，通过配置帮助开发者调用JS类库：通过实现一类常用的方法，便于开发处理数据，也不用再考虑兼容性监控统计工具：通过API，来监听前端系统的报错、统计数据。
2025-03-25 13:51:53
757
原创 一次性上传 1000 张图片, 总量 10GB 的方案设计
最近有一个上传文件方面的需求，上传图片，用户可以选择文件夹上传。文件夹里的图片可能很多，而且由于特殊的项目背景，用户选择的图片可能会比较大，10MB左右。这里就需要做一些方案上的设计了，确保整个过程的流畅和容错。
2025-02-24 17:27:42
656
原创 纯前端怎么实现检测版本更新
在传统的多页Web应用中，每次用户访问页面时，都会从服务器获取最新的页面和资源，因此版本更新相对简单，用户总是能获取到最新的版本。然而，SPA在首次加载后，前端的静态资源会缓存在浏览器内存中，且在整个使用过程中通常不会自动重新加载。这种特性意味着如果应用有新的版本发布，用户可能仍在使用旧版本，无法立即获得最新的功能、修复或安全更新。为了确保用户始终使用最新的版本并体验到最佳的功能和安全性，SPA应用需要实现版本检测和更新提示机制。
2025-02-06 10:21:04
456
原创 前端工程师必需要记住的CLI命令
作为前端开发工程师，我们需要了解哪些命令？如果您熟悉这些命令，它们将大大提高您的工作效率。小伙伴们，你们知道如何列出一个目录的文件结构吗？它在显示文件之间的目录关系方面做得很好，这真的很酷。在此之前，您需要安装命令树。然后只需在文件目录中执行tree即可。wc 是 word count 的缩写，常用于文件统计。它可以统计字数、行数、字符数、字节数等。我经常用它来计算文件中的代码行数。打印出一个目录的文件大小信息。我们使用它的频率较低，但它是一个非常值得学习的命令。du -h：打印出适合人类阅读的信息
2025-02-06 10:14:26
721
原创 新一代CSS选择器：12个技巧让代码量减少70%
CSS选择器的使用技巧直接影响着我们的代码质量和维护效率。分享一些新一代的CSS选择器技巧，这些技巧不仅能让你的代码更简洁，还能提升样式表的可维护性。
2025-01-21 15:36:41
299
转载 基于web-see的前端监控方案实现
最近在研究前端项目的监控，找到了web-see这个工具，，还有使用。这个工具提供了上报错误、定位错误源码、记录用户行为等功能。
2025-01-17 15:16:43
44
原创 Vue中nextTick实现原理
通过这样分成三步、循序渐进的方式，我们深入探讨了 「nextTick」 的原理和实现机制。希望这篇文章能够对你有所帮助，让你在前端开发的道路上更加得心应手！🚀。
2025-01-14 14:33:40
1042
原创 【airtest】自动化入门教程Poco元素定位
本文将详细讲解Poco控件定位的各种方式，利用这些方法可以帮助我们编写出目标控件的定位脚本。我们在IDE录制的poco脚本，常见的都是类似 poco(“star_single”).click()这样的脚本，其中 poco(“star_single”) 这块就属于Poco控件定位脚本啦。
2025-01-13 11:37:11
1271
原创 前端错误捕获定位工具
作为一个兢兢业业的前端er，虽然每天都被各种CRUD的需求包围着，但总归还是有一颗爱玩的心。这篇文章也是之前想要做的一个小玩具，最近终于挤出时间把这个玩具给实现了，感觉有点意思，整理出来给掘友们玩一下~
2024-12-05 15:59:46
1132
原创 npm, yarn, pnpm之间的区别
在现代化的开发中，一个人可能同时开发多个项目，安装的项目越来越多，所随之安装的依赖包也越来越臃肿，而且有时候所安装的速度也很慢，甚至会安装失败。因此我们就需要去了解一下，我们的包管理器，在前端比较主流的包管理器主要有三个（当然还有其他优秀的包管理器，本文主要介绍这三个），分别是：npm，yarn，pnpmnpm 是 Node.js 默认的包管理工具，最早由 Node 社区开发并捆绑到 Node.js 中，因此使用最为广泛。
2024-12-05 15:59:18
1130
原创 为什么前端打包出来的静态文件名字是一串 Hash 值 ？
前端打包时使用 Hash 值作为静态文件名，主要是为了缓存优化、版本管理和避免缓存污染。当文件内容发生变化时，打包工具会生成不同的 Hash 值，确保文件名唯一，从而强制浏览器加载最新版本的资源，避免加载旧缓存文件引发的问题。同时，如果文件内容没有变化，文件名保持不变，浏览器可以继续使用缓存中的资源，从而减少网络请求，提升加载性能和用户体验。通过这种方式，前端应用可以高效地管理静态资源，保证用户始终访问到最新内容。
2024-11-28 14:50:09
1206
原创 禁止别人调试前端代码
作为web开发者，我们应该都有这样一个认识：前端代码是公开的，所有人都能拿到我们代码，不能把秘钥等信息写死在前端。为了避免他人轻易看懂前端代码，通常我们会对代码进行压缩、混淆等处理。今天带来一篇文章，作者介绍了几种避免他人调试前端代码的常见方式，感兴趣的同学可以在自己项目里试试。下面是正文部分。这里我们不介绍禁止右键菜单禁止F12快捷键和代码混淆方案。
2024-11-28 10:08:23
1160
原创 node服务器实战-日志持久化
日志对于 Web 后台应用来说是必要的，Koa 原生并不支持支持日志模块，所幸 GitHub 已经有很多优秀的 Node.js 日志框架，这节实战将使用来处理 Koa 的日志，当然也有像这样的 Koa 中间件对 log4js-node 进行了封装，本节实战也会实现一个中间件来处理日志。
2024-11-25 17:44:09
1120
原创 程序员如何找 logo 图标和插画？（建议收藏）
作为一个程序员，不管你是平时要自己做博客网站、写文章，还是独立开发一些产品，基本上会用到一些图片资源，比如 Logo、插画、icon，哪怕是写 PPT ，也是会用到的。
2024-11-25 17:43:32
826
原创 前端中的 File 和 Blob两个对象到底有什么不同
Blob 是纯粹的二进制数据，它可以存储任何类型的数据，但不具有文件的元数据（如文件名、最后修改时间等）。File 是 Blob 的子类，File 对象除了具有 Blob 的所有属性和方法之外，还包含文件的元数据，如文件名和修改日期。你可以将 File 对象看作是带有文件信息的 Blob。// true二者在文件上传和二进制数据处理的场景中被广泛使用。Blob 更加通用，而 File 更专注于与文件系统的交互。
2024-11-11 16:31:35
1004
原创 前端拖拽库方案之react-beautiful-dnd
近期，知名 React 拖拽库宣布了项目弃用的决定，未来将不再维护。这一决定源于其存在的缺陷与局限性，促使作者转向开发一个更加现代化的拖拽解决方案——（下面会介绍），其旨在提供更佳的性能、灵活性和可访问性。作为 React 生态中不可或缺的工具库，react-beautiful-dnd 曾以其卓越的拖放体验赢得了广泛赞誉，其 npm 周下载量高达 163 万次。
2024-10-31 10:37:11
1374
原创 Vue的不同风格写法，你知道么？
我们需要新建一个 jsx/tsx 文件，然后只要保证导出的仍然是一个组件就可以了。有了前面的铺垫，我们不难发现，这不就是去掉 script 标签的选项式写法吗？确实！这是因为我故意在前面安排了选项式写法的例子，所以过渡到这里完全没有压力！setup() {const name = ref('天气好')setup() {const name = ref('天气好')});同样地，前面对于 defineComponent 不同方式的使用这里也都可以的。
2024-10-24 10:37:37
1124
原创 在 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
1031
转载 一文解读react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)
react在16版本之后，加入了fiber架构，官方推荐使用纯函数组件，为此react-hook应运而生。
2024-08-26 17:23:23
155
原创 Monorepo与pnpm：前端项目管理的完美搭档
pnpm又称 performant npm，翻译过来就是高性能的npm。Monorepo 是一种项目开发与管理的策略模式，它代表"单一代码仓库"（Monolithic Repository）。在 Monorepo 模式中，所有相关的项目和组件都被存储在一个统一的代码仓库中，而不是分散在多个独立的代码仓库中，这些项目之间还可能会有依赖关系。npm、yarn、pnpm 等是用来管理项目依赖、发布包、安装依赖的工具，它们都提供了对工作区（workspace）的支持，允许在单个代码库中管理多个项目或包。
2024-08-06 10:45:32
1624
原创 前端错误日志上报解决方案
项目上线之后，用户如果出现错误（代码报错、资源加载失败以及其他情况），基本上没有办法复现，如果用户出了问题但是不反馈或直接不用了，对开发者或公司来说都是损失。由于我这个项目比较小，只是一个迷你商城，所以不需要收集很复杂的数据，只需要知道有没有资源加载失败、哪行代码报错就可以了，市面上有很多现成的监控平台比如sentry，在这里我选择通过nodejs自己搭一个服务。我的项目是使用Vue2写的，所以本文主要是讲Vue相关的部署过程1、部署后台服务（使用express）
2024-08-06 10:45:09
1897
1
原创 前端怎么实现检测版本更新？
在传统的多页Web应用中，每次用户访问页面时，都会从服务器获取最新的页面和资源，因此版本更新相对简单，用户总是能获取到最新的版本。然而，SPA在首次加载后，前端的静态资源会缓存在浏览器内存中，且在整个使用过程中通常不会自动重新加载。这种特性意味着如果应用有新的版本发布，用户可能仍在使用旧版本，无法立即获得最新的功能、修复或安全更新。为了确保用户始终使用最新的版本并体验到最佳的功能和安全性，SPA应用需要实现版本检测和更新提示机制。
2024-07-29 10:14:28
1014
原创 APP如何与H5通信？
window.postMessage中的window指的是你想发送跨域消息的那个窗口(你需要通信的目标窗口)，而不是自身窗口的window父页面中：父页面向子页面发送跨域信息，window就是在父页面中嵌入的iframe指向的子页面的window，即：iFrame.contentWindow子页面中：子页面想父页面发送跨域信息，window就是父页面的window，在这里因为子页面是嵌入到父页面中的，对于子页面来讲，window就是top或者parent。
2024-07-29 10:13:42
1584
转载 双因素认证（2FA）教程
双因素认证的优点在于，比单纯的密码登录安全得多。就算密码泄露，只要手机还在，账户就是安全的。各种密码破解方法，都对双因素认证无效。缺点在于，登录多了一步，费时且麻烦，用户会感到不耐烦。而且，它也不意味着账户的绝对安全，入侵者依然可以通过盗取 cookie 或 token，劫持整个对话（session）。双因素认证还有一个最大的问题，那就是帐户的恢复。一旦忘记密码或者遗失手机，想要恢复登录，势必就要绕过双因素认证，这就形成了一个安全漏洞。除非准备两套双因素认证，一套用来登录，另一套用来恢复账户。
2024-07-24 11:38:36
933
原创 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
732
原创 前端开发必备 VS Code 插件大全
最好的软件开发往往来自于程序员的直接需求，Code Runner 作者是一位曾就职于微软的中国程序员，他为了方便自己的日常开发工作，开发了 Code Runner 这款可以在 VS Code 中方便快捷运行各种语言代码的插件。Live Server Live Server是一款实时开发服务器插件，能够在本地启动一个服务器，当你修改代码时，它能自动检测变化并即时刷新浏览器，让你在开发过程中能即刻看到改动效果，尤其适用于静态网页和单页应用（SPA）的开发。提供右键菜单选项，一键在浏览器打开html文件。
2024-07-04 15:17:15
1247
原创 前端代码规范 - 日志打印规范
通过以上步骤，我们可以建立一个前端项目的日志输出规范。一个好的日志系统应该是灵活的，能够根据不同的环境和需求进行适当的调整。日志是帮助我们更好地理解和维护应用的工具，合理的使用和管理日志对于任何规模的前端项目都是非常重要的。
2024-07-04 15:16:07
1000
1
原创 react中super() 和 super(props) 有什么区别？
在React中，类组件基于ES6，所以在中必须使用super在调用super过程，无论是否传入propsReact内部都会将porps赋值给组件实例porps属性中如果只调用了super()，那么this.props在super()和构造函数结束之间仍是undefined。
2024-06-24 09:43:41
431
原创 react中state 和 props 有什么区别？
组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是。具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据。一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是。的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。在内部不可变的，如果想要改变它看，只能通过外部组件传入新的。来改变，从而达到更新组件内部数据的作用，并且重新调用组件。还可以接受第二个参数，它是一个函数，会在。当需要修改里面的值的状态需要通过调用。来重新渲染子组件，否则子组件的。
2024-06-24 09:42:59
406
原创 说说React Jsx转换成真实DOM过程？
在react源码中，虚拟Dom转化成真实Dom使用React.createElement或JSX编写React组件，实际上所有的 JSX 代码最后都会转换成React.createElement(…) ，Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象。
2024-06-19 14:31:04
473
原创 JavaScript 中内存泄漏的几种情况
并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"程序的运行需要内存。语言中，因为是手动管理内存，内存泄露是经常出现的事情。
2024-06-18 16:10:39
440
原创 react-dnd拖拽库的使用
collected：一个对象，包含从collect函数收集的属性，如果collect未定义函数，则返回一个空对象；collected：一个对象，包含从collect函数收集的属性，如果collect未定义函数，则返回一个空对象；end方法的调用时机晚于drop的调用时机，所以只有在end中做释放后的数据处理才能保证系统的正确性，如果在drop中就更新state或React redux中数据，会引发错误；必须，一个字符串，此放置目标将仅对于指定类型的拖动源产生的项目作出反应；
2024-05-27 10:16:06
1426
原创 npm package.json属性详解
必须是一个严格的json文件，而不仅仅是js里边的一个对象。其中很多属性可以通过npm-config来生成more。
2024-05-27 10:15:33
688
转载 【MathJS】入门mathjs最佳实践，解决JS计算精度丢失的问题
看上去，math.format()只是把number类型转成string类型，别慌，后面讲bignumber时，才会真正体会到它的价值。在实际开发中，需要快速上手，要在最短的时间内解决问题。我的思路就是写一个最简单的用例，搞清楚它的输入和输出，从而正确的理解它的作用。前端的小伙伴，在项目开发中，比如常见的订单模块中，都会进行一些基础的数学运算时，不可避免的就会遇到让人头疼的精度问题。chain调用，返回的是Chain的实例对象，就需要尾部调用，返回chain的value值，如上。还有一些场景需要处理，
2024-05-22 16:35:26
2268
原创 在window用bat批处理制作mongodb本地启动文件
bat文件是dos下的批处理文件。批处理文件是无格式的文本文件，它包含一条或多条命令。它的文件扩展名- 为 .bat 或 .cmd。在命令提示下输入批处理文件的名称，或者双击该批处理文件，系统就会调用cmd.exe按照该文件中各个命令出现的顺序来逐个运行它们。使用批处理文件（也被称为批处理程序或脚本），可以简化日常或重复性任务。
2024-05-17 14:46:23
882
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人