- 博客(1595)
- 资源 (5)
- 收藏
- 关注
RSS订阅转载 产品：你能让网页也像QQ那种一样发出右下角消息吗
在业务开发中，产品有时会提出一些'异想天开'的需求。作为开发，别急着先拒绝需求，可以让产品给出竞品，看看能不能找出蛛丝马迹，能不能找到解决方案。当然太离谱的需求还是要拒绝 ^_^今天给大家分享一篇，面对产品提出的有挑战的需求，是如何解决的？以下是正文：本文用于记录浏览器发出通知的知识点，相关API为Notification(https://developer.mozilla.org/zh-CN/d...
2024-10-31 08:45:10
4
转载 使用Nest.js+LangChain给低代码平台赋上AI代码生成能力，让低代码变成低低代码！...
前言LangChain 是一个用于开发由大型语言模型（LLM）支持的应用程序的框架。可以快速使用它集成各个模型，以及格式化用户输入和模型输出，封装了很多工具类，使得开发者很容易将其集成到自己的程序当中。最近，我参与了 @河畔一角[1] 大佬的MarsView低代码平台，大家有兴趣可以去看看：www.marsview.cc/[2]我目前提交了十几个PR了，在开发贡献过程中，我越发感觉低代码和AI应该...
2024-10-28 08:45:49
17
转载 高级前端应该掌握的Nginx相关知识
Nginx是在前端服务部署时是很重要的一部分，也是部署的基础，学会了通过Nginx部署前端资源，才能继续后续的一系列进阶。一、了解一点简单的Nginx知识本节内容作为基础知识，如果熟悉Nginx可以略过，如果不熟悉可以实际操作一下。现在服务器安装Nginx很简单，一般只需要两行命令即可，安装完成后，启动服务。#安装nginxyuminstall-ynginx#启动ng...
2024-10-23 08:45:50
24
转载 GPT自动投简历，一周斩获三offer，开源分享！
一、前言最近在 GitHub 上发现了一个非常有意思的项目。该作者巧妙地结合GPT和RPA技术，打造了一个自动投简历助手。这是原作者分享的效果展示视频：B站视频链接2。然而，由于原项目存在以下问题：代码使用Python编写，对于前端开发者不够友好。运行该项目需要充值OpenAI账户，而且只支持使用国外的信用卡，国内用户想充钱都没地。运行该项目还需要配置代理，对一些用户而言可能不太友...
2024-10-21 08:45:59
27
转载 前端恶趣味：我吸了juejin首页，好爽!
今天带来一篇和工作无关的文章。常规的前端业务，其实挺繁琐的，但其实我们可以做一些有意思的事情。当年百度首页的机器人动画，把整个页面内容打碎的特效，也是惊艳了一众前端啊。文本的作者，也是做了一个有意思的事情，把页面内容以动画的形式，逐个吸收掉，看动画有点像孙猴子的金箍棒在收妖精感兴趣的同学可以看看，自己能不能有机会用上下面是正文部分。有位古人说过，人不是在烦的路上，就是正在烦！最近在逛某乎，总是会...
2024-10-17 08:45:35
19
转载 8 个解决移动端 1px 边框困境的方案
您是否注意到 1px 边框在移动设备上有时会显得比预期的要粗？这种不一致源于移动屏幕的像素密度不同。在 Web 开发中，我们使用 CSS 来设置页面样式。但是，CSS 中的 1px 并不总是转换为设备上的物理 1px。这种差异就是我们的“1px 边框问题”产生的原因。罪魁祸首：像素密度每个设备都拥有特定的像素密度，由 devicePixelRatio 测量，它告诉我们物理像素与设备独立像素之间的比...
2024-10-15 08:45:45
29
转载 HTTP 将增加一个新的方法类型！
在传统的 HTTP 协议中，GET 和 POST 是最常用于请求数据的两种方法。然而，它们各自有着一定的局限性。特别是当请求数据量较大时，通过 GET 方法将参数嵌入 URL 中显得不够灵活。另一方面，尽管 POST 方法允许在请求体中传递大量数据，却无法保证操作的幂等性和安全性。为了弥补这些不足，HTTP 工作组提出了一种新的方法——QUERY，该方法既能承载大量请求数据，又能保证请求的幂等性和...
2024-10-14 08:45:35
32
转载 Webpack 性能优化方案看这篇就够了！
无论在面试还是内部晋升，性能优化方案 一直都是非常重要的部分。性能优化可以分为很多种，比如：打包工具（webpack || vite）性能优化访问速度优化用户感知优化代码标准化...正文在了解 webpack 的性能优化之前，我们需要先对性能优化有一个总体的认知，总共分为 3 点：在业务开发中，不要过早的考虑性能优化，而且业务开发大部分时候都不需要进行性能优化。因为 vue-cli 这些脚手架已经...
2024-10-11 08:45:51
103
转载 简化 Chrome 扩展程序开发：无需 CRA 即可添加 React
本文译者为 360 奇舞团前端开发工程师原文标题：Simplify Chrome Extension Development: Add React without CRA 原文作者：Kristian Ivanov 原文地址：https://dev.to/k_ivanow/simplify-chrome-extension-development-add-react-without-cra-5h...
2024-10-09 08:45:16
305
转载 前端实现文本对比，并高亮显示差异！
你有没有想过，常见的代码差异对比是如何都实现的呢？其实这里面涉及到非常复杂的文本对比算法，本文就来看看如何通过现有工具库 jsdiff + diff2html 实现文本对比，并高亮显示差异！文本对比文本对比可以借助 jsdiff 来实现，jsdiff 是一个 JavaScript 库，用于实现文本差异比较。这个库提供了多种方法来计算和展示两个文本之间的差异，可以用于多种文本差异比较的场景，比如版本...
2024-10-08 08:45:15
201
转载 （已开源）开发了一个纯前端在线代码编辑器、制作一个炫酷动画收藏网站
距离上次在掘金写作已经过去了很长时间，这段时间里，我也没有开发什么有意思的项目。最近终于有了些空闲时间，我决定学习一下NuxtJs 3。虽然它已经发布有一段时间了，但因为工作中没有机会使用，我只能在业余时间去研究。每次学习新技术时，如果只是死记硬背，往往难以真正掌握。因此，我决定和以往一样，通过制作一个小Demo来加深理解。这次我选择了一个纯前端的项目，想要实现一个在线代码编辑器，也就是常说的Pl...
2024-09-25 08:45:23
215
转载 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
209
转载 这几个前端组件库有点厉害！
今天给大家推荐几款的后台管理系统开箱即用的组件库，基于ElementUI二次封装，开发必备Headless UIHeadless UI是一款出色的前端组件库，专为与 Tailwind CSS 集成而设计。一组完全无样式、完全可访问的 UI 组件，可以自由的引入进你的项目，支持Vue和React。项目特点无样式干扰 - 不带预设样式的组件，便于结合 Tailwind CSS 自定义风格。高度可访问...
2024-09-23 08:45:36
65
转载 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
279
转载 响应式监听localStorage存储？封装个自定义Hook不就好了！
背景项目上有个更改时区的全局组件，同时还有一个可以更改时区的局部组件，想让更改时区的时候能联动起来，实时响应起来。其实每次设置完时区的数据之后是存在了前端的 localStorage 里边，时���组件里边也是从 localStorage 拿去默认值来回显。如果当前页面不刷新，那么时间组件就不能更新到最新的 localStorage 数据。怎么才能让 localStorage 存储的数也变成响应式...
2024-09-18 08:45:22
125
转载 重新学习 TypeScript 类型系统
很多开发者已经将 Typescript 加入到自己的项目里进行开发，初衷是为了项目在开发时拥有类型检查能力。TypeScript 通过易上手且功能强大的类型系统，为 JavaScript 提供了强大的类型检查能力。在类型的帮助下，我们无需实际运行代码，就能通过类型的流转观察到变量的值是如何改变的。但往往现实的情况是，随着增加的类型越来越多，类型报错越来越多，不得已改为any类型，或者增加 // ...
2024-09-12 08:45:34
404
转载 如何检查前端项目和node项目中未被使用的依赖包
随着前端项目中使用的依赖包越来越多，而其中一部分依赖包可能并未被项目所使用，手动查找这些依赖包既耗时又繁琐。未使用的依赖包会增加项目的大小，这可能会导致下载和安装你的应用所需的时间更长。并且在构建项目时，构建工具需要处理所有的依赖包。未使用的依赖包可能会不必要地增加构建时间，特别是在大型项目中。编写脚本来识别未使用的依赖包Depcheck 是一款用于分析项目中依赖关系的工具，它可以帮助我们找出以下...
2024-09-09 08:45:34
77
转载 前端代码规范- Commit 提交规范
什么是约定式提交约定式提交（Conventional Commits）是一种用于代码版本控制的规范，旨在通过明确和标准化提交信息来提高代码协作质量和效率。其基本原则是通过规定提交信息的结构和语义来提高代码版本控制的可读性、可维护性和自动化程度。约定式提交规范通常要求提交信息包括一个描述性的"类型"、一个可选的"作用域"、一个用于简洁说明的"主题"，以及可选的"正文"和"尾部"等组成部分。这些组成部...
2024-09-03 08:45:38
342
转载 2024 JavaScript 调试参考文档
使用断点暂停代码，设置断点，以便您可以在代码执行过程中暂停代码。暂停时检查值执行暂停时，调试程序会评估当前函数中的所有变量、常量和对象，直到达到某个断点。调试程序会在相应声明旁边显示内嵌的当前值。您可以使用控制台查询已求值的变量、常量和对象。要点：执行暂停时，您还可以重启当前函数，甚至对其进行实时修改。悬停时预览类/函数属性执行暂停时，将鼠标悬停在类或函数名称上可预览其属性。单步调试代码代码暂停后...
2024-09-02 08:45:29
591
转载 Vue3 组件封装的一些技巧和心得
在日常开发的过程中，使用Vue的组件进行业务拆分，代码解耦是一个很好的选择；今天就来分享一下我在使用Vue3进行组件封装的一些技巧和心得，希望能够帮助到大家；1. 组件特性在Vue中组件是一个独立的实例，每个组件都有共通点，就是：属性、插槽、事件、方法；在日常我们使用第三方组件库的时候，组件库的文档都会说明上面四个特性，而组件封装就是围绕这四个特性进行的；2. 组件封装2.1 组件继承很多情况下，...
2024-08-30 08:45:40
540
转载 50个开发人员都应该知道的 React.js 超级技巧（下）
接上期的内容我们把后面剩下的25个内容分享完，希望这些内容能够对你有所帮助。26. 使用 useEffect 处理异步调用问题：您需要处理组件内的异步操作，例如，获取数据。解决方案：使用 `useEffect` 钩子来处理异步调用并管理组件生命周期。```jsxconst DataFetcher = ({ url }) => {const [data, setData] = useSta...
2024-08-29 08:45:31
321
转载 面试官：如果一个NPM包部分功能不满足需求，如何修改其部分功能~
对第三方包进行修改以适应特定需求是一个常见的场景。尽管直接修改 node_modules 中的代码是可能的，但这种做法并不推荐，因为这些改动在下次运行 npm install 或更新包时会丢失。接下来的内容中，我们将来讲解一下处理这种情况的几种推荐方法。使用 Fork最常见的方法就是 Fork 源代码，通过在 GitHub 上或其他托管平台上 Fork 第三方包的源代码库。对其源代码进行修改，修改...
2024-08-28 08:45:21
75
转载 飞书一键复制网页内容为图片原理
很多2C的移动端H5应用，都会有邀请好友、分享之类的，通常会在前端实时生成一副海报图片，用户可以分享到朋友圈等，这类需求都需要解决前端DOM转图片的问题。今天带来一篇文章，作者从飞书的一键复制网页内容为图片，层层分解前端涉及到的技术点，希望大家看完有收获。下面是正文部分。李经理在使用飞书时无意中发现,飞书竟然支持一键复制网页内容到剪贴板的功能。他立即叫来了公司的前端开发小王,兴致勃勃地说:"小王啊...
2024-08-26 08:45:36
82
转载 牛啊牛啊！大佬用Tauri开发一个即时通讯软件
这段时间正在学习桌面端开发，目前了解了Electron和Tauri,在搜索教程的时候发现了一位大佬用Tauri开发了个即时通讯的软件，并且技术栈用的也是VUE3和TypeScript，所以今天就给大家分享一下这个项目——HuLaHuLaHuLa 是一个基于 Tauri、Vite 5、Vue 3 和 TypeScript 构建的即时通讯系统。它利用了 Tauri 的跨平台能力和 Vue 3 的响应式...
2024-08-22 08:45:19
98
转载 没有轮子就自己造一个，用 fabric 写一个标尺
今天领导给我一个任务，就是要求画布上面需要增加一个标尺，用来识别画布内元素的坐标，于是就开始我的搬砖之旅了。开始想着挺简单的，不就是对画布进行刻度标记吗，写着写着发现有点不连贯了，于是就开始在网上找轮子，找了一圈发现没有合适的，那就只能靠自己了。先来看效果（按住 alt + 鼠标左键 拖动画布）：1. 网上的资料任何需求肯定是先要在网上找一圈的，发现很多设计的网站都有实现了这样的功能，例如墨刀的原...
2024-08-21 08:46:00
59
转载 写出好代码的底层逻辑
程序员安身立命的手艺就是写代码，可多少人知道如何才能写出好的代码呢？这几年也做过很多次的代码 CR，可好代码的标准在哪里呢？我们在做 CR 的时候，其实只是停留在代码的表面，主要是跟规范相关的点：命名、代码行数、代码写法、注释如何，这些其实都是可以用 ESLint 做规范去解决的，也很容易形成习惯。如果在这个基础上，每个人都做得不错的情况下，那到底什么是决定了代码的好坏呢？在想这个问题之前，我们得...
2024-08-20 08:45:42
65
转载 深入了解Vite：依赖预构建原理
前言前面我们有提到Vite在开发阶段，提倡的是一个no-bundle的理念，不必与webpack那样需要先将整个项目进行打包构建。但是no-bundle的理念只适合源代码部分（我们自己写的代码），vite会将项目中的所有模块分为依赖与源码两部分。依赖：指的是一些不会变动的一些模块，如：node_modules中的第三方依赖，这部分代码vite会在启动本地服务之前使用esbuild进行预构建。esb...
2024-08-19 08:45:48
68
转载 如何实现一个分词器
如何实现一个分词器在开发代码补全插件的过程中，根据项目需要，我实现了一个分词器，本文将介绍分词器的具体实现细节。一、什么是分词器？分词器是 NLP（natural language processing，自然语言处理）领域的一个重要部分，它可以把一段文本转换为小的单元，称为 token 。token可以是单词、字符、标点符号等。在基于 Transformer 的 LLM （Large Langua...
2024-08-16 08:45:16
67
转载 非常有用的 48 个 JavaScript 代码片段，值得收藏！
日常工作上，大家经常都会保存一些自己常用的代码片段，比如数字每3位添加逗号、日期格式化、解析location.query或location.hash为JSON对象等等。今天带来一篇外网非常火的文章，收集了JavaScript中48个常用的代码片段，同学们可以学习下，部分片段在面试中也经常遇到。下面是正文部分。该项目来自于 Github 用户 Chalarangelo，目前已在 Github 上获得...
2024-08-15 08:45:36
61
转载 什么？原来前端错误上报这么简单！！
前言项目上线之后，用户如果出现错误（代码报错、资源加载失败以及其他情况），基本上没有办法复现，如果用户出了问题但是不反馈或直接不用了，对开发者或公司来说都是损失。由于我这个项目比较小，只是一个迷你商城，所以不需要收集很复杂的数据，只需要知道有没有资源加载失败、哪行代码报错就可以了，市面上有很多现成的监控平台比如sentry，在这里我选择通过nodejs自己搭一个服务。概述我的项目是使用Vue2写的...
2024-08-14 08:45:28
64
转载 50个开发人员都应该知道的 React.js 超级技巧（上）
React.js 是一个用于构建用户界面的流行 JavaScript 库，它提供了丰富的功能来增强你的开发工作流程。这篇文章，我们将以问题和解决方案的形式呈现了 50 个基本技巧、提示和窍门，并进行了详细说明，以帮助您充分利用 React。但是因为文章篇幅有限，我们将近50个基本技巧拆开了为上下两篇文章，每篇文章分享25个技巧，今天这篇就是50个技巧的前25个内容。那么，我们现在就开始吧。1. 组...
2024-08-13 08:45:56
85
转载 渲染树的形成原理你真的很懂吗？
什么是DOMDOM是Document Object Model（文档对象模型）的缩写W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。-这是W3Cschool给的概念看了上面的概念好像太“官方”，解释就是 DOM 是对 HTML 文档结构化的表述，后端服务器返回给浏览器渲染引擎的 HTML 文件字节流是无法直接被浏览器渲染引擎理解的...
2024-08-12 08:46:01
44
转载 你不知道的 async、await 魔鬼细节
0、前言关于promise、async/await的使用相信很多小伙伴都比较熟悉了，但是提到事件循环机制输出结果类似的题目，你敢说都会？试一试？????1：asyncfunctionasync1(){awaitnewPromise((resolve,reject)=>{resolve()})console.log('A')}a...
2024-08-09 08:46:00
49
转载 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
55
转载 前端构建系统浅析
开发者编写JavaScript代码，而浏览器运行JavaScript代码。从根本上说，前端开发不需要构建步骤。那么，为什么现代前端需要构建步骤呢？随着前端代码库越来越庞大，以及开发者体验越来越重要，直接将JavaScript源码传输给客户端会带来两个主要问题：不支持的语言特性：由于JavaScript在浏览器中运行，而浏览器种类繁多、版本各异，每增加一种语言特性，能运行你JavaScript的客户...
2024-08-07 08:45:41
45
转载 面试官：如何防止接口重复请求？我给出了三个方案！
前言虽然大部分的接口处理我们都是加了loading的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做全局处理。下面就来总结一下这次的防重复请求的实现方案：方案一这个方案是最容易想到也是最朴实无华的一个方案：通过使用axios拦截器，在请求拦截器中开启全屏Loading，然后在响应拦...
2024-08-06 08:45:17
82
转载 面试官：post为什么会发送两次请求？
之前有人跟我们说，出去面试的时候，有时候会遇到一些让人头疼的问题，比如有一次去字节面试，面试官就问了一个让他很奇怪的问题：“为啥POST请求有时候会发送两次呢？”这个问题听起来挺玄乎的，但其实用大白话来说，原因还挺简单的。咱们这就来聊聊这个事儿。首先，得明白啥是POST请求。POST请求就是咱们在网上干点啥事儿，比如提交个表单、上传个文件啥的，得跟服务器说：“嘿，我这儿有点东西，你给我处理一下。”...
2024-08-05 08:45:20
62
转载 Node.js + typescript 写一个命令批处理辅助工具
1.背景工作中遇到这样一些场景：在php混合html的老项目中写css，但是css写着不太好用，然后就想使用预编译语言来处理，或者写上ts。然后问题来了: 每次写完以后都要手动执行一次命令行把文件编译成css文件，然后又要再输入一行命令把css压缩添加前缀；或者把ts编译成js，然后js压缩混淆。那么有没有办法不用手动输入命令行呢？如果只是为了不手动输入的话，那么可以在vscode上安装compi...
2024-08-01 08:45:57
49
转载 不到20行js实现高性能图片懒加载
什么是懒加载相信大家都知道，一句话概括，就是当需要出现的时候再加载。当页面上有很多图片（即：有很多img标签）的时候，浏览器会依次执行get请求拿到每个图片的二进制流，这实际上是在消耗用户的流量和服务器带宽。而不管是pc设备还是移动端设备，屏幕大小总是有限的，无法一次性看到所有图片，那么看不到的图片就没必要加载，等滚动屏幕，img元素进入浏览器可视区域时再加载。基本原理那如何做到这一点呢？我们知道...
2024-07-31 08:45:55
95
转载 JavaScript 的模板字符串
字符串插值JavaScript 中使用反引号 ` 包裹的字符串叫模板字符串（template literals）。人们常用它拼接变量和字符串，即所谓的字符串插值（string interpolation）。在使用字符串插值时，使用 ${} 包裹变量或表达式，它是变量的占位符。多行文本模板字符串支持多行文本（multi-line strings）。嵌套模板它还支持嵌套模板（nesting templ...
2024-07-30 08:45:19
60
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人