class：
类一般包含属性、方法。命名规范：大驼峰格式。
注意：class不存在预编译，即提升。所以需要先定义后使用。
class里面取值函数（getter)和存值函数(setter)。
静态方法：
继承：
简单案例：（简单的拖拽）
// 普通拖拽
class Durg{
constructor(className){
this.oDiv = document.querySelector(className);
this.disX = 0;
this.disY = 0;
this.init();
};
init(){
this.oDiv.onmousedown = function(ev){
console.log(ev.clientX,ev.clientY);
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
return false;
}.bind(this);
};
fnMove(ev){
// console.log('11',ev.clientX,ev.clientY);
this.oDiv.style.left = ev.clientX - this.disX + 'px';
this.oDiv.style.top = ev.clientY - this.disY + 'px';
};
fnUp(){
document.onmousemove = null;
document.onmouseup = null;
}
}
// 限制移动位置
class limitDurg extends Durg{
fnMove(ev){
super.fnMove(ev);// 调用父类方法
if(this.oDiv.offsetLeft <=0){
this.oDiv.style.left = 0;
}
if(this.oDiv.offsetTop <=0){
this.oDiv.style.top = 0;
}
let limitRight = window.innerWidth - this.oDiv.offsetWidth;
let limitBottom = window.innerHeight - this.oDiv.offsetHeight;
if (this.oDiv.offsetLeft>limitRight){
this.oDiv.style.left = limitRight+'px';
}
if (this.oDiv.offsetTop>limitBottom){
this.oDiv.style.top = limitBottom+'px';
}
}
}
new Durg('.div1')
new limitDurg('.div2')
