茶无味的一天的博客_大前端

对话框、模态框和弹出框看起来很相似，它们有何不同？

本文翻译自外网文章《Dialogs, modality and popovers seem similar. How are they different?》，作者 Hidde de Vries 是一名自由职业前端、可访问性和系统设计专家，曾在荷兰政府、W3C (WAI)、Sanity.io 和 Mozilla 等组织工作。 Web 平台概念有时可能完全不同，但有时看起来又非常相似。语义、行为

模态

弹出窗口

html

翻译 2023-04-22 22:16:02 176 阅读

Chrome 浏览器的更新导致 jQuery 反复发版，只因 :has() 这个伪类

最近 jQuery 似乎又“回光返照”了一下，窜稀式地连更了几个小版本。我仔细看了看，并没有新功能出现，不过还挺有意思的，也让我学习到了新的东西。简单来说，这几个版本的更新主要与 Chrome 引入新选择器产生的缺陷有关。那么谷歌浏览器是如何导致 jQuery 产生 Bug 的，又是为何在修复之后又引发了新 Bug 的，这还得从 :has 伪类说起。关于 :has() 伪类 CSS 在很早前就存

jQuery

选择器

CSS

原创 2023-04-14 18:41:58 64 阅读

我写了个免费在线图库生成器，只需三步将你的手机相册搬到线上

一个 Vue3 + Node 纯前端的项目，不需要开发后端，没有数据库，只需要把照片丢进去，Git提交一下站点就出来了，就很简单。不用买服务器，不搞OSS，完全免费，这篇文章将会介绍整个项目的开发历程。

数组

瀑布流

JSON

原创推荐 2022-12-06 15:01:10 1956 阅读 2点赞私藏项目实操分享

原生 JS 手写一个优雅的图片预览功能，带你吃透背后原理

前言本文将用一个极简的例子详细讲解如何用原生JS一步步实现完整的图片预览和查看功能，无任何第三方依赖，兼容PC与H5，实现了触屏双指缩放等，干货满满。为提升阅读体验，正文中代码展示均有部分省略处理，完整代码链接放在了文末。实现原理实现图片预览/查看的关键在于CSS3中的transform变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置translate(x,y)即可偏

缩放

数组

移动端

双指缩放

图片预览

原创精选 2022-11-02 14:05:39 474 阅读 2点赞 2收藏 私藏项目实操分享

如何用 JavaScript 编写你的第一个单元测试

测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试，确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入，甚至可能有害的输入时。为什么要进行单元测试？进行单元测试有许多不同的方法，一些主要目的是：验证功能：单元测试确保代码做正确的事情并且不做任何不应该做的事情——大多数错误发生在这里。防止代码回归：当我们发现错误时，添加单元测试来检查场景

单元测试

应用程序

javascript

翻译推荐 2022-11-01 08:15:23 410 阅读

原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑

前言提到元素拖拽，通常都会先想到用HTML5的拖拽放置(Drag和Drop)来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实现更高级的用户体验：!(https://s2.51cto.com/images/blog/202210/31111017_635f3c99d61825348.png?xossprocess=image/wat

拖拽

css

html

js

JavaScript

原创推荐 2022-10-31 11:13:54 1556 阅读 yyds干货盘点

Vue项目处理错误上报原来如此简单

随着网页项目越来越复杂，许多异常报错很难在开发和测试阶段被发现，尽管你可能避开了语法等常规错误，但不可避免的是代码在运行时的错误你仍旧无法准确预料

前端

Vue.js

JavaScript

生命周期

异常捕获

原创精选 2022-09-26 10:52:33 427 阅读

如何优雅地编写一个高逼格的JS插件惊艳你的领导和同事？

在一个风和日丽的早晨，我正悠闲地喝着Coffe，突然领导向我走来，我赶紧熟练地切出VSCode，淡定自若地问：领导，什么事？领导拍了拍我的肩膀：你上次封装的方法同事跟我反馈使用起来很不错啊，你不如做成

前端

JavaScript

面试

模块化

JS插件

原创精选 2022-09-26 10:51:57 310 阅读 1点赞 1收藏 私藏项目实操分享

时隔一年多 jQuery 再度发布 3.6.1 新版本，你还在用JQ吗？

在上月(2022-08-26) jQuery 刚更新了一个 3.6.1 维护版本，距离之前版本发布时间已过去一年零五个月之久.......

前端

jQuery

资讯

jquery

css

原创精选 2022-09-26 10:51:23 653 阅读 1点赞 2评论

一行代码引发的 JS 探究 : call 和 apply 到底哪个更快？

我们都知道 call() 和 apply() 是用来改变函数中 this 指向的，它们的共同点是都会立即执行，而如果问到它们之间有什么区别时，我们都会想到一个「传参不同」

前端

JavaScript

面试

safari

浏览器

原创精选 2022-09-26 10:51:01 204 阅读 yyds干货盘点

当UI走查说页面色值错误时，先别急着检查代码

颜色一直是UI设计师们非常敏感的问题，我至今仍忘不了那天，一位萌新设计师在走查UI时，给我提了好几个Bug，大多是颜色有差异问题，我当时的第一反应是去检查代码，排查了半天确认自己没有写错色值

前端

设计师

程序员

色彩空间

谷歌浏览器

原创 2022-09-26 10:50:24 136 阅读 yyds干货盘点

在Chrome浏览器中最快速实现拾色器（颜色吸管）的方法

说到网页拾色器（颜色吸管工具）在前端的实现方法，通常我们会想到先进行网页截图，然后通过Canvas绘制截图，此时利用Canvas所提供的的API即可解析出图片每个像素点颜色，最后通过获取鼠标定位，得到

JavaScript

HTML

浏览器

颜色选择器

谷歌浏览器

原创 2022-09-26 10:50:01 586 阅读私藏项目实操分享

为什么大家更偏爱怪异盒模型border-box

我们都知道有两种盒模型，w3c盒模型和IE盒模型，IE是业界毒瘤所以IE盒模型又叫怪异盒模型(好吧我瞎说的)，现代浏览器默认的都是w3c标准，也就是 content-box，顾名思义，即width就是

前端

CSS

盒模型

UI

面试

原创精选 2022-09-26 10:49:22 243 阅读

浅谈前端工程化的发展以及相关工具介绍

前端工程化，就是在使用工具处理那些与实际业务无关的内容，比如处理 JS 编译、打包、压缩、图片合并优化等等各个方面的工程性代码。

前端

前端框架

gulp

模块化

原创 2022-09-26 10:48:58 85 阅读

这道 JS 经典面试题不要背，今天帮你彻底搞懂它！

这是一道非常经典的面试题，涵盖了从函数的基本概念、运算符优先级，到作用域链、原型链、this关键字、new关键字等基础知识点考察，可以说能完整答对 JS 基础才算过了关，本文就带大家一起回顾这道面试题

前端

JavaScript

面试

优先级

结合性

原创精选 2022-09-26 10:45:46 186 阅读 yyds干货盘点

我用纯CSS实现了优惠券剪卡风格，UI小姐姐说....

在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想

CSS

前端

css

切图

线性渐变

原创精选 2022-09-26 10:43:38 266 阅读

从零开始 - 40行代码实现一个简单Promise函数

Promise主要特点 Promise 会有三种状态，「进⾏中」「已完成」和「已拒绝」，进⾏中状态可以更改为已完成或已拒绝，已经更改过状态后⽆法继

JavaScript

前端

任务队列

返回结果

代码实现

原创精选 2022-09-26 10:43:15 193 阅读

利用Vue自定义指令 - 让你的开发变得更简单

前段时间在用框架开发H5页面时，碰到框架中的组件内置了一个属性用于适配异形屏，虽然是组件内部实现的，但这个方式让我萌生一个想法：

Vue.js

前端

h5

自定义指令

css

原创 2022-09-26 10:43:01 91 阅读

微前端很好，为什么我却不使用? | 微前端原理剖析

的一些问题在技术浪潮的推动下，由vue、react所主导的单页面应用已成为主流，但在开发中，随着业务的深入和

架构

前端框架

加载

父类

生命周期

原创精选 2022-09-26 10:42:59 2257 阅读

NodeJs原理 - Stream

在构建较复杂的系统时，通常将其拆解为功能独立的若干部分。这些部分的接口遵循一定的规范，通过某种方式相连，以共同完成较复杂的任务。譬如，shell通过管道|连接各部分，其输入输出的规范是文本流。在No

Node.js

数据

标准输出流

迭代器

原创 2022-09-26 10:27:17 76 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

品味前端

对话框、模态框和弹出框看起来很相似，它们有何不同？

Chrome 浏览器的更新导致 jQuery 反复发版，只因 :has() 这个伪类

我写了个免费在线图库生成器，只需三步将你的手机相册搬到线上

原生 JS 手写一个优雅的图片预览功能，带你吃透背后原理

如何用 JavaScript 编写你的第一个单元测试

原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑

Vue项目处理错误上报原来如此简单

如何优雅地编写一个高逼格的JS插件惊艳你的领导和同事？

时隔一年多 jQuery 再度发布 3.6.1 新版本，你还在用JQ吗？

一行代码引发的 JS 探究 : call 和 apply 到底哪个更快？

当UI走查说页面色值错误时，先别急着检查代码

在Chrome浏览器中最快速实现拾色器（颜色吸管）的方法

为什么大家更偏爱怪异盒模型border-box

浅谈前端工程化的发展以及相关工具介绍

这道 JS 经典面试题不要背，今天帮你彻底搞懂它！

我用纯CSS实现了优惠券剪卡风格，UI小姐姐说....

从零开始 - 40行代码实现一个简单Promise函数

利用Vue自定义指令 - 让你的开发变得更简单

微前端很好，为什么我却不使用? | 微前端原理剖析

NodeJs原理 - Stream