King Mui

用艺术的眼光发现技术的美

判断鼠标从元素矩形区域的哪个方向进入的标准为:
当鼠标从元素矩形区域外移入元素矩形区域,和鼠标行动轨迹发生交叉的那条边就认为是鼠标进入的方向,例如鼠标从上方往下和上边有交叉,就认为是从上方进入。

本文要介绍几种方法来判断当鼠标滑入元素时,是从哪个方向进入;滑出元素时,从哪个方向滑出,以此对元素做一些交互效果。

求最小值

该方法是当鼠标滑入元素的时,从事件对象 e 中获取其位于文档中的坐标 (e.pageX, e.pageY),再计算出 x 轴方向坐标减去元素左侧距离文档左侧的距离和 x 轴方向坐标减去元素右侧距离文档左侧的距离,y 轴方向坐标减去元素顶部距离文档顶部的距离和 y 轴方向坐标减去元素底部距离文档顶部的距离,求出这四个数字的绝对值的最小值,即为鼠标进入元素的方向。

在线演示

阅读全文 »

在前端开发中有一部分的用户行为会频繁的触发事件执行,而对于 DOM 操作、资源加载等耗费性能的处理,很可能导致界面卡顿,甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。

前言

浏览器的 resizescrollkeypressmousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。

在开发的过程中,你可能会遇到下面的情况:

  1. 监听 Window 对象的 resizescroll 事件
  2. 拖拽时监听 mousemove
  3. 文字输入时,对输入字符串进行处理,比如要把 markdwon 转换成 html
  4. 监听文件变化,重启服务
阅读全文 »

{thetop: 10} 是一个有效的对象字面量。代码将创建一个属性名为 thetop 且值为 10 的对象。与以下内容相同:

1
2
obj = {thetop: 10};
obj = {"thetop": 10};

在 ES5 及更早版本中,你不能直接在对象字面量中使用变量作为属性名称。唯一的选择是执行以下操作:

阅读全文 »

自定义浏览器滚动条样式

IE浏览器

追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5)。下面列出了多个版本的支持性:

阅读全文 »

闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。 – MDN

闭包是有权访问另一个函数作用域的函数。 – 《JavaScript 高级程序设计(第 3 版)》

函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性在计算机科学文献中称为闭包。 – 《JavaScript 权威指南(第 6 版)》

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。 – 《你不知道的 JavaScript(上卷)》

闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」。 – 闭包的秘密

闭包就是能够读取其他函数内部变量的函数。 – 阮一峰

要使用闭包,只需要简单地将一个函数定义在另一个函数内部,并将它暴露出来。要暴露一个函数,可以将它返回或者传给其他函数。

内部函数将能够访问到外部函数作用域中的变量,即使外部函数已经执行完毕。

由于在 Javascript 语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成定义在一个函数内部的函数

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁

闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来。这显然类似于面向对象编程。在面向对象编程中,对象允许我们将某些数据(对象的属性)与一个或者多个方法相关联。

阅读全文 »