- 博客(1585)
- 资源 (5)
- 收藏
- 关注
RSS订阅转载 （已开源）开发了一个纯前端在线代码编辑器、制作一个炫酷动画收藏网站
距离上次在掘金写作已经过去了很长时间，这段时间里，我也没有开发什么有意思的项目。最近终于有了些空闲时间，我决定学习一下NuxtJs 3。虽然它已经发布有一段时间了，但因为工作中没有机会使用，我只能在业余时间去研究。每次学习新技术时，如果只是死记硬背，往往难以真正掌握。因此，我决定和以往一样，通过制作一个小Demo来加深理解。这次我选择了一个纯前端的项目，想要实现一个在线代码编辑器，也就是常说的Pl...
2024-09-25 08:45:23
147
转载 10分钟速成：轻松搭建前端monorepo架构与CI/CD自动化！
正文今天我们主要讨论3方面内容：如何搭建比较高效好用的monorepo工程前端如何基于搭建的monorepo工程实现自定义cli工具普通前端项目以及monorepo工程项目自动化cicd核心问题以及解决方案基于 pnpm-workspace + Turborepo + lerna 搭建 monorepo 的 cli 工程首先利用 pnpm 初始化一个工程执行命令初始化工程：pnpminit-y...
2024-09-24 08:45:09
134
转载 这几个前端组件库有点厉害！
今天给大家推荐几款的后台管理系统开箱即用的组件库，基于ElementUI二次封装，开发必备Headless UIHeadless UI是一款出色的前端组件库，专为与 Tailwind CSS 集成而设计。一组完全无样式、完全可访问的 UI 组件，可以自由的引入进你的项目，支持Vue和React。项目特点无样式干扰 - 不带预设样式的组件，便于结合 Tailwind CSS 自定义风格。高度可访问...
2024-09-23 08:45:36
30
转载 axios 源码解析：十分钟带你实现一个 mini-axios
整个实现流程分为 5 个大部分：准备测试环境axios 核心请求构建多宿主环境（浏览器 || node）适配思想拦截器的实现原理如何取消请求1、准备基础的测试环境1.1 基于 Koa 准备一个最简单的服务程序：importKoafrom'koa';constapp=newKoa();//一个简单的路由处理函数app.use(asyncctx=>{ctx.b...
2024-09-19 08:45:17
247
转载 响应式监听localStorage存储？封装个自定义Hook不就好了！
背景项目上有个更改时区的全局组件，同时还有一个可以更改时区的局部组件，想让更改时区的时候能联动起来，实时响应起来。其实每次设置完时区的数据之后是存在了前端的 localStorage 里边，时���组件里边也是从 localStorage 拿去默认值来回显。如果当前页面不刷新，那么时间组件就不能更新到最新的 localStorage 数据。怎么才能让 localStorage 存储的数也变成响应式...
2024-09-18 08:45:22
93
转载 重新学习 TypeScript 类型系统
很多开发者已经将 Typescript 加入到自己的项目里进行开发，初衷是为了项目在开发时拥有类型检查能力。TypeScript 通过易上手且功能强大的类型系统，为 JavaScript 提供了强大的类型检查能力。在类型的帮助下，我们无需实际运行代码，就能通过类型的流转观察到变量的值是如何改变的。但往往现实的情况是，随着增加的类型越来越多，类型报错越来越多，不得已改为any类型，或者增加 // ...
2024-09-12 08:45:34
284
转载 如何检查前端项目和node项目中未被使用的依赖包
随着前端项目中使用的依赖包越来越多，而其中一部分依赖包可能并未被项目所使用，手动查找这些依赖包既耗时又繁琐。未使用的依赖包会增加项目的大小，这可能会导致下载和安装你的应用所需的时间更长。并且在构建项目时，构建工具需要处理所有的依赖包。未使用的依赖包可能会不必要地增加构建时间，特别是在大型项目中。编写脚本来识别未使用的依赖包Depcheck 是一款用于分析项目中依赖关系的工具，它可以帮助我们找出以下...
2024-09-09 08:45:34
60
转载 前端代码规范- Commit 提交规范
什么是约定式提交约定式提交（Conventional Commits）是一种用于代码版本控制的规范，旨在通过明确和标准化提交信息来提高代码协作质量和效率。其基本原则是通过规定提交信息的结构和语义来提高代码版本控制的可读性、可维护性和自动化程度。约定式提交规范通常要求提交信息包括一个描述性的"类型"、一个可选的"作用域"、一个用于简洁说明的"主题"，以及可选的"正文"和"尾部"等组成部分。这些组成部...
2024-09-03 08:45:38
321
转载 2024 JavaScript 调试参考文档
使用断点暂停代码，设置断点，以便您可以在代码执行过程中暂停代码。暂停时检查值执行暂停时，调试程序会评估当前函数中的所有变量、常量和对象，直到达到某个断点。调试程序会在相应声明旁边显示内嵌的当前值。您可以使用控制台查询已求值的变量、常量和对象。要点：执行暂停时，您还可以重启当前函数，甚至对其进行实时修改。悬停时预览类/函数属性执行暂停时，将鼠标悬停在类或函数名称上可预览其属性。单步调试代码代码暂停后...
2024-09-02 08:45:29
578
转载 Vue3 组件封装的一些技巧和心得
在日常开发的过程中，使用Vue的组件进行业务拆分，代码解耦是一个很好的选择；今天就来分享一下我在使用Vue3进行组件封装的一些技巧和心得，希望能够帮助到大家；1. 组件特性在Vue中组件是一个独立的实例，每个组件都有共通点，就是：属性、插槽、事件、方法；在日常我们使用第三方组件库的时候，组件库的文档都会说明上面四个特性，而组件封装就是围绕这四个特性进行的；2. 组件封装2.1 组件继承很多情况下，...
2024-08-30 08:45:40
507
转载 50个开发人员都应该知道的 React.js 超级技巧（下）
接上期的内容我们把后面剩下的25个内容分享完，希望这些内容能够对你有所帮助。26. 使用 useEffect 处理异步调用问题：您需要处理组件内的异步操作，例如，获取数据。解决方案：使用 `useEffect` 钩子来处理异步调用并管理组件生命周期。```jsxconst DataFetcher = ({ url }) => {const [data, setData] = useSta...
2024-08-29 08:45:31
307
转载 面试官：如果一个NPM包部分功能不满足需求，如何修改其部分功能~
对第三方包进行修改以适应特定需求是一个常见的场景。尽管直接修改 node_modules 中的代码是可能的，但这种做法并不推荐，因为这些改动在下次运行 npm install 或更新包时会丢失。接下来的内容中，我们将来讲解一下处理这种情况的几种推荐方法。使用 Fork最常见的方法就是 Fork 源代码，通过在 GitHub 上或其他托管平台上 Fork 第三方包的源代码库。对其源代码进行修改，修改...
2024-08-28 08:45:21
58
转载 飞书一键复制网页内容为图片原理
很多2C的移动端H5应用，都会有邀请好友、分享之类的，通常会在前端实时生成一副海报图片，用户可以分享到朋友圈等，这类需求都需要解决前端DOM转图片的问题。今天带来一篇文章，作者从飞书的一键复制网页内容为图片，层层分解前端涉及到的技术点，希望大家看完有收获。下面是正文部分。李经理在使用飞书时无意中发现,飞书竟然支持一键复制网页内容到剪贴板的功能。他立即叫来了公司的前端开发小王,兴致勃勃地说:"小王啊...
2024-08-26 08:45:36
63
转载 牛啊牛啊！大佬用Tauri开发一个即时通讯软件
这段时间正在学习桌面端开发，目前了解了Electron和Tauri,在搜索教程的时候发现了一位大佬用Tauri开发了个即时通讯的软件，并且技术栈用的也是VUE3和TypeScript，所以今天就给大家分享一下这个项目——HuLaHuLaHuLa 是一个基于 Tauri、Vite 5、Vue 3 和 TypeScript 构建的即时通讯系统。它利用了 Tauri 的跨平台能力和 Vue 3 的响应式...
2024-08-22 08:45:19
66
转载 没有轮子就自己造一个，用 fabric 写一个标尺
今天领导给我一个任务，就是要求画布上面需要增加一个标尺，用来识别画布内元素的坐标，于是就开始我的搬砖之旅了。开始想着挺简单的，不就是对画布进行刻度标记吗，写着写着发现有点不连贯了，于是就开始在网上找轮子，找了一圈发现没有合适的，那就只能靠自己了。先来看效果（按住 alt + 鼠标左键 拖动画布）：1. 网上的资料任何需求肯定是先要在网上找一圈的，发现很多设计的网站都有实现了这样的功能，例如墨刀的原...
2024-08-21 08:46:00
43
转载 写出好代码的底层逻辑
程序员安身立命的手艺就是写代码，可多少人知道如何才能写出好的代码呢？这几年也做过很多次的代码 CR，可好代码的标准在哪里呢？我们在做 CR 的时候，其实只是停留在代码的表面，主要是跟规范相关的点：命名、代码行数、代码写法、注释如何，这些其实都是可以用 ESLint 做规范去解决的，也很容易形成习惯。如果在这个基础上，每个人都做得不错的情况下，那到底什么是决定了代码的好坏呢？在想这个问题之前，我们得...
2024-08-20 08:45:42
53
转载 深入了解Vite：依赖预构建原理
前言前面我们有提到Vite在开发阶段，提倡的是一个no-bundle的理念，不必与webpack那样需要先将整个项目进行打包构建。但是no-bundle的理念只适合源代码部分（我们自己写的代码），vite会将项目中的所有模块分为依赖与源码两部分。依赖：指的是一些不会变动的一些模块，如：node_modules中的第三方依赖，这部分代码vite会在启动本地服务之前使用esbuild进行预构建。esb...
2024-08-19 08:45:48
55
转载 如何实现一个分词器
如何实现一个分词器在开发代码补全插件的过程中，根据项目需要，我实现了一个分词器，本文将介绍分词器的具体实现细节。一、什么是分词器？分词器是 NLP（natural language processing，自然语言处理）领域的一个重要部分，它可以把一段文本转换为小的单元，称为 token 。token可以是单词、字符、标点符号等。在基于 Transformer 的 LLM （Large Langua...
2024-08-16 08:45:16
53
转载 非常有用的 48 个 JavaScript 代码片段，值得收藏！
日常工作上，大家经常都会保存一些自己常用的代码片段，比如数字每3位添加逗号、日期格式化、解析location.query或location.hash为JSON对象等等。今天带来一篇外网非常火的文章，收集了JavaScript中48个常用的代码片段，同学们可以学习下，部分片段在面试中也经常遇到。下面是正文部分。该项目来自于 Github 用户 Chalarangelo，目前已在 Github 上获得...
2024-08-15 08:45:36
50
转载 什么？原来前端错误上报这么简单！！
前言项目上线之后，用户如果出现错误（代码报错、资源加载失败以及其他情况），基本上没有办法复现，如果用户出了问题但是不反馈或直接不用了，对开发者或公司来说都是损失。由于我这个项目比较小，只是一个迷你商城，所以不需要收集很复杂的数据，只需要知道有没有资源加载失败、哪行代码报错就可以了，市面上有很多现成的监控平台比如sentry，在这里我选择通过nodejs自己搭一个服务。概述我的项目是使用Vue2写的...
2024-08-14 08:45:28
47
转载 50个开发人员都应该知道的 React.js 超级技巧（上）
React.js 是一个用于构建用户界面的流行 JavaScript 库，它提供了丰富的功能来增强你的开发工作流程。这篇文章，我们将以问题和解决方案的形式呈现了 50 个基本技巧、提示和窍门，并进行了详细说明，以帮助您充分利用 React。但是因为文章篇幅有限，我们将近50个基本技巧拆开了为上下两篇文章，每篇文章分享25个技巧，今天这篇就是50个技巧的前25个内容。那么，我们现在就开始吧。1. 组...
2024-08-13 08:45:56
73
转载 渲染树的形成原理你真的很懂吗？
什么是DOMDOM是Document Object Model（文档对象模型）的缩写W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。-这是W3Cschool给的概念看了上面的概念好像太“官方”，解释就是 DOM 是对 HTML 文档结构化的表述，后端服务器返回给浏览器渲染引擎的 HTML 文件字节流是无法直接被浏览器渲染引擎理解的...
2024-08-12 08:46:01
40
转载 你不知道的 async、await 魔鬼细节
0、前言关于promise、async/await的使用相信很多小伙伴都比较熟悉了，但是提到事件循环机制输出结果类似的题目，你敢说都会？试一试？????1：asyncfunctionasync1(){awaitnewPromise((resolve,reject)=>{resolve()})console.log('A')}a...
2024-08-09 08:46:00
40
转载 axios中的那些天才代码！看完我实力大涨！
axios的两种调用方式经常调接口的同学一定非常熟悉aixos下面的两种使用方式：axios(config)//配置式请求axios({method:'post',url:'/user/12345',});axios.post(url, config)//简洁的写法axios.post('/user/12345')不知道各位大佬有没有思考过这样的问题：axios到底是个什...
2024-08-08 08:45:12
49
转载 前端构建系统浅析
开发者编写JavaScript代码，而浏览器运行JavaScript代码。从根本上说，前端开发不需要构建步骤。那么，为什么现代前端需要构建步骤呢？随着前端代码库越来越庞大，以及开发者体验越来越重要，直接将JavaScript源码传输给客户端会带来两个主要问题：不支持的语言特性：由于JavaScript在浏览器中运行，而浏览器种类繁多、版本各异，每增加一种语言特性，能运行你JavaScript的客户...
2024-08-07 08:45:41
41
转载 面试官：如何防止接口重复请求？我给出了三个方案！
前言虽然大部分的接口处理我们都是加了loading的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做全局处理。下面就来总结一下这次的防重复请求的实现方案：方案一这个方案是最容易想到也是最朴实无华的一个方案：通过使用axios拦截器，在请求拦截器中开启全屏Loading，然后在响应拦...
2024-08-06 08:45:17
55
转载 面试官：post为什么会发送两次请求？
之前有人跟我们说，出去面试的时候，有时候会遇到一些让人头疼的问题，比如有一次去字节面试，面试官就问了一个让他很奇怪的问题：“为啥POST请求有时候会发送两次呢？”这个问题听起来挺玄乎的，但其实用大白话来说，原因还挺简单的。咱们这就来聊聊这个事儿。首先，得明白啥是POST请求。POST请求就是咱们在网上干点啥事儿，比如提交个表单、上传个文件啥的，得跟服务器说：“嘿，我这儿有点东西，你给我处理一下。”...
2024-08-05 08:45:20
54
转载 Node.js + typescript 写一个命令批处理辅助工具
1.背景工作中遇到这样一些场景：在php混合html的老项目中写css，但是css写着不太好用，然后就想使用预编译语言来处理，或者写上ts。然后问题来了: 每次写完以后都要手动执行一次命令行把文件编译成css文件，然后又要再输入一行命令把css压缩添加前缀；或者把ts编译成js，然后js压缩混淆。那么有没有办法不用手动输入命令行呢？如果只是为了不手动输入的话，那么可以在vscode上安装compi...
2024-08-01 08:45:57
39
转载 不到20行js实现高性能图片懒加载
什么是懒加载相信大家都知道，一句话概括，就是当需要出现的时候再加载。当页面上有很多图片（即：有很多img标签）的时候，浏览器会依次执行get请求拿到每个图片的二进制流，这实际上是在消耗用户的流量和服务器带宽。而不管是pc设备还是移动端设备，屏幕大小总是有限的，无法一次性看到所有图片，那么看不到的图片就没必要加载，等滚动屏幕，img元素进入浏览器可视区域时再加载。基本原理那如何做到这一点呢？我们知道...
2024-07-31 08:45:55
80
转载 JavaScript 的模板字符串
字符串插值JavaScript 中使用反引号 ` 包裹的字符串叫模板字符串（template literals）。人们常用它拼接变量和字符串，即所谓的字符串插值（string interpolation）。在使用字符串插值时，使用 ${} 包裹变量或表达式，它是变量的占位符。多行文本模板字符串支持多行文本（multi-line strings）。嵌套模板它还支持嵌套模板（nesting templ...
2024-07-30 08:45:19
53
转载 APP如何与H5通信？
postMessagepostMessage可以安全地实现跨源通信。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如targetWindow = window.opener），然后在窗口上调用targetWindow.postMessage()方法分发一个MessageEvent[1]消息。具体用法参考potsMessage-MDN[2]下面进行实践。两个页面通信实现效果：A页面打开...
2024-07-29 08:45:51
39
转载 图解浏览器的多进程渲染机制
作者简介：高扬，来自抖音社区安全前端团队，团队负责的工作重点在于降低社区中不良内容与行为对用户造成的伤害。引言观察浏览器的任务管理器可以发现，打开浏览器的一个页面需要多个进程，包括浏览器进程、GPU进程、网络进程、渲染进程等，有插件的话还会包括各种插件进程（Chrome选项 -> 更多工具 -> 任务管理器）。本文将聚焦于浏览器的各个进程间是如何配合，将页面呈现给用户的。???? 你将了解到...
2024-07-26 08:46:03
82
转载 通过可视化彻底搞懂 Promise执行逻辑
JavaScript 中的 Promise 一开始可能会让人感到有些难以理解，但是如果我们能够理解其内部的工作原理，就会发现它们其实是非常易于掌握的。在这篇博客文章中，我们将深入探讨 Promise 的一些内部机制，并探索它们是如何使得 JavaScript 能够执行非阻塞的异步任务。一种创建 Promise 的方式是使用 new Promise 构造函数，它接收一个执行函数，该函数带有 reso...
2024-07-25 08:45:40
43
转载 图片碎片化渲染特效实现
写在开头最近，小编从玩了两年多的游戏中退游了????，本来以为会一直就这么玩下去，和队友们相处很融洽，收获了很多开心快乐的时光????。可惜，游戏的一波更新......准备要开始收割韭菜了，只能无奈选择弃坑了。小编属于贫民玩家，靠着硬肝与白嫖也将游戏号整得还不错，这两天把号给卖了????。玩了两年多，竟然还能赚一点小钱，很开心????。只是...多少有点舍不得的一起组队的队友们，唉。????记录一下，希望未来还有重逢一日吧，也...
2024-07-24 08:45:53
38
转载 贼有意思的前端开源项目
今天来分享 5 个贼有意思的前端开源项目！Inpaint-webInpaint-web 是一款基于 WebGPU 技术和 wasm 技术的免费开源图像修复和图像缩放工具，纯浏览器端实现。该项目使用的技术栈包括：React、Vite、TypeScript、Tailwind CSS 等。Github：https://github.com/lxfater/inpaint-webEarthwormEart...
2024-07-23 08:45:20
49
转载 前端项目路径别名终极解决方案
关于路径别名一个前端项目通常会演变成复杂的嵌套目录结构。因此，使用相对路径导入可能会变得更长且更混乱，这可能会对代码的外观产生负面影响，并让辨识代码的来源变得更加困难，更加重要的是代码文件位置变动相对路径就得改变。使用路径别名即绝对路径导入，不仅解决了理解导入路径的问题，而且还简化了重构期间代码移动的过程，美丽且直观。//fromthisimport{SearchForm}from...
2024-07-22 08:45:51
54
转载 吐槽一下 Vue3 的语法设计
很长一段时间以来，老有人私信跟我说，Vue 很先进，代表了未来，你不要沉迷在 React 这个年老色衰的技术栈里自娱自乐啦，睁开眼睛去看看世界吧，别的技术栈都发展早就比 React 更先进啦！！然后这些人估计都不会相信，我真的有非常认真的去把 Vue 从头到尾学了个遍，甚至 Vue2、Vue3 的原理我也理清楚了... 很多年前，我甚至还在我的付费小册《JavaScript核心进阶》里，聊设计模式...
2024-07-18 08:45:13
61
转载 别想调试我的前端代码！
作为web开发者，我们应该都有这样一个认识：前端代码是公开的，所有人都能拿到我们代码，不能把秘钥等信息写死在前端。为了避免他人轻易看懂前端代码，通常我们会对代码进行压缩、混淆等处理。今天带来一篇文章，作者介绍了几种避免他人调试前端代码的常见方式，感兴趣的同学可以在自己项目里试试。下面是正文部分。这里我们不介绍禁止右键菜单, 禁止F12快捷键和代码混淆方案。无限debugger前端页面防止调试的方法...
2024-07-17 08:45:11
100
转载 业务前端的本质--数据维护
Vue/React 将前端开发从 jQuery 命令式的编程风格带到了声明式的编程风格，开发者只需要描述界面应该是什么样子，Vue/React 就会根据数据的变化自动更新界面。因此对于业务页面只需要关心数据有什么以及引起数据的变化有什么。数据数据主要有两大类，ui 相关和非 ui 相关。ui 相关前端本质上就是将数据可视化，因此定义的变量中一部分就是供页面展示使用的，在 Vue 中会把这些数据定义...
2024-07-16 08:45:10
38
转载 js如何控制一次只加载一张图片，加载完成后再加载下一张
今天看到一个面试题，是关于img图片加载方面的，有必要记录一下。其实关于这个问题，只要知道图片什么时候加载完成就能解决了。通过onload事件判断Img标签加载完成实现逻辑：新建一个Image对象实例，为实例对象设置src属性等，在onload事件中添加此实例对象到父元素中，然后将图片地址数组中的第一个元素剔除，继续调用此方法直到存储图片地址的数组为空。代码constimgArrs=[......
2024-07-15 08:45:26
35
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人