canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多。 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) 方法,来获取鼠标相对于浏览器的坐标,然后还需要计算出鼠标相对于 canvas 画布的坐标,最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上,进行相应的操作。 isPo […]

简单说明 Virtual DOM

Virtual DOM 就是用 JS 的对象来描述 DOM 结构的一个 DOM 树。如: var element = { tagName: ‘ul’, // 节点标签名 props: { // DOM的属性,用一个对象存储键值对 id: ‘list’ }, children: [ // 该节点的子节点 {tagName: ‘li’, props: {class: ‘item’}, children […]

通过阻止 touchstart 事件,解决移动端的 BUG

在 iOS10 下,即使设置了 meta 标签的 user-scalable=no 依然不能阻止用户缩放。 解决此 BUG 的方法是阻止 PC 事件: 另外,此方法还能解决 iOS10 中横向页面溢出,即使给 body 设置了 overflow:hidden 依然能横向滑动的问题。 不过添加了此事件后会阻止 iOS10 的橡皮筋效果,另外也会禁止文字选中功能。 通过阻止 touchstart 的默 […]

简单的 JSON 对象进行深拷贝最简单的方法

只需要先使用 JSON.stringify() 转成字符串,再通过 JSON.parse() 转成一个新的 JSON 对象即可。 注:此方法只针对简单的 JSON 对象,如果对象中含有函数,则不能使用此方法。JSON.stringify(..) 在对象中遇到值为 undefined、function 和 symbol 时会自动将这个字段忽略,在数组中则会返回 null(以保证单元位置不变)。 可以 […]

JS 中通过对象关联实现『继承』

JS 中继承其实是种委托,而不是传统面向对象中的复制父类到子类,只是通过原型链将要做的事委托给父类。 下面介绍通过对象关联来实现『继承』的方法: 我们使用 Object.create() 来关联两个对象,从而实现了『继承』(委托)。 这比传统的通过构造函数实现类和继承更简洁。 其实通过 Object.create() 的方式就是修改对象的 __proto__ 来实现继承,只是直接修改 __prot […]

Immutable 详解

转自:https://github.com/camsong/blog/issues/3 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的,下面我们来一探究竟。 JavaScript 中的对象一般是可变的(M […]

React组件性能优化

转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层;它使用虚拟DOM技术,以保证它UI的高速渲染;它使用单向数据流,因此它数据绑定更加简单;那么它内部是如何保持简单高效的UI渲染呢? React不直接操作DOM,它在内存中维护一个快速响应的DOM描述,render方法 […]