JavaScript 回顾
1.防抖和节流:
为什么要防抖
有的操作是高频触发的,但是其实触发一次就好了,比如我们短时间内多次缩放页面,那么我们不应该每次缩放都去执行操作,应该只做一次就好。再比如说监听输入框的输入,不应该每次都去触发监听,应该是用户完成一段输入后在进行触发。
防抖就是防止抖动,避免事件的重复触发
原理是定时器和延时器:
var content = document.getElementById("content");
var num = 1;
function count(){
content.innerHTML = num++;
}
content.onmousemove = count;
let times;
content.onmousemove = function (){
clearTimeout(times);
let obj = times;
times = setTimeout(()=>{
times = null;
},1000)
console.log(obj);
if(!obj){
content.innerHTML = num++;
}
};
console.log(Object.is(1,1));
console.log(Object.is(1,"1"));
console.log(Object.is("",null));
2.鼠标拖拽效果
<div id="box"></div>
* {
margin: 0;
padding: 0;
}#box {
width: 200px;
height: 200px;
background: red;
position: absolute;
}
// 1.获取元素
var oBox = document.getElementById("box");// 2.鼠标按下事件
oBox.onmousedown = function (ev) {
var ev = ev || window.event;
// 获取鼠标相对于盒子的坐标
var x2 = ev.offsetX;
var y2 = ev.offsetY;// 鼠标移动
document.onmousemove = function (ev) {
var ev = ev || window.event;
var x3 = ev.pageX;
var y3 = ev.pageY;
oBox.style.top = y3 - y2 + "px";
oBox.style.left = x3 - x2 + "px"
}
}// 4.鼠标松开事件
document.onmouseup = function () {
document.onmousemove = function () {}
}
利用鼠标指针的坐标(event.pageX,event.pageY)与鼠标相对于拖拽元素的坐标(event.offsetX,event.offsetY)的差来计算被拖拽元素的坐标值。
鼠标事件:
项目 | Value |
---|---|
click | 单击鼠标左键时发生,如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时,同样会触发这个事件 |
dblclick | 双击鼠标左键时发生,如果右键也按下则不会发生 |
mousedown | 单击任意一个鼠标按钮时发生 |
mouseout | 鼠标指针位于某个元素上且将要移出元素的边界时发生 |
mouseover | 鼠标指针移出某个元素到另一个元素上时发生 |
mouseup | 松开任意一个鼠标按钮时发生 |
mousemove | 鼠标在某个元素上时 持续 发生 |
鼠标定位
当事件发生时,获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性,不同浏览器分别在各自事件对象中定义了不同的属性,说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标,但是由于它们参照的坐标系不同,导致精确计算鼠标的位置比较麻烦。
属性 | 说明 | 兼容性 |
---|---|---|
clientX | 以浏览器窗口左上顶角为原点,定位 x 轴坐标 | 所有浏览器,不兼容 Safari |
clientY | 以浏览器窗口左上顶角为原点,定位 y 轴坐标 | 所有浏览器,不兼容 Safari |
offsetX | 以当前事件的目标对象左上顶角为原点,定位 x 轴坐标 | 所有浏览器,不兼容 Mozilla |
offsetY | 以当前事件的目标对象左上顶角为原点,定位 y 轴坐标 | 所有浏览器,不兼容 Mozilla |
pageX | 以 document 对象(即文档窗口)左上顶角为原点,定位 x 轴坐标 | 所有浏览器,不兼容 IE |
pageY | 以 document 对象(即文档窗口)左上顶角为原点,定位 y 轴坐标 | 所有浏览器,不兼容 IE |
screenX | 计算机屏幕左上顶角为原点,定位 x 轴坐标 | 所有浏览器 |
screenY | 计算机屏幕左上顶角为原点,定位 y 轴坐标 | 所有浏览器 |
layerX | 最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 x 轴坐标 | Mozilla 和 Safari |
layerY | 最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 y 轴坐标 | Mozilla 和 Safari |
3.深拷贝和浅拷贝
深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象,是“值”而不是“引用”(不是分支)
1.拷贝第一层级的对象属性或数组元素
递归拷贝所有层级的对象属性和数组元素
2.深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大
// 到时候我们传值到函数里
function deepClone(obj) {
// 我们先判断声明一个对象或数组 如果是数组就是[] 如果不是数组就是{}
let objClone = Array.isArray(obj) ? [] : {}
// 判断obj是否是对象 []也是对象object
if (obj && typeof obj === "object") {
// 我们就循环对象或者数组
for (key in obj) {
// 判断obj是否存在key
if (obj.hasOwnProperty(key)) {
// 判断obj[key]是否为对象 如果是递归复制
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key])
} else {
// 如果不是对象 简单复制
objClone[key] = obj[key]
}
}
}
}
// 返回objClone
return objClone
}
let a = [1, 2, 3, 4]
b = deepClone(a)
a[0] = 2
console.log(a) //[2, 2, 3, 4]
console.log(b) //[1, 2, 3, 4]
浅拷贝:
1.浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存(分支)。
2.浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。
如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。
上一篇: CentOS 8 服务器构建 L2TP 服务器(通过 IPsec)操作指南 - [lns default] 模块,将 local ip 设置为 LNS 的网关 IP 地址。
下一篇: 抖音APP实现方案核心技术介绍
推荐阅读
-
JavaScript] let、const 和 var 之间的区别。let、const 和 var 之间的区别。
-
回顾你所写的内容。
-
前端 JavaScript 超级实用技巧!创建逻辑和动画风格的通道~
-
请问在 JavaScript EN 中将字节大小转换为 KB、MB、GB 的正确方法。
-
JavaScript 原型、原型链
-
JavaScript 在各种源代码中的实现(前端面试笔试必备)
-
掌握 JavaScript 面向对象编程的核心代码:深入分析 JavaScript 面向对象机制的对象基础、原型模式和继承策略全面指导高效创建高质量、可维护的代码 - V. 继承机制
-
基本 JavaScript 安装指南
-
JavaScript--自动填写问卷
-
Javascript]移除问卷星以禁用选中文本复制和右键菜单方法