class语法相关笔记

作者: UmustHU | 来源:发表于2018-08-24 15:06 被阅读0次

class语法相关笔记
React 学习笔记
Class的基本语法（笔记）
v-bind 及 class 与 style 绑定
Dart相关语法笔记
Day9：Vue文档精读3——渲染&事件
Class 与 Style 如何动态绑定？
Class语法
python dict() 函数使用
class 相关

用class写的一个小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        .box{
            position:absolute;
            top:0;
            width:100px;
            height:100px;
            background-color:cornflowerblue;
        }
        .left{left:0;}
        .right{right:0;}
    </style>
</head>
<body>
<div id="div1" class="box left"></div>
<div id="div2" class="box right"></div>
<script>
    class Drag{
        constructor(id){
            this.oDiv = document.querySelector(id);
            this.disX = 0;
            this.disY = 0;
            this.init()
        }
        init(){
            this.oDiv.onmousedown = function(event){
                this.disX = event.clientX - this.oDiv.offsetLeft;
                this.disY = event.clientY - this.oDiv.offsetTop;

                document.onmousemove = this.fnMove.bind(this);
                document.onmouseup = this.fnUp.bind(this);
            }.bind(this);
        }
        fnMove(event){
            this.oDiv.style.left = event.clientX - this.disX + 'px';
            this.oDiv.style.top = event.clientY - this.disY + 'px';
        }
        fnUp(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
    //从父级继承
    class LimitDrag extends Drag{
        fnMove(event){
            super.fnMove(event);//执行父级的fnMove函数
            //以下内容为专属子级的操作
            if(this.oDiv.offsetLeft <= 0){
                this.oDiv.style.left = 0;
            }
            if(this.oDiv.offsetTop <= 0){
                this.oDiv.style.top = 0;
            }
        }
    }
    new Drag('#div1')
    new LimitDrag('#div2')
</script>
</body>
</html>