- 博客(2091)
- 收藏
- 关注
RSS订阅转载 【CSS】2113- 快速了解 CSS light-dark 函数及其应用
介绍一个和主题密切相关的CSS特性：light-dark，有了它，可以更灵活的适配各种主题模式。一、prefers-color-scheme一般来讲，网站会有三种主题模式，白天、黑夜、自动跟随系统，比如下面的MDN官网前面两者是固定的，不会跟随系统变化。这里简单实现一下三种主题模式，假设有这样一个结构<body> <h1>前端侦探</h1></b...
2024-07-26 22:26:49
转载 【AI】2112- 一文带你了解 Chrome AI
本文作者系360奇舞团前端开发工程师在人工智能迅猛发展的今天，Google Chrome 正在通过其前沿的技术推动浏览器体验的革新。特别是 Gemini 大模型作为 Chrome 的核心AI技术之一，正引领着智能化应用的新时代。本文将深入探讨 Gemini 大模型及其在 Chrome 浏览器中的应用，涵盖 Built-in AI 、DevTools AI 以及如何在网页中直接调用 Gemini A...
2024-07-25 19:37:27
转载 【总结】2111- 总结 3 种如何防止接口重复请求的方案！
前言虽然大部分的接口处理我们都是加了loading的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做全局处理。下面就来总结一下这次的防重复请求的实现方案：方案一这个方案是最容易想到也是最朴实无华的一个方案：通过使用axios拦截器，在请求拦截器中开启全屏Loading，然后在响应拦...
2024-07-24 19:31:42
2
转载 【React】2110- React 性能优化十大总结
本文转载于稀土掘金技术社区——敲代码的彭于晏前言性能优化是软件开发中永远不会过时的话题，本篇将介绍在React编码过程中需要注意的性能优化点。鉴于图片懒加载、虚拟滚动列表等已成为广为人知的通用性能优化手段，本文将不再赘述这些内容。1. memomemo允许组件在 props 没有改变的情况下跳过重新渲染默认通过Object.is比较每个prop，可通过第二个参数，传入自定义函数来控制对比过程con...
2024-07-23 09:40:23
4
转载 【总结】2109- 手把手教你写一个前端脚手架
作者：猪头切图仔https://juejin.cn/post/7260893255189758010引言脚手架是什么，相信各位已经熟悉得不能再熟悉了，毕竟无论是vue开发者（vue-cli）还是react（create-react-app）开发者，他们都有各自的脚手架，个人虽是用react更多，但不得不说是更喜欢vue-cli的，它的插件机制非常有意思，虽不如webpack的plugin那么方便，...
2024-07-22 19:53:41
7
转载 【总结】2108- 写一个倒计时功能刷掉了80% 的人
阿里的大佬自己说的在面试时候必问的一个题目，其实这个问题不仅是在面试中，也在我们的业务里也会经常用到，所以才会写这么一篇文章，那么到底如何才能写一个完美的倒计时呢？首先我们在写倒计时的时候必须要考虑到两点：准确性、性能。接下来我们来一步一步实现一个准确的定时器。setInterval：我们先来简单实现一个倒计时的函数：functionexample1(leftTime){lett...
2024-07-21 17:15:52
16
转载 【总结】2107- Node.js + typescript 写一个命令批处理辅助工具
作者：掘金 - 用户名还没想好https://juejin.cn/post/69305658603484610631.背景工作中遇到这样一些场景：在php混合html的老项目中写css，但是css写着不太好用，然后就想使用预编译语言来处理，或者写上ts。然后问题来了: 每次写完以后都要手动执行一次命令行把文件编译成css文件，然后又要再输入一行命令把css压缩添加前缀；或者把ts编译成js，然后...
2024-07-20 12:46:51
12
转载 【ES】2106- 重磅更新！ECMAScript 2024 全新特性全面解析
转自：OSC开源社区（oschina2013）2024 年 6 月 26 日，第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范，这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2024 都有哪些新特性吧！1. Group By 分组Map.groupBy()将可迭代对象分组为一个新的Map，Map中的key由回调提...
2024-07-19 20:48:37
11
转载 再见了JS、TS！前端Rust已成风气！
2024下半年，产业转型加速，互联网进一步内卷已成风气，前端的突破点和进阶方向在哪？长期来看，优秀的前端首先要有箭头思维。箭头的方向就是我们发展的方向，箭头的长短就代表了那个方向上的能力大小。不要只盯着老板、公司的向量看，其实自己也是个向量，应该有自己的发展方向。落地到技术层，未必只专注现公司业务所需的技术，更要拉高视野，体系化打开学习思路。好比很多人还在撸JS源码，但从去年起，「Rust」已是高...
2024-07-18 08:30:53
12
转载 【总结】2105- 前端代码规范- Commit 提交规范
什么是约定式提交约定式提交（Conventional Commits）是一种用于代码版本控制的规范，旨在通过明确和标准化提交信息来提高代码协作质量和效率。其基本原则是通过规定提交信息的结构和语义来提高代码版本控制的可读性、可维护性和自动化程度。约定式提交规范通常要求提交信息包括一个描述性的"类型"、一个可选的"作用域"、一个用于简洁说明的"主题"，以及可选的"正文"和"尾部"等组成部分。这些组成部...
2024-07-17 15:44:58
14
转载 【总结】2104- 高效传输大的 JSON 数据，流式处理真香！
什么是 TextDecoder APITextDecoder[1] API 是一个用于将二进制数据（通常是 ArrayBuffer 或 TypedArray）解码为字符串的 JavaScript API。它是 Web 平台的一部分，主要用于处理文本编码的解码工作。比如，从服务器接收到的流式数据、文件数据等。为什么使用 TextDecoder API在处理 Web 应用中的二进制数据时，通常需要将这...
2024-07-16 21:31:54
16
转载 【AI】2103- 11 款热门 AI 视频生成工具，文生视频、图生视频都有！
关注 “AI 工具派”探索最新 AI 工具，发现 AI 带来的无限可能性！最近很多小伙伴在群里了解 AI 视频生成工具，这几天 Chris 精心整理了 11 款优秀的 AI 视频生成工具，每款工具都有各有特色，大家可以体验看看。有需要加入 AI 工具交流群，可以私聊我。往期推荐：9 款热门 AI PPT 生成工具8 款热门文本转语音 AI 工具8 款强大 AI 图片无损放大工具5 款优秀的 AI ...
2024-07-15 22:55:05
107
原创 【工具】2102- es-toolkit：一个现代 JavaScript 工具包，体积更小，内置 TypeScript 支持...
介绍es-toolkit 是一款先进且具备高性能的现代化 JavaScript 实用工具库，其拥有较小的捆绑包规模以及强大的类型注解，同时还提供了一系列非常不错的函数，适合日常使用。相较于 lodash 等替代方案，es-toolkit 所提供的包体积显著减小（最多降低 97%），且运行时性能提升 2 - 3 倍。大部分功能是借助最新的 JavaScript 特性实现。工具地址：https://e...
2024-07-14 11:02:44
992
转载 【总结】2101- 手把手教你写一个前端脚手架
引言脚手架是什么，相信各位已经熟悉得不能再熟悉了，毕竟无论是vue开发者（vue-cli）还是react（create-react-app）开发者，他们都有各自的脚手架，个人虽是用react更多，但不得不说是更喜欢vue-cli的，它的插件机制非常有意思，虽不如webpack的plugin那么方便，但也很强大。不过再讲这强大的功能之前，原谅我先水一篇脚手架的基础。脚手架会分两篇来讲，本篇为基础篇，...
2024-07-13 18:46:07
11
转载 【Web技术】2100- 图片碎片化渲染特效实现
图片作为web非常重要的视图，大家应该都很熟悉，通常应用首页都有banner之类的图片，有时候PM会要求我们加上一些特效，渐变、缩放等等。今天带来一篇关于图片渲染特效的文章，作者从原理开始步步深入讲解了图片栅格化渲染动画的实现，在一些简单的图片拼图类游戏中，也能用上文中的实现，希望大家能有收获。下面是正文部分。写在开头本文将分享一个图片碎片化展示的效果，具体效果如下，请诸君按需食用。原理这种特效早...
2024-07-12 09:56:35
13
转载 【总结】2099- 前端请求如何避免明文传输？
分享一篇常见的面试题，前端开发中的数据传输要怎么确保安全呢？正文连夜肝文，面试以来最尴尬的一次，事情是这样的，最近有开始面稍微有难度一点岗位，本文的主题出自北京某一小厂的正式岗面试题，薪资水平大概开在10k-12k。之前一直是投的比较小的公司比较简单的实习岗位，这个是无意间投出去的一个，由于是 0 年经验小白*1，结果没想到简历过筛，硬着头皮上了。结果很惨，40分钟的面试有 80% 不会回答，像大...
2024-07-11 17:13:47
47
转载 【总结】2098- 图片相关的前端代码规范
在前端项目中，图片资源是构成网站视觉效果的重要元素。合理的图片使用规范不仅可以提高页面加载速度，还可以增强用户体验。本文将详细介绍前端项目中图片，包括图标（Icon）和大图等的使用规范。1. 图片格式选择如下是各图片类型的优缺点，业务开发中要根据实际的场景选择合适的图片格式。能支持WebP的场景推荐WebP，其他推荐使用PNG。JPEG适用于颜色丰富的图片，如摄影作品。不支持透明。PNG支持透明，...
2024-07-10 09:16:55
35
转载 【工具】2097- 5 万star！是时候升级下你的终端工具了！
作者：Alienware^https://blog.csdn.net/weixin_45417821/article/details/122579794Tabby 是一名老外在 Github 开源的终端连接的工具，至今已经累积 55K+ star。Tabby 的功能特性大概有：支持多平台，Windows、MacOS（Intel 芯片/M1 芯片）、Linux 都有对应的安装包的；自带 SFTP 功...
2024-07-09 10:10:59
27
转载 【JS】2096- Promise：为什么没有取消？
在JavaScript中，Promise是用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。然而，JavaScript的Promise并不提供内置的取消（cancel）机制。Promise是经过了深思熟虑，才不自带取消功能的！！！这篇文章，将围绕着设计的哲学，以及从状态机的角度，解释为什么不需要cancel。即使如此，文章最后部分，还是会提供一些方法，来实现一下cancle...
2024-07-08 09:41:27
43
转载 【总结】2095- 如何开发一款JSSDK
本文作者系360奇舞团前端开发工程师JSSDK的定义与分类什么是JSSDKSDK是Software Development Kit（软件开发工具包）的缩写，JSSDK是为了帮助前端实现特定需求，而向开发者暴露的一些JS-API的集合，开发者可以通过它在网页中集成和使用某些特定的功能，例如社交分享、地图服务、支付功能等.它通常包括一下模块：JavaScript库：这是 JSSDK 的核心部分，包含了...
2024-07-07 21:27:27
16
转载 【实战】2094- 使用Canvas封装图片压缩功能！
作者：爱泡澡的小萝ト原文：https://juejin.cn/post/7220310687481495612最近在学习和工作中遇到这样一个场景：如何将前端上传的图片进行压缩传递给服务端？因为此前从未了解过图片压缩的功能，所以也是带着好奇进行了一番学习，那么我的解决思路如下展示整体思路创建input框实现图片上传将上传的文件转成base64格式前端通过base64进行原始图片展示，并将此图片进行压...
2024-07-06 23:15:20
12
转载 一套资料吃透 React+JavaScript+Vue3！
最近在网上看到很多人找前端工作一直碰壁，甚至有些人心态崩溃都产生转行的想法，今天通过这篇文章，以一个8年经验老开发的角度，分享一套大而全的面试资料合集。不可否认，现在找工作要比之前难一些，但这是经济下行带来的，你不干前端，去干别的，也一样不好找工作。那些说什么前端已死、互联网已死的请绕道。这套资料涵盖了「中大厂面试考点、难点」，从八股文到框架底层和面试真题都有，400+面试题，3套+面试资料，领取...
2024-07-05 08:30:40
12
转载 【总结】2093- 前端生成二维码，三分钟搞定！
本文来分享 5 个用于生成二维码的 JavaScript 工具库，助你快速生成二维码！node-qrcodenode-qrcode是一个用于生成二维码的Node.js库，它支持多种数据格式，并且可以将生成的二维码导出为各种图像格式，如PNG、JPEG、SVG和Data URI，其适用于服务端和客户端。node-qrcode 的特点如下：跨平台支持：既可以在服务端运行，也可以在客户端上运行。命令行工...
2024-07-04 18:19:16
15
转载 【总结】2092- 一种更好的前端组件结构：组件树
自很久以前遵循互联网上的建议以来，我一直采用了某种“能工作就行”的组件结构。场景 让我们首先想象一个简化的前端应用程序目录结构，如下所示：public/some-image.jpgpages/index.tsxcomponents/Heading.tsxLogo.tsxLayout.tsxBoxContainer.tsxFooter.tsx问题所在 ...
2024-07-03 08:02:57
19
转载 【React】2091- React 19 可能会让你的网站变得更慢！
两个月前，备受广大开发者期待的 React 19 宣布发布：但除了各种亮眼的新功能和一些改进优化之外，还有一个小的改变直到上周才被大家注意到，这这个改动可能会显著降低许多依赖 React 的网站的性能。一切都始于这条推文：Dominik（又名 TkDodo），是被广泛使用的 TanStack Query 的核心维护者之一。他主要提出的问题就是：React 19 禁用了在同一 <Suspens...
2024-07-02 23:16:42
16
转载 【总结】2090抛开插件，你真的懂拖动怎么实现吗？
本章将分享一些关于 Javascript 中拖动的内容，探索拖动过程的奥秘。????元素拖动刚开始，咱们循序渐进，先来实现一个最简单的功能，让一个元素变成可拖动元素。布局与样式：<!DOCTYPEhtml><html><head><title>元素拖动</title><style>#drag{...
2024-07-01 08:13:13
14
转载 【总结】2089- 从用户体验到细节之美：移动端弹窗设计
关于本文作者：@散落的那些原文：https://www.zcool.com.cn/article/ZMTYwNDQ2NA==.html在当今的移动应用设计中，弹窗作为一种重要的交互元素，对于提升用户体验和增强应用的可用性具有举足轻重的作用。然而，弹窗设计并非简单的堆砌信息，它需要考虑到用户的使用习惯、心理预期以及操作流程等多个方面。因此，如何设计出优秀的移动端弹窗，成为了一个值得探讨的话题。本文旨...
2024-06-30 17:42:21
14
转载 【总结】2088- 前端权限控制，从设计到实践，详细介绍
1.权限控制的方案选择。做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。在后台管理系统中，实现权限控制可以采用多种方案：权限方案类型描述基于角色的访问控制（Role-Based Access Control，RBAC）是一种广泛采用的权限控制方案。系统中定义了不同的角色，每个角色具有一组权限，而用户被分配到一个或多个角色。通过控...
2024-06-29 16:36:05
27
转载 【ES】2087- ECMAScript 2024 正式发布，新特性一览！
2024 年 6 月 26 日，第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范，这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2024 都有哪些新特性吧！Promise.withResolvers()Object.groupBy / Map.groupByString：isWellFormed() / toWellF...
2024-06-28 13:08:36
38
转载 【AI】2086- MarsCode：基于豆包大模型的智能开发工具，超详细测评来了！
关注 “AI 工具派”探索最新 AI 工具，发现 AI 带来的无限可能性！近期推荐PPT：Tome｜美图PPT｜AiPPT｜Gamma图片：Pikaso｜图片修复｜BgSub｜Dreamina学习：Elmo｜Grammarly｜灵动翻译｜DeepL编程：Codeium｜通义灵码｜SafurAI｜Comate其他：TinyWow|PixVerse|Toolkit|SeekAI|腾讯帮...
2024-06-27 21:46:02
320
转载 【总结】2085- 面试官：如何防止接口重复请求？我给出了三个方案！
前言虽然大部分的接口处理我们都是加了loading的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做全局处理。下面就来总结一下这次的防重复请求的实现方案：方案一这个方案是最容易想到也是最朴实无华的一个方案：通过使用axios拦截器，在请求拦截器中开启全屏Loading，然后在响应拦...
2024-06-26 08:57:40
22
转载 【总结】2084- 探索Word文档导入导出的前端实现方案
最近由于AI应用的高速发展，使得文档/知识库成为了AI的首选试炼场。比如用AI提取PDF的大纲和关键内容，用AI总结电子书的内容，AI对DOC文档进行润色，优化等，这些都离不开对文档的解析和处理。那么前端能不能实现对文档的解析和处理呢？答案是肯定的，接下来我就和大家分享一下:前端如何解析Word文件基于HTML，一键导出为Word文档当然口说无凭，我已经在Nocode/WEP文档知识引擎中把Doc...
2024-06-25 09:39:46
31
转载 【CSS】2083- Tailwind轻松实现夜间模式，能跟随系统又能手动控制！
作者：evanryuu原文：https://juejin.cn/post/7312727134297210914通过本文，你将会收获到：如何让vscode不会再对 @tailwind , @apply 之类的属性报错如何让你的应用既能跟随系统设置，又能手动设置夜间模式如果本文对你有所帮助，希望你能动动小手点个免费的赞，这会让我更有动力进行写作，谢谢你！VSCode配置：这一步可以让你的 @appl...
2024-06-23 10:32:29
41
转载 【AI】2082- 豆包 AI 新功能大盘点，一起来体验看看
关注 “AI 工具派”探索最新 AI 工具，发现 AI 带来的无限可能性！近期推荐PPT：Tome｜美图PPT｜AiPPT｜Gamma图片：Pikaso｜图片修复｜BgSub｜Dreamina学习：Elmo｜Grammarly｜灵动翻译｜DeepL编程：Codeium｜通义灵码｜SafurAI｜Comate其他：TinyWow|PixVerse|Toolkit|SeekAI|腾讯帮...
2024-06-22 11:56:12
143
转载 【JS】2081- 8 个关于 Promise 高级用途的技巧
我发现很多人只知道如何常规地使用promise。在js项目中，promise的使用应该是必不可少的，但我发现在同事和面试官中，很多中级以上的前端仍然坚持promiseInst.then()、promiseInst.catch()、Promise等常规用法等等。即使是 async/await 他们也只知道它但不知道为什么要使用它。但实际上，Promise 有很多巧妙的高级用法，并且一些高级用法在 a...
2024-06-20 19:35:20
30
转载 【总结】2080- Tailwind 实现夜间模式，支持跟随系统和手动控制
作者：evanryuu原文：https://juejin.cn/post/7312727134297210914通过本文，你将会收获到：如何让vscode不会再对 @tailwind , @apply 之类的属性报错如何让你的应用既能跟随系统设置，又能手动设置夜间模式如果本文对你有所帮助，希望你能动动小手点个免费的赞，这会让我更有动力进行写作，谢谢你！VSCode配置：这一步可以让你的 @appl...
2024-06-18 21:26:18
30
转载 【总结】2079- 前端构建工具大盘点
今天来盘点一下前端构建工具。BunBun 是一个爆火的 JavaScript 运行时，它不仅仅局限于运行时，更是一个全能的工具集，集成了包管理、测试、构建和转译等多项功能。作为构建工具，Bun 的速度表现尤为出色，其性能远超其他主流构建工具。受到 edbuild 的启发，Bun 不仅继承了其优秀的设计理念，还提供了与之兼容的插件API，确保了生态的延续性和扩展性。另外，Bun 引入了JS宏的概念，...
2024-06-17 10:20:23
41
转载 再见了 Vue 3，前端AI已成气候！
谁都没想到，今年前端招聘的爆发期不在金三银四，而是在5月之后！前几天跟大厂的朋友也聊起这事，他说5月只是一个开始，6月后放出的岗位会更多，但随之而来是新的岗位要求！对于前端，虽然Vue3.0、React框架技术点和面试题很重要，但现在只懂几个框架源码远远不够了。听朋友说，接下来的前端开发，将围绕「新质生产力」趋势展开，大厂面试会问到好几个新方向：面试题1：企业级前端【低代码开发平台】的应用与实践（...
2024-06-17 10:20:23
29
转载 【总结】2078- 总结 2024 年前端框架大更新
大家好，我是 CUGGZ。在刚刚举办的 2024 Google I/O 大会上，Chrome 团队成员进行了题为《探索JavaScript框架生态系统》的主题演讲。本文就来看看，过去一年，主流前端框架都发生了哪些大事件！随着 JavaScript 框架的不断发展，它们开始在某些关键功能和架构上展现出趋同的态势。这些共性包括基于组件的架构、基于文件的路由以及现代化服务端渲染（SSR）支持。这种融...
2024-06-16 19:54:59
27
转载 【面试】2077- 如何使用JS来计算LocalStorage的容量
转自：程序员Sunday现在的面试总会遇到很多“奇葩”的问题，不过本着“存在即合理”的态度，从“深入JS”的角度来看，这些个性化的面试题还是挺有意思的。所以，咱们今天就来看一个“奇葩”面试题：如何使用JS来计算LocalStorage的容量本文为译文：https://javascript.plainenglish.io/believe-it-or-not-interviewer-asks-me-t...
2024-06-15 16:12:54
23
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人