- 博客(1554)
- 资源 (5)
- 收藏
- 关注
RSS订阅转载 通过可视化彻底搞懂 Promise执行逻辑
JavaScript 中的 Promise 一开始可能会让人感到有些难以理解，但是如果我们能够理解其内部的工作原理，就会发现它们其实是非常易于掌握的。在这篇博客文章中，我们将深入探讨 Promise 的一些内部机制，并探索它们是如何使得 JavaScript 能够执行非阻塞的异步任务。一种创建 Promise 的方式是使用 new Promise 构造函数，它接收一个执行函数，该函数带有 reso...
2024-07-25 08:45:40
7
转载 图片碎片化渲染特效实现
写在开头最近，小编从玩了两年多的游戏中退游了????，本来以为会一直就这么玩下去，和队友们相处很融洽，收获了很多开心快乐的时光????。可惜，游戏的一波更新......准备要开始收割韭菜了，只能无奈选择弃坑了。小编属于贫民玩家，靠着硬肝与白嫖也将游戏号整得还不错，这两天把号给卖了????。玩了两年多，竟然还能赚一点小钱，很开心????。只是...多少有点舍不得的一起组队的队友们，唉。????记录一下，希望未来还有重逢一日吧，也...
2024-07-24 08:45:53
7
转载 贼有意思的前端开源项目
今天来分享 5 个贼有意思的前端开源项目！Inpaint-webInpaint-web 是一款基于 WebGPU 技术和 wasm 技术的免费开源图像修复和图像缩放工具，纯浏览器端实现。该项目使用的技术栈包括：React、Vite、TypeScript、Tailwind CSS 等。Github：https://github.com/lxfater/inpaint-webEarthwormEart...
2024-07-23 08:45:20
10
转载 前端项目路径别名终极解决方案
关于路径别名一个前端项目通常会演变成复杂的嵌套目录结构。因此，使用相对路径导入可能会变得更长且更混乱，这可能会对代码的外观产生负面影响，并让辨识代码的来源变得更加困难，更加重要的是代码文件位置变动相对路径就得改变。使用路径别名即绝对路径导入，不仅解决了理解导入路径的问题，而且还简化了重构期间代码移动的过程，美丽且直观。//fromthisimport{SearchForm}from...
2024-07-22 08:45:51
19
转载 吐槽一下 Vue3 的语法设计
很长一段时间以来，老有人私信跟我说，Vue 很先进，代表了未来，你不要沉迷在 React 这个年老色衰的技术栈里自娱自乐啦，睁开眼睛去看看世界吧，别的技术栈都发展早就比 React 更先进啦！！然后这些人估计都不会相信，我真的有非常认真的去把 Vue 从头到尾学了个遍，甚至 Vue2、Vue3 的原理我也理清楚了... 很多年前，我甚至还在我的付费小册《JavaScript核心进阶》里，聊设计模式...
2024-07-18 08:45:13
18
转载 别想调试我的前端代码！
作为web开发者，我们应该都有这样一个认识：前端代码是公开的，所有人都能拿到我们代码，不能把秘钥等信息写死在前端。为了避免他人轻易看懂前端代码，通常我们会对代码进行压缩、混淆等处理。今天带来一篇文章，作者介绍了几种避免他人调试前端代码的常见方式，感兴趣的同学可以在自己项目里试试。下面是正文部分。这里我们不介绍禁止右键菜单, 禁止F12快捷键和代码混淆方案。无限debugger前端页面防止调试的方法...
2024-07-17 08:45:11
51
转载 业务前端的本质--数据维护
Vue/React 将前端开发从 jQuery 命令式的编程风格带到了声明式的编程风格，开发者只需要描述界面应该是什么样子，Vue/React 就会根据数据的变化自动更新界面。因此对于业务页面只需要关心数据有什么以及引起数据的变化有什么。数据数据主要有两大类，ui 相关和非 ui 相关。ui 相关前端本质上就是将数据可视化，因此定义的变量中一部分就是供页面展示使用的，在 Vue 中会把这些数据定义...
2024-07-16 08:45:10
18
转载 js如何控制一次只加载一张图片，加载完成后再加载下一张
今天看到一个面试题，是关于img图片加载方面的，有必要记录一下。其实关于这个问题，只要知道图片什么时候加载完成就能解决了。通过onload事件判断Img标签加载完成实现逻辑：新建一个Image对象实例，为实例对象设置src属性等，在onload事件中添加此实例对象到父元素中，然后将图片地址数组中的第一个元素剔除，继续调用此方法直到存储图片地址的数组为空。代码constimgArrs=[......
2024-07-15 08:45:26
15
转载 避免写出高耦合低内聚的前端代码
背景今天在修改其他人的一份 vue 前端代码时，在重用一个组件遇到很多问题。主要问题是这个组件很复杂，在组件里面以及组件的子组件里面，有大量不同组件会依赖 状态管理/路由参数 进行更新。这个组件和应用整体的情况基本一样，虽然做了很多封装(大部分 重复/公用 的组件都做了封装)，但总让人感觉代码非常分散，无法聚合(改一个地方可能涉及多处代码, 引用组件需要修改组件的内部逻辑等)。本文尝试从该项目来描...
2024-07-12 08:45:25
15
转载 最近很火的Vue Vine是如何实现一个文件中写多个组件
前言在今年的Vue Conf 2024大会上，沈青川大佬（维护Vue/Vite 中文文档）在会上介绍了他的新项目Vue Vine。Vue Vine提供了全新Vue组件书写方式，主要的卖点是可以在一个文件里面写多个vue组件。相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊径来讲讲Vue Vine是如何实现在一个文件里面写多个vue组件。看个demo我们先来看普通的vue组件，...
2024-07-11 08:45:21
35
转载 21 个整理 React 项目的最佳实践
今天，我们将讨论一些改善React应用程序运行状况的最佳实践。这些规则应用广泛。因此，拥有这些知识势在必行。unsetunset1. 使用JSX速记unsetunset尝试使用JSX速记来传递布尔变量。举个例子，假设你想要控制导Navbar组件的标题可见性。坏return(<NavbarshowTitle={true}/>);好return(<Navbars...
2024-07-10 08:45:16
42
转载 构建更快的 Web 体验 - 使用 postTask 调度器
前言介绍了如何利用 postTask 调度器来提高网页的用户体验和响应速度，通过高效地调度任务和处理优先级来优化页面性能。使用 postTask 可以拆分长任务、预加载资源和提高页面交互性能，让页面更具响应性。同时，文章还介绍了如何在 React 中集成 postTask 调度器来执行不同模式或策略，以进一步优化网页性能。今日前端早读课文章由 @古茗科技翻译分享。正文从这开始～～你有没有经历过打开...
2024-07-09 08:45:29
20
转载 一个新的 HTML 元素：<permission>！
Chrome 126 于近期发布了稳定版本，其中一个比较有意思的更新是给 HTML 带来一个新的元素：<permission> ，它将从这个版本开始试用，并且正在努力走向标准化。今天我们一起来看下这个 <permission> 元素的用法。Web 权限提示的问题当 Web 应用程序需要访问浏览器的高级功能时，需要向用户主动请求许可。例如，当百度地图使用 Geolocatio...
2024-07-05 08:45:48
43
转载 纯前端怎么实现检测版本更新，请看这篇！
背景单页应用（Single Page Application，简称SPA）是一种现代Web应用程序架构，通过动态重载页面中的部分内容来提供更流畅和更响应式的用户体验。由于SPA在客户端（用户的浏览器）运行大量的JavaScript代码，并且与传统的多页应用不同，它不会每次操作都从服务器重新加载整个页面内容，因此在性能和用户体验上有显著优势。然而这种应用也存在一定弊端，譬如当服务端更新时（接口请求体...
2024-07-04 08:45:58
37
转载 都应该会的前端代码规范 - 日志打印规范
在前端开发中，随着项目迭代升级，日志打印逐渐风格不一，合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题，提高开发效率。本文将介绍如何在前端项目中制定日志输出规范。1. 日志等级首先，我们需要定义不同的日志等级，以便根据消息的重要性进行分类。通常，日志等级从低到高可以分为以下几类：DEBUG: 详细的开发时信息，用于调试应用。INFO: 重要...
2024-07-03 08:45:40
25
转载 Chrome 127 内置 AI 大模型，JS 可直接调用！
???????? 重磅消息来袭！Google 将先进的 Gemini 大模型直接嵌入到 Chrome 浏览器中，只需安装一个 Chrome 浏览器，您就能在自己的电脑上免费、无限制地使用 Gemini 大模型的强大能力！???????????? 告别繁琐的在线大模型依赖，从此拥抱高效、便捷的本地 AI 体验！无论是图像识别、自然语言处理还是智能推荐，Gemini 大模型都能轻松应对，让您的生活更加智能化！???????? 重点：可以离线使...
2024-07-02 08:45:20
677
转载 Promise：为什么没有取消？
在JavaScript中，Promise是用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。然而，JavaScript的Promise并不提供内置的取消（cancel）机制。Promise是经过了深思熟虑，才不自带取消功能的！！！这篇文章，将围绕着设计的哲学，以及从状态机的角度，解释为什么不需要cancel。即使如此，文章最后部分，还是会提供一些方法，来实现一下cancle...
2024-07-01 08:45:36
15
转载 脱发秘籍：前端Chrome调试技巧最全汇总
作者：安木夕原文：https://juejin.cn/post/7248118049584316472注：本文测试、截图均为Edge浏览器（内核是Chromium），浏览器内核可了解《有哪些浏览器/内核？[1]》00、基础操作汇总操作类型快捷键/说明切换浏览器标签????Ctrl+1到8切换到对应序号的浏览器标签 ????Ctrl+PgUp/PgDn标签页左右切换浏览器全屏F11(⌘ + shift +...
2024-06-27 08:45:38
38
转载 告别混乱，拥抱高效：Git 分支管理进阶技巧
❝你是否曾经因为版本控制混乱而抓狂？或者在处理临时 bug 时感到无所适从？别担心！今天我们将深入探讨 Git 分支管理及命名规范，帮助你在日常功能开发、周期bug修复、紧急 bug 修复等场景中游刃有余。本文将带你轻松入门，让你成为 Git 分支管理的高手！为什么需要分支管理？在软件开发中，版本控制是必不可少的。版本控制可以记录代码的每一次改动，并允许开发人员在不同版本之间切换。Git 分支管理...
2024-06-26 08:45:29
52
转载 React 全新编译器太好用了！
转载来自前端充电宝React 18 已经发布两年多了，现在终于要迎来 React 19 了。这个版本将引入期待已久的全新 React 编译器！它通过自动化优化来简化前端开发流程，减少手动进行记忆化优化的需求。本文就来看看 React 编译器是什么？它是如何工作的？又带来了哪些好处？React 19 新特性React 19 不仅是向前迈进的一步，而且想要改变开发人员在 React 中构建应用的方...
2024-06-25 08:45:09
42
转载 终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的
前言transform阶段处理完v-for、v-model等指令后，会生成一棵javascript AST抽象语法树。这篇文章我们来接着讲generate阶段是如何根据这棵javascript AST抽象语法树生成render函数字符串的，本文中使用的vue版本为3.4.19。看个demo还是一样的套路，我们通过debug一个demo来搞清楚render函数字符串是如何生成的。demo代码如下：&...
2024-06-21 08:45:09
28
转载 移动端安全区域适配方案
前言什么是安全区域？这个概念是苹果????率先提出来的，因为从iPhone X开始，iPhone正式进入全面屏时代，iPhone手机也就开始出现了刘海和底部的黑条的区域。Android不知道从什么时候开始越来越喜欢模仿iPhone的设计，这也就导致越来越多的机型都有这个安全区域的概念。安全区域(safe area)❝安全区域定义为视图中未被导航栏、选项卡栏、工具栏或视图控制器可能提供的其他视图覆盖的区域...
2024-06-20 08:45:57
57
转载 5 万star！是时候升级下你的终端工具了！
作者：Alienware^https://blog.csdn.net/weixin_45417821/article/details/122579794Tabby 是一名老外在 Github 开源的终端连接的工具，至今已经累积 55K+ star。Tabby 的功能特性大概有：支持多平台，Windows、MacOS（Intel 芯片/M1 芯片）、Linux 都有对应的安装包的；自带 SFTP 功...
2024-06-19 08:45:28
32
转载 什么是微前端
微前端这个名词，第一次被提出还是在2016年底，那是在 ThoughtWorks Technology Radar。这个概念将微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化，富交互化，也就是传说中的SPA(单页面应用)；这样越来越复杂的单体前端应用，背后的后端应用则是数量庞大的微服务集群。被一个团队维护的前端项目，随着时间推进，会变得越来越庞...
2024-06-18 08:45:24
124
转载 低码编辑器中的“拖拽”是如何实现的
本文作者：来自 MoonWebTeam 的acejhli本文编辑：kanedongliu1. 引言低代码编辑器主要有物料系统、配置表单、组件编排三部分组成，实现组件编排核心能力则是拖拽能力，它是编辑器的交互基础，它能极大地提升用户在使用系统时的交互体验，因为它通常意味着用户可以直观地操作界面，实现所见即所得，大大提高了使用效率。更重要的是，这种直观的操作方式也减少了用户的学习成本，让用户在短时间...
2024-06-17 08:46:02
60
转载 Vite 为何短短几年内变成这样？
本文适合对Vite感兴趣的小伙伴阅读。前言在 Web 开发领域，Vite 如今已如雷贯耳。自 2020 年 4 月发布以来，Vite 的人气蒸蒸日上。目前 Vite 在 GitHub 上的收藏数量已超过 64k，每周下载量超过 1200 万次，现在为 Nuxt、Remix、Astro 等大多数开源框架提供支持。尽管众口嚣嚣，我们意识到许多开发者可能仍然不熟悉 Vite 是什么鬼物，也不熟悉 Vit...
2024-06-14 08:45:37
31
转载 前端生成海报图技术选型与问题解决
作者：vivo 互联网大前端团队 - Tian Yuhan本篇文章主要聚焦海报图分享这个形式，探讨纯前端在H5&小程序内，合成海报到下载到本地、分享至社交平台整个流程中可能遇到的问题，以及如何解决。一、引言绝大多数的电商平台都会设计分享裂变的功能，激励用户进行分享，这是一种拉新促活的常见措施。提到分享裂变，就免不了需要生成用户专属的分享链接或者专属海报。当然分享推广的形式多种多样，有文本链...
2024-06-12 08:41:30
41
转载 ESLint 团队即将废除所有格式化规则！
ESLint 是一款提高代码质量的静态分析工具，旨在使代码风格更加一致并避免错误。ESLint 主要包括两大类规则：代码质量规则和格式化规则。不幸的是，以后 ESLint 有且仅有代码质量规则了......2023 年 ESLint 8.53 中，ESLint 官宣废除所有格式化规则，使用此类规则会收到警告。在官方博客中，ESLint 团队提及 ESLint 10 可能会完全废除所有规则，而目前最...
2024-06-11 08:45:11
42
转载 孤影探径，回顾我低代码开源这几年
嗨，同学们，久违了。距离上次更新文章已经有2年了，今天突然有感，回顾下我研究低代码并开源这几年。缘起H5生成器该从哪里说起呢...回想当时我刚进公司的时，因为公司是做文旅的，所以需要大量H5活动页。当时只有活动页管理，单纯用图片、文字、背景图的组成的一个大表单进行配置，非常繁琐、局限。当时正好看到政采云的鲁班平台，大受震撼，所以在当时就萌发了为公司一套H5生成器的想法。于是就从零开始研究，仿照鲁班...
2024-06-07 08:45:17
50
转载 我真的太爱 useOptimistic 这个新 hook 了
如果你之前在开发项目的过程中，被乐观更新的需求折磨过，那么你一定会喜欢 React 19 新出的一个相关的 hookuseOptimistic它让原本实现起来比较困难的乐观更新，变得非常简单。我真的太爱它了！本文主要跟大家分享的内容包括：一、什么是乐观更新二、乐观更新的前提条件与适用场景三、实现乐观更新需要具备的技术条件四、React 19 是如何实现乐观更新的五、案例一：消息发送六、案例二：结合...
2024-06-05 08:48:46
46
转载 在滴滴开发H5一年了，我遇到了这些问题
原文链接: https://juejin.cn/post/7372396174249459750作者: WeilinerLIOS圆角不生效ios中使用border-radius配合overflow:hidden出现了失效的情况：image.png出现此问题的原因是因为ios手机会在transform的时候导致border-radius失效解决方法：在使用动画效果带transform的元素的上一级d...
2024-06-04 08:45:58
30
转载 前端在本地开发还能用https？
该文章是实践了这篇文章 juejin.cn/post/714130… 之后想写的。原文已经讲得很详细了，内容也详实，我只是想分享一下对我而言最简单好用的同时再讲一下为什么这样配置能够生效。前言一般情况下，前端在开发本地项目的时候大都用不到https，但有些特殊情况不同，比如你需要使用service worker，又或者需要使用cookie而后端又设置了secure。nextjs本身提供了直接通过h...
2024-06-03 08:33:11
27
转载 充分利用console.log()
分享一些希望能改进你们日常使用的技巧！将变量包装在对象中不要使用 console.log(url, url2, baz)，而是使用 console.log({ url, url2, baz })。如果你比较这两者，你会发现这有多么有用：拥有 url 和 url2 键可以避免这两个 URL 之间的混淆。在日志前加上唯一字符串前缀在应用程序的多个地方记录日志时，想出一个唯一的前缀并在所有日志中使用它是...
2024-05-31 08:45:17
21
转载 写一个倒计时功能刷掉了80% 的人
阿里的大佬自己说的在面试时候必问的一个题目，其实这个问题不仅是在面试中，也在我们的业务里也会经常用到，所以才会写这么一篇文章，那么到底如何才能写一个完美的倒计时呢？首先我们在写倒计时的时候必须要考虑到两点：准确性、性能。接下来我们来一步一步实现一个准确的定时器。setInterval：我们先来简单实现一个倒计时的函数：functionexample1(leftTime){lett...
2024-05-30 08:48:53
32
转载 来自 React 19 的背刺：forwardRef 被无情抛弃
在之前的版本中，forwardRef 一直是我最爱用的 ref 之一。它在封装组件时非常有用。可是万万没想到，由于使用方式稍微麻烦了一点，在新的版本中，直接被 React 19 背刺一刀，实现同样的功能，以后可以不用它了.... forwardRef 被无情抛弃。本文主要内容包括如下几个部分。React 中的 控制反转 IOCforwardRef 基础知识React 19 中 ref 机制更改，f...
2024-05-29 08:48:58
64
转载 掌握React中的S.O.L.I.D原则：简单示例和最佳实践
大家好，我是梦兽。2024年相信大家已经对React不在陌生，今天梦兽想给大家从软件工程角度S.O.L.I.D原则出发，希望大家以后写组件编码是有一些思路。S:单一职责原则（SRP）一个组件应该只有一个改变的理由，这意味着它应该只有一项工作。示例：用户配置文件组件将职责分解为更小的功能组件。//UserProfile.jsconstUserProfile=({user})=>...
2024-05-28 08:45:12
27
转载 创业一年 ， 一名普通前端的血泪史
讲述我的创业一年的经历，事业有高潮，也有低谷，有喜悦，有历练，酸甜苦辣都尝过 分享出来我的经验，希望对你有所帮助unsetunset前言unsetunset年初我裸辞创业了，跟一个朋友一起合伙做项目，我主要还是做技术部分，开发一个回收类的项目也是第一次创业，虽然听过很多道理，自己经历过又是另外一回事我们的项目经历过高峰，现在算是谷底，基本的情况基本就是在苦苦挣扎这篇文章我会把我所经历的过程讲述出来...
2024-05-27 08:45:26
41
转载 浏览器节能机制导致Websocket断连的巨坑！
作者：tager原文：https://juejin.cn/post/7362576319928008755你踩过吗？浏览器节能机制导致Websocket断连的坑~~~近期，在使用WebSocket（WS）连接时遇到了频繁断连的问题，这种情况在单个用户上每天发生数百次。尽管利用了socket.io的自动重连机制能够在断连后迅速恢复连接，但这并不保证每一次重连都能成功接收WS消息。因此，我们进行了一些...
2024-05-24 08:45:36
78
转载 前端 UI 组件的 AI 时代来了！！！
本文将教您如何构建一个AI驱动的前端UI组件生成器，它可以帮助您生成Next.js Tailwind CSS UI组件，并提供实现教程。我们将涵盖以下内容：使用Next.js、TypeScript和Tailwind CSS构建UI组件生成器Web应用程序。使用CopilotKit将AI功能集成到UI组件生成器中。集成嵌入式代码编辑器，以对生成的代码进行更改。前提条件为了充分理解本教程，您需要对Re...
2024-05-23 08:33:13
170
转载 面了11个前端开发，发现了一个通病…
面了很多前端开发，发现一个通病。。如今闷头刷题已经行不通。与其没有目标的死磕LeetCode，不如站在阿里大神的肩膀上，背熟大神整理的刷题笔记，才是省时省力的上岸路径！为了帮助小伙伴们快速掌握大厂前端高频考点，上周找阿里P8级前端专家要来了一套内部资料????《阿里前端高频面试真题库》，文档内容为「核心知识点 + N 道相关面试题解析」，掌握了不单能应付面试，还能学到更多的前端核心知识，应用在工作中...
2024-05-21 10:10:48
30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人