如果使用传统的 if-else 语句，对复杂的条件进行逻辑判断，代码很容易变得冗长难维护，分享几种替代的写法。 1. 对象映射替代 if-else 传统写法 function getPrice(user) { if (user.type === 'vi...

async/await 是 ES7 中引入的语法糖，它彻底改变了 JavaScript 中异步编程的方式。它让我们能够以一种看似同步的方式编写异步代码，极大地提高了代码的可读性和可维护性。 然而，凡事皆有两面。当我们享...

前言 原型和原型链是 JavaScript 中非常重要的一个知识点。 前置知识 构造函数 构造函数在面向对象的语言中，通常是用来创建实例对象。在 ES6 版本前，JavaScript 中使用&...

最近项目上线，用户一多，页面就卡得不行。首屏加载 3 秒起，滚动掉帧，手机发烫……被 QA 喊去聊了好几次。 没办法，只能低头研究性能优化。翻了一圈文档和实战案例，发现现代浏览器其实给了我们很多“外挂”——...

在日常开发中，我们经常需要实现复制文本到剪贴板的功能。虽然很多人习惯使用 clipboard.js 这样的第三方库，但其实浏览器原生提供了几种实现方式。下面介绍三种实用的复制方案，你可以根据项目需求选择合适的方...

CSS 的进化速度令人咋舌。许多曾经需要复杂 JavaScript 库或图形工具才能实现的效果，如今只需几行样式即可拿下。全新的函数与伪元素让我们在性能、可访问性与交互性上同时起飞。下面就带你领略一批值得收入“前...

写在开头 学会shape()之后可以轻松完成如下各种不规则图形的效果！ 什么是 shape() shape() CSS 函数用于定义 clip-path 和 offset-path 属性的形状。它结合了一个初始起点和一系列定义形状路径的...

在前端开发中，网页截图是个常用功能。从前，html2canvas 是大家的常客，但随着网页越来越复杂，它的性能问题也逐渐暴露，速度慢、占资源，用户体验不尽如人意。 好在，现在有了 SnapDOM，一款性能...

上周二，我在改一个“远古”管理后台的时候，被自己气笑了。 为了维护几个弹窗，我居然堆了 500 多行 JavaScript： 管理焦点的 focus trap 监听 Esc 关闭 点击遮罩关闭 一堆 ARIA 无障碍属性...

在现代前端开发中，HTML 与 DOM 提供了声明式、对象化的界面构建方式。浏览器自动管理布局、样式和事件。然而，<canvas> 完全不同——它是一个基于命令的绘图表面，没有内置的“元素”概念。 Canvas ...