Vue项目处理错误上报如此简单
处理异常的意义随着网页项目越来越复杂，许多异常报错很难在开发和测试阶段被发现，尽管你可能避开了语法等常规错误，但不可避免的是代码在运行时的错误你仍旧无法准确预料，假设现在有如下一段 Vue 代码，它在生命周期的 created 阶段异步请求并接收了错误的数据，可能就会导致页面渲染出现错误：
1234567891011121314<template> {{ test.obj.xxx }}</template>......created() { this.getSomeData()},methods: { getSomeData() { this.fetch().then((res) => { this.test = res // 假设这是请求的错误数据 }) },}
而如果测试人员及时发现了这一错误的话，当他打开控制台时往往就会立即下结论了：噢，是前端的锅🙂
事实上真正的项目中可能 ...
Vue实现无限级树形选择器（无第三方依赖）
想要在 Vue 中实现一个这样的无限级树形选择器其实并不难，关键点在于利用 递归组件 和 高阶事件监听，下面我们就一步步来实现它。
简单实现下样式创建 Tree.vue 组件（为方便阅读，代码有省略）：
123456789101112131415161718192021222324252627282930313233343536373839<template> <ul class="treeMenu"> <li v-for="(item, index) in data" :key="index"> <i v-show="item.children" :class="triangle" /> <p :class="treeNode"> <label class="checkbox-wrap" @click="checked(item ...
原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑
前言提到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实现更高级的用户体验：
这是浏览器默认的拖拽效果，点住拖拽任意图片或文字都会产生。
笔者因为之前有个小项目需要经常参考稿定设计，一直有留意其元素拖拽的效果(如下图)，所以接下来我将以这种效果为蓝本，使用原生 JS 实现一个富有动感的 自定义拖拽 效果，话不多说直接开摸。
实现原理首先说下思路，我们需要知道鼠标的三个事件，分别是 mousedown，mousemove，mouseup ，当点击按下的时候，克隆一个绝对定位的元素，并标识下”拖拽中”的状态，接着在 mousemove 中就可以判断应该执行的具体方法，从而让元素随着鼠标移动起来。
在监听事件的 event 对象中，有几个参数是比较重要的：clientX，clientY 标识的鼠标当前横坐标和纵坐标，offsetX 和 offsetY 表示相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标，在 mouseup ...
如何优雅地编写一个高逼格的JS插件？
在一个风和日丽的早晨，我正悠闲地喝着Coffe，突然领导向我走来，我赶紧熟练地切出VSCode，淡定自若地问：领导，什么事？领导拍了拍我的肩膀：你上次封装的方法同事跟我反馈使用起来很不错啊，你不如做成JS插件给大家用吧。我放下了手中的马克杯，甩了一下眼前仅剩的几根刘海：没问题啊，小Case！随即开始摸鱼….
原型链写法要开始编写插件就得先了解JS模块化，早期的模块化是利用了函数自执行来实现的，在单独的函数作用域中执行代码可以避免插件中定义的变量污染到全局变量，举个栗子🌰，以下代码实现了一个简单随机数生成的插件：
1234567891011121314151617181920212223;(function (global) { "use strict"; var MyPlugin = function (name) { this.name = name }; MyPlugin.prototype = { say: function () { ...
在Chrome浏览器中最快速实现拾色器（颜色吸管）的方法
说到网页拾色器（颜色吸管工具）在前端的实现方法，通常我们会想到先进行网页截图，然后通过Canvas绘制截图，此时利用Canvas所提供的的API即可解析出图片每个像素点颜色，最后通过获取鼠标定位，得到当前的坐标来进行颜色选择。
在这种方式下通常问题出在第一个步骤，就是进行网页截图的方法，在前端网页截图常见的工具有：html2canvas、dom-to-image 等，然而这些库的实现原理都是通过解析DOM然后转换语法（Canvas 或 Svg）绘制再导出图片，虽然这是目前实现截图操作的唯一出路，但我们要清楚的是这样做不可避免会出现以下问题：
对于复杂网页场景解析可能会出现缺失或错误
无法避免 Canvas 或 Svg 的渲染结果与网页呈现效果存在差异的问题
生成效率太慢，解析绘制过程会造成卡顿，非常影响用户体验
所以基于此思路做出来的颜色吸色器尽管在设计初期就考虑可用性，也仍然无法避免上述问题，最多只能应用于简单网页的场景当中，但这通常又与事实相违背——因为简单的网页往往极少有使用到吸色器的业务场景。
原生方案如果说 JS 的实现方法是令人沮丧的，那么把问题交给浏览器原生方法可能是 ...
时隔一年多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电脑全军覆没。
尽管事实似乎已经指向了一个罪魁祸首，可疑虑没有在我心中消除。难道是苹果电脑的屏幕色彩有问题？屏幕也能影响到程序的事件？
要搞懂这些问题，首先得清楚，为什么会有色差？
色彩差异的原因导致在不同设备上产生色彩差异的原因大致有以下几个因素：
系统色彩管理导致颜色差异
软件色彩管理模式不同导致的颜色差异
显示设备品质差异导致的颜色差异
毫无疑问，第三点是最容易理解的，但它的影响只是人眼看到的感受不同，对于屏幕取色不会有影响，那是不是其它两个 ...