时隔一年多jQuery发布3.6.1新版本，你还在用JQ吗？
在今年8月26日 jQuery 终于是更新了一个 3.6.1 维护版本，距离上一个版本发布时间已过去一年零五个月之久，其维护者表示接下来主要考虑修复聚焦与失焦(focus & blur)的问题以及一些难以捉摸的边缘情况，可能是历史原因，jQuery 中与焦点有关的地方都很难改变，团队从未完全正确地修复，所以他们暂时保留这些内容，并将在未来解决，特别是因为这些更改最终可能需要发布一个新的主要版本。
所谓维护版本是指在不更改任何核心组件或添加新功能的情况下纠正安全漏洞或小错误的软件版本。它们通常以十分之一或百分之一来编号，以区别于主要版本，一般来说，软件工程师会尽可能快地完成这个过程，并且不会牺牲编码质量或可靠性。
以下是 jQuery 3.6.1 的一些改进：
基础设施改进在这个版本中团队做了很多工作来更新项目的一些测试和构建基础设施，包括将 CI 从 Travis CI 迁移到 GitHub Actions，在 Node 16 而不是 Node 15 上进行测试，通过 https 加载他们的测试监听器，以及添加更多自定义构建的准确测试。
不失去焦点尽管困难，此版本中仍有一个 ...
JS探究之call和apply到底哪个更快？
我们都知道 call() 和 apply() 是用来改变函数中 this 指向的，它们的共同点是都会立即执行，而如果问到它们之间有什么区别时，我们都会想到一个「传参不同」
call 参数要分开传，比如 call(this, 1, 2, 3, ...)
apply 传递参数是数组形式，比如 apply(this, [1,2,3,...])
以上就是一直以来我对两者的全部认知了，直到有天我在 Vue 的源码中看到了这么一段”无意义”的代码：
于是我开始猜想，应该是两者之间还存在着不为人知的性能差异？为了佐证这点，赶紧写了个循环试一下：
123456789101112let arr = [10,12,123,432,54,67,678,98,342]; // 随便定义一些参数function fn () {}const name = 'call'// const name = 'apply' console.time(name);for (let i = 0; i < 99999999; i++) { fn[ ...
哪些浏览器事件不会冒泡？
你知道哪些浏览器事件不会冒泡吗？
回答这个问题之前，我们首先要具备DOM事件流捕获与冒泡的知识，这里只讲JS中如何设置这两种事件监听，例如对body注册点击事件：
1234567document.body.addEventListener('click', e => { console.log('触发捕获阶段');}, true)document.body.addEventListener('click', e => { console.log('触发冒泡阶段');}, false)
具体区别在第三个参数，w3c规定了true表示捕获阶段触发，false表示冒泡阶段触发，默认false。
在JS中通常利用冒泡来进行事件委托，但并不是所有事件都会冒泡。下面我们看看哪些事件是不能冒泡的，又有哪些相关应用场景。
scroll、focus、blur、resize假设有如下一段html结构
12345<ul id="containe ...
学会一行CSS即可提升页面滚动性能
一般情况下 CSS 并不会影响 JS 事件，但有一个 CSS 属性则比较特殊，那就是 pointer-events，它可以用来规避鼠标事件，其中大部分属性值只适用于 SVG（可缩放矢量图形）操作，而我们只需要关注其 none 属性值，该值表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
我们经常会碰到类似设置半透明遮罩的需求，通常是绝对定位一个div盖在元素上方，这时遮罩层的鼠标事件优先级会更高，使得打上遮罩的元素无法进行正常交互行为，此时只需给遮罩设置 pointer-events: none; 即可”穿透”遮罩与元素交互。
重点来了，既然该属性可以阻止元素成为鼠标事件，那么修改页面该属性值为 none，就能避免在滚动时鼠标频繁触发包括hover在内的任何鼠标事件，从而提升了页面滚动时的性能。
123body { pointer-events: none;}
使用滚动监听事件可实现灵活控制：
12345678let timer = nullwindow.addEventListener("scroll", function ...
当UI走查说页面色值错误时，先别急着检查代码
颜色一直是UI设计师们非常敏感的问题，我至今仍忘不了那天，一位萌新设计师在走查UI时，给我提了好几个Bug，大多是颜色有差异问题，我当时的第一反应是去检查代码，排查了半天确认自己没有写错色值后，我就在想会不会是取色的问题？于是我做了个试验，在网页上设置一个背景色，然后用Chrome自带的取色器吸了一下这个背景色，结果差点令我怀疑人生：
仔细看这个吸出来的color数值和上面设置的并不相同，为什么屏幕取色会有误差？我第一反应是找台别的电脑试试，于是我把这个网页保存后发给几个同事一通测试，最终在一台Windows电脑上发现取色正常，而Mac电脑全军覆没。
尽管事实似乎已经指向了一个罪魁祸首，可疑虑没有在我心中消除。难道是苹果电脑的屏幕色彩有问题？屏幕也能影响到程序的事件？
要搞懂这些问题，首先得清楚，为什么会有色差？
色彩差异的原因导致在不同设备上产生色彩差异的原因大致有以下几个因素：
系统色彩管理导致颜色差异
软件色彩管理模式不同导致的颜色差异
显示设备品质差异导致的颜色差异
毫无疑问，第三点是最容易理解的，但它的影响只是人眼看到的感受不同，对于屏幕取色不会有影响，那是不是其它两个 ...
为什么大家偏爱怪异盒模型border-box？
我们都知道有两种盒模型，w3c盒模型和IE盒模型，IE是业界毒瘤所以IE盒模型又叫怪异盒模型(好吧我瞎说的)。content-box，顾名思义，即width就是内容宽度，和边框边距相互独立，反过来 border-box 就是宽度包含了padding和border，相互影响。
现代浏览器默认的都是w3c标准，但IE盒模型并非一无是处，甚至很多情况下它会更好用，看看下面这个实际开发中的例子：
如上，一个很常见的设计图，我们先看到输入框的大小，写上对应的css：
12width: 340px;height: 40px;
然后我们继续得知内容文字在其中的内边距，此时我们再设置这个内边距：
1padding: 10px 44px;
以上的操作我们严格按照设计图要求复原元素，但是在w3c盒模型中，整个div都被撑开了：
此时只需要把它设置为IE盒模型，看，它就正常了：
通过这个简单的例子我们就很容易理解IE盒模型：它的宽高一旦设定，除非边框边距已经超出宽高，否则宽高就是固定的。
这其实是比较符合直觉的，想象一个杯子盛满了水，此时加大了杯子的高度，水自然就不是满的了，于是我们又要往里头加 ...
用贪吃蛇小游戏的思路手写一个无限循环滚动轮播图
在某些业务场景下，接入第三方库实现轮播图效果可能并没有那么好用，笔者在接入Swiper插件失败后，还是决定手写一个。那么关于手写轮播图有很多文章已经讲过了，其核心原理是将图片排成一排，设置外层的Div超出隐藏，然后改变定位来实现轮播效果，这样通常不能首尾循环滚动，本文记录了一种对无限循环滚动效果的实现方式。
实现的思路很简单，就是和“贪吃蛇”游戏中蛇身体的移动逻辑一样，每次前进的时候先删除尾部元素，然后再添加到头部，这样无论身体多庞大，始终只有两个元素在改变位置：
基础效果有了思路，就不难写出轮播了，这里为了方便使用Vue2创建演示，后面会放上完整Demo及源码，文章只讲思路，就不贴大段代码了，有需要的小伙伴可以先点个收藏~
其中前进还是一样通过改变left来滚动，只是在滚动结束后便立刻修改数据：
12345// 核心代码const ulDom = document.getElementsByClassName('ul')[0] // 拿到页面Dom实例ulDom.style.left = xxx // 控制滚动，注意需要设置transition才有动画this. ...
Vue+Electron快速开发多端在线笔记本
万事开头难，在文章创作前往往需要先有一个想法，当你有了模糊的想法，便可以开始研究。比方说，你想要写关于”微前端”的文章，那么，可以去调研实践微前端框架。做这些事情的同时，你可能会得到灵感，然后知道接下来怎么去写完它。（例如我的一篇文章《微前端很好，为什么我却不使用?》就是这么写的，虽然写的一般）
仅有想法肯定是不够的，一旦你知道了文章的走向以及讲述方式，应当记录下来，这将会是你的脉络图，同时也是流畅写下整个文章的关键。例如记录好每个节点提纲、讲述目的、技术要点、个人想法和感受等等这些基本点。这样做能防止创作时出现文思枯竭，即使你可能不觉得这样写是完美的，但你至少仍然能知道全篇基本脉络。
不管是不是计划好的，你的文章一定会有一个主题，而根据这个主题，最终你会作一番关于你对这个题目的想法和声明。工欲善其事，必先利其器。这就是为什么我要做这个项目的原因——总有一些想法需要记录，围绕着某个主题，还需要把文章脉络理清。”草稿箱”或许可以做到记录功能，但是作为一个优秀的码农，有什么理由拒绝自己开发一套笔记程序呢？
本文将带大家鼓捣一个跨端笔记本程序，让你能够时刻记录碎片的文字或灵感，并且同时拥有 ...
给掘金写了个一键三连插件（仿B站效果）
先来看看b站的一键三连是什么效果：
不难观察出以下几个特点：
长按点赞出现抖动动画
长按点赞时关联按钮会有圆环进度条效果
长按超过一段时间后放开则一次实现三个动作并且有个绽放特效
接下来我们要做的就是逐步实现这些步骤，如何开始呢？这就需要介绍今天的主角：谷歌扩展插件。
创建一个Chrome插件Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。可以通过 chrome-plugin-demo 这个项目了解更多，这里我们直接讲如何使用：
首先在谷歌浏览器直接打开地址 chrome://extensions/ 进入扩展程序，并打开右上角开发者模式，这时就可以加载我们的插件了：
展程序会以 manifest.json 这个文件来识别并加载插件：
12345678910111213141516171819202122232425262728{ "manifest_version": 2, "name": "掘金一键三连小助手&qu ...
Puppeteer + Nodejs 通用全屏网页截图方案
此次实现的功能是输入网址后生成全屏截图，可用于生成图片版文章，也可以用做图片二维码海报的生成器，可以支持各种尺寸定义，下面讲解实现的一些技术细节。
实现截图主要使用的是 puppeteer 这个库，最简单地实现一个网页截图，只需要几行代码即可：
12345678910111213141516171819const puppeteer = require('puppeteer') // 引入 // 启动浏览器 const browser = await puppeteer.launch({ headless: false, // 本地测试先关掉无头模式 }) // 创建一个页面 const page = await browser.newPage() // 设置浏览器视窗 page.setViewport({ width: 300, height: 600, }) // 输入网页地址 await page.goto(url, { ...