发布了 18 篇内容
共 58373字， 被阅读 3912次
获得了 5 次赞同
获得了 2次喜欢， 获得了 3 次收藏
参与了 0 次互动
互动包含发布评论、点赞评论、参与投票等
原生 JS 手写一个优雅的图片预览功能，带你吃透背后原理
本文将用一个极简的例子详细讲解如何用原生 JS 一步步实现完整的图片预览和查看功能，无任何第三方依赖，兼容 PC 与 H5，实现了触屏双指缩放等，干货满满。
11-02
1262
如何用 JavaScript 编写你的第一个单元测试
测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试，确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入，甚至可能有害的输入时。
11-01
9
原生拖拽太拉跨了，纯 JS 自己手写一个拖拽效果，纵享丝滑
提到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实现更高级的用户体验：
10-31
2172
如何优雅地编写一个高逼格的 JS 插件？
在一个风和日丽的早晨，我正悠闲地喝着 Coffe，突然领导向我走来，我赶紧熟练地切出 VSCode，淡定自若地问：领导，什么事？领导拍了拍我的肩膀：你上次封装的方法同事跟我反馈使用起来很不错啊，你不如做成 JS 插件给大家用吧。我放下了手中的马克杯，甩了一下眼
10-09
24
这道 JS 经典面试题不要背，今天带你彻底搞懂它！
这是一道非常经典的面试题，涵盖了从函数的基本概念、运算符优先级，到作用域链、原型链、this 关键字、new 关键字等基础知识点考察，可以说能完整答对 JS 基础才算过了关，本文就带大家回顾并剖析这道面试题，应该是全网最详细的文章了，这次彻底搞懂它。
10-08
14
学会一行 CSS 即可提升页面滚动性能
一般情况下 CSS 并不会影响 JS 事件，但有一个 CSS 属性则比较特殊，那就是 pointer-events，它可以用来规避鼠标事件，其中大部分属性值只适用于 SVG（可缩放矢量图形）操作，而我们只需要关注其 none 属性值，该值表示鼠标事件“穿透”该元素并且指定该元素
10-08
21
当 UI 走查说页面色值错误时，先别急着检查代码
颜色一直是 UI 设计师们非常敏感的问题，我至今仍忘不了那天，一位萌新设计师在走查 UI 时，给我提了好几个 Bug，大多是颜色有差异问题，我当时的第一反应是去检查代码，排查了半天确认自己没有写错色值后，我就在想会不会是取色的问题？于是我做了个试验，在网页
10-07
16
如何编写一个原生 Web Components 组件
当今前端编程中，利用语义化的 HTML 结合 CSS 来完一个组件并不是一件难事，这也意味着无论在 React、Vue 中都可以插入，不过它俩不是今天的主角，接下来我将用一个例子来介绍如何封装一个完整的原生 HTML 的 Web Components 组件，让我们开始吧！
10-07
18
在 Chrome 浏览器中最快速实现拾色器（颜色吸管）
说到网页拾色器（颜色吸管工具）在前端的实现方法，通常我们会想到先进行网页截图，然后通过 Canvas 绘制截图，此时利用 Canvas 所提供的的 API 即可解析出图片每个像素点颜色，最后通过获取鼠标定位，得到当前的坐标来进行颜色选择。
10-06
29
为什么大家偏爱怪异盒模型 border-box？
我们都知道有两种盒模型，w3c 盒模型和 IE 盒模型，IE 是业界毒瘤所以 IE 盒模型又叫怪异盒模型 (好吧我瞎说的)。content-box，顾名思义，即 width 就是内容宽度，和边框边距相互独立，反过来 border-box 就是宽度包含了 padding 和 border，相互影响。
10-06
19
Vue 项目处理错误上报如此简单
随着网页项目越来越复杂，许多异常报错很难在开发和测试阶段被发现，尽管你可能避开了语法等常规错误，但不可避免的是代码在运行时的错误你仍旧无法准确预料，假设现在有如下一段 Vue 代码，它在生命周期的 created 阶段异步请求并接收了错误的数据，可能就会
10-06
23
利用 Vue 自定义指令让你的开发变得更优雅
前段时间在用框架开发 H5 页面时，碰到框架中的组件内置了一个属性用于适配异形屏，虽然是组件内部实现的，但这个方式让我萌生一个想法：能不能自己写一个属性来实现这样的功能？
10-05
32
最新评论
原生拖拽太拉跨了，纯 JS 自己手写一个拖拽效果，纵享丝滑