dispatchEvent 两个特别的地方
2020-09-29
阅读 1 分钟
1.6k来看一段正常的事件点击时抛错了会怎么样： {代码...} 依据事件循环原理，应该先打印2, 当点击div时，直接抛错，1不会打印。再来看使用dispatchEvent的情况： {代码...} 结果会打印 0，2， （1不会被打印）这里有两个不一样的地方：同步dispatchEvent后，回调会被立即执行，因此打印了0错误异常不会被传播遇到抛错，1不...
stopImmediatePropagation与stopPropagation区别
2020-09-29
阅读 1 分钟
5kstopImmediatePropagation 阻止父元素上的事件监听不再执行，同时相同元素的相同事件类型的监听事件也不再执行stopPropagation 阻止父元素上的事件监听不再执行
代码规范之prettier+eslint实践
2018-05-22
阅读 1 分钟
5.4k今天遇到一个问题：使用eslint时，通常为了约束开发人员，会同时使用pre-commit（利用git hooks），在commit之前如果eslint检查不通过则无法提交。
九宫格抽奖跑马灯效果实现--微信小程序
2018-05-02
阅读 2 分钟
11.5k希望实现一个九宫格跑马灯效果的抽奖功能，但希望不止局限于固定的样式或效果。考虑做成一个n*n的可自定义某些参数的组件。可自定义某些参数例如：能指定动画效果的，能局部自定义样式的，等等。
CSS渐变之背景、边框、字体渐变
2018-01-11
阅读 3 分钟
33.1klinear-gradient: ([ <angle> | to <side-or-corner>, ]? <color-stop> [, <color-stop> + ])
throttle debounce 总结
2017-07-16
阅读 2 分钟
2.1k二者本质：都是限制频繁触发二者区别：throttle: 节流阀，保证多少ms内只执行一次。debounce: 去抖，保证多少ms内不再被触发时就会执行一次。
a标签href属性值对onbeforeunload事件的影响
2017-06-18
阅读 3 分钟
4.2k在某些场景下，我们希望点击a标签以后不做跳转，并且能响应a标签绑定的事件，常见方法href设置javascript:;、#### 等，但经测试发现，这几种方式在chrome，ie9上对onbeforeunload事件的触发不一致，这里做个测试和总结。
canvas实现平铺水印
2016-12-27
阅读 4 分钟
13k欲实现的水印平铺的效果图如下： 从图上看，应该做到以下几点： 文字在X和Y方向上进行平铺； 文字进行了一定的角度的旋转； 水印作为背景，其z-index位置应位于页面内容底部, 即不能覆盖页面主内容； 平铺的水印应能随窗口大小改变进行自适应。 思路： 首先我们先在canvas上绘制如下图所示一小块画布： {代码...} 将单一...
input type="search" 实现搜索框
2016-12-11
阅读 2 分钟
52.8kinput type=text并不能达到这种效果，google了一下，html5 增加的type=search可以做到（但需要input type=search外面包上一层带action属性的form）。
webpack 插件使用总结
2016-12-11
阅读 5 分钟
4.7kextract-text-webpack-plugin 用途：提取单独css文件不使用extract-text-webpack-plugin插件时的写法： {代码...} 这时head里会插入style标签，加入样式: dist目录无单独css文件： 使用extract-text-webpack-plugin的写法： {代码...} 这时可以看到dist目录下生成了单独的index.css文件。通过在html中link标签去引用，即...
CSS水平垂直居中总结
2016-12-11
阅读 2 分钟
4.1kCSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: {代码...} 单行文字的垂直居中： {代码...} 让有宽度的div水平居中： {代码...} 让绝对定位的div垂直居中： {代码...} 同理，让绝对定位的div水平和垂直方向都居中： {代码...} 已知宽高的容器的水平垂直方向居中： {代码...} 未知宽高的容器的水平垂直方...
React完成一个图片轮播组件
2016-12-11
阅读 2 分钟
5.1k欲实现的图片轮播组件的功能：1.图片组件分为中图和小图两个部分；中图和小图图片宽度可定制化；2.中图部分： 点击向左或者向右箭头能切换图片（非循环轮播），同时小图对应的图片高亮显示； 由于是非循环轮播，所以第一张中图和最后一张中图向左向右箭头分别不可见； 中图右下角展示图片进度（例：10/19） 3.小图部分：...
使用express+webpack搭建一个小项目
2016-12-11
阅读 4 分钟
11.4k本项目想实现一个小网站，css方面：带reset.css，能使用sass语法；js方面：能使用es6语法；模板方面：有可继承的模板，公用部分可提取公用的模板；项目实现热启动：
Sketch项目安装缺失字体
2016-12-11
阅读 1 分钟
10k如何解决sketch总是提示字体缺失的问题 打开sketch项目时如果本地字体缺失，会看到下列提示：解决方法: 1.下载好缺失的字体 2.右键选择：-->打开方式-->字体册.app （Font Book） 依次将字体进行安装即可。
Flexbox完全指南（译）
2016-11-21
阅读 12 分钟
4.9k本文译自 A Complete Guide to Flexbox这里，针对本文介绍的属性列个提纲： 伸缩容器属性： display flex-direction flex-wrap flex-flow justify-content align-items align-content 伸缩项目属性： order flex-grow flex-shrink flex-basis flex align-self 以后再布局时可以考虑用flexbox啦~~ 背景 Flexbox 布局（Fle...