1.实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
mousedown事件触发后，开始拖拽
mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
mouseup时，拖拽结束
需要注意浏览器边界的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
height:100px;
width:100px;
background:red;
position:absolute;
cursor:move;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
var box = document.getElementById("box");
box.onmousedown = function(evt){
evt = evt || window.event;
var offX = evt.offsetX;
var offY = evt.offsetY;
//火狐
document.onmousemove = function(evt){
evt = evt || window.event;
var posX = evt.clientX;
var posY = evt.clientY;
console.log(posX);
box.style.left = (posX-offX)+'px';
box.style.top = (posY-offY)+'px';
}
box.onmouseup = function(evt){
evt = evt || window.event;
document.onmousemove = null;
document.onmousedown = null;
}
}
</script>
</html>
2.深拷贝
基本类型不存在，引用类型需要考虑是否需要深拷贝；
基本类型包括：number，string，boolean，null，undefined
引用类型包括：Object，Array，Date，RegExp，Function
- 对象中没有函数的情况下可以使用
JSON.stringify(obj)然后使用JSON.parse(obj)实现；
var _default = {
"one":"1",
"two":[1,2,3,4],
"three":function(){
console.log("函数");
}
};
var string_default = JSON.stringify(_default);
var parse_default = JSON.parse(string_default);
console.log(_default);
console.log(string_default);
console.log(parse_default);
结果如下：
image.png
- Object.assign()
Object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。语法
Object.assign(target, ...sources)
target
目标对象。
sources
源对象。
var _default = {
"one": "1",
"two": [1, 2, 3, 4],
"three": function () {
console.log("函数");
}
};
var copy_default = Object.assign({},_default);
console.log(_default);
console.log(copy_default);
image.png
