lisa的个人博客

event.offsetX、event.offsetY（相对事件发生的具体元素左上角的定位）

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.clientX、event.clientY（相对可视区域左上角的绝对定位）

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY（整个HTML文档中的绝对定位）

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.screenX、event.screenY（不常用）

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性(就是上面的地址栏，收藏夹都会算进去)

这两天做了一个小页面，项目搭建用的是vue/cli，过程中遇到了一些棘手问题，现在回过头来总结一下。

vue-cli 3 脚手架搭建（node版本要8.9+）：

1. npm install @vue/cli -g
2. vue.create myApp
3. npm serve 启动项目

promise实现

promise优化了回调函数的用法，让原本需要纵向一层一层嵌套的回调函数实现了横向的调用，也就是链式调用。（解决地狱回调问题）

手动封装filter方法

矩形碰撞检测（不考虑旋转）

2d矩形碰撞检测，矩形平行于坐标轴

a标签慎用target=”_blank”

存在问题：
1：新打开的窗口可以通过window.opener获取到来源页面的window对象，即使跨域也可以，通过修改window.opener.location.href=’xxx’，指向另一个地址，这样新窗口可能会把原来的地址改了并进行页面的伪装来欺骗用户。

2：新打开的窗口与原窗口共用一个进程，若是新页面有性能不好的代码也会影响原页面。

解决方案：
1：加上rel=”noopener” 或者 rel=”noreferrer”,这样新窗口打开的window.opener就是null,而且会让新窗口运行在独立的进程里，不会拖累原来的页面的进程。（有些浏览器针对性能的优化即使不加，新窗口也会在独立进程打开，为了安全起见还是加一下比较好）

代码实验：

1
2
3
4
5
6
7
8

// a 标签模拟点击跳转新页面
<a href="http://itlisa.github.io/" target="_blank"> 点击跳转 <a>

// 新页面控制台模拟修改原页面url

window.opener.location.href = 'http://itlisa.github.io';

此时原页面已经被这个'http://itlisa.github.io'这个网站替换掉了。

ES6新增值比较函数Object.is()

ES6新增加的比较方法大多数情况下等价于’===’

1
2
3
4
5
6
7
8
9
10
11
12
13
14

1 === 1 // true
Object.is(1, 1) // true

'a' === 'a' // true
Object.is('a', 'a') // true

true === true // true
Object.is(true, true) // true

null === null // true
Object.is(null, null) // true

undefined === undefined // true
Object.is(undefined, undefined) // true

但对于NaN、0、+0、 -0，则和 “===” 不同