js面向对象练习-拖拽效果

haoguo 发布于2019-08-21 10:26 / 889人阅读

摘要：因为对象只出现在事件中，所以我们要把对象保存变量，然后通过参数传递后面的函数和函数就没什么要注意的地方了要注意的问题关于指针的问题，面向对象里面特别重要拓展阅读关于对象的问题，对象只出现在事件里面，所以写方法的时候要注意一下

首先来了解一下，面向对象练习的基本规则和问题：

先写出普通的写法，然后改成面向对象写法项

普通方法变形
·尽量不要出现函数嵌套函数
·可以有全局变量
·把onload函数中不是赋值的语句放到多带带函数中

改成面向对象
·全局变量就是属性
·函数就是方法
·onload中创建对象
·改this指针问题

先把拖拽效果的布局完善好：
HTML结构：

csc样式：
#box{position: absolute;width: 200px;height: 200px;background: red;}

第一步，首先把面向过程的拖拽回顾一下

window.onload = function (){
    // 获取元素和初始值
    var oBox = document.getElementById("box"),
        disX = 0, disY = 0;

    // 容器鼠标按下事件
    oBox.onmousedown = function (e){
        var e = e || window.event;
        disX = e.clientX - this.offsetLeft;
        disY = e.clientY - this.offsetTop;

        document.onmousemove = function (e){
            var e = e || window.event;
            oBox.style.left = (e.clientX - disX) + "px";
            oBox.style.top = (e.clientY - disY) + "px";
        };

        document.onmouseup = function (){
            document.onmousemove = null;
            document.onmouseup = null;
        };

        return false;
    };
};

第二步，把面向过程改写为面向对象

window.onload = function (){
    var drag = new Drag("box");

    drag.init();
};

// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}

Drag.prototype.init = function (){
    // this指针
    var me = this;

    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);

        // 阻止默认事件
        return false;
    };
};

Drag.prototype.mouseDown = function (e){
    // this指针
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;

    document.onmousemove = function (e){
        var e = e || window.event;

        me.mouseMove(e);
    };  

    document.onmouseup = function (){
        me.mouseUp();
    }
};

Drag.prototype.mouseMove = function (e){
    this.obj.style.left = (e.clientX - this.disX) + "px";
    this.obj.style.top = (e.clientY - this.disY) + "px";
};

Drag.prototype.mouseUp = function (){
    document.onmousemove = null;
    document.onmouseup = null;
};

第三步，看看代码有哪些不一样

首页使用了构造函数来创建一个对象：

// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}

遵守前面的写好的规则，把全局变量都变成属性！

然后就是把函数都写在原型上面：

Drag.prototype.init = function (){
};

Drag.prototype.mouseDown = function (){
};

Drag.prototype.mouseMove = function (){
};

Drag.prototype.mouseUp = function (){
};

先来看看init函数：

Drag.prototype.init = function (){
    // this指针
    var me = this;

    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);

        // 阻止默认事件
        return false;
    };
};

我们使用me变量来保存了this指针，为了后面的代码不出现this指向的错误

接着是mouseDown函数:

Drag.prototype.mouseDown = function (e){
    // this指针
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;

    document.onmousemove = function (e){
        var e = e || window.event;

        me.mouseMove(e);
    };  

    document.onmouseup = function (){
        me.mouseUp();
    }
};

改写成面向对象的时候要注意一下event对象。因为event对象只出现在事件中，所以我们要把event对象保存变量，然后通过参数传递！

后面的mouseMove函数和mouseUp函数就没什么要注意的地方了！

要注意的问题

关于this指针的问题，面向对象里面this特别重要！
this拓展阅读:
http://div.io/topic/809

关于event对象的问题，event对象只出现在事件里面，所以写方法的时候要注意一下！

GPU云服务器云服务器 js拖拽效果 js 面向对象视频 oop面向对象 js js面向对象开发表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85521.html

JS面向对象1

摘要：什么是面向对象编程用对象的思想去写代码，就是面向对象编程过程式写法面向对象写法我们一直都在使用对象数组时间面向对象编程的特点抽象抓住核心问题封装只能通过对象来访问方法继承从已有对象上继承出新的对象多态多对象的不同形态对象的组成方法行为操作对什么是面向对象编程用对象的思想去写代码，就是面向对象编程过程式写法面向对象写法我们一直都在使用对象数组Array 时间Dat...

xumenger 2019-08-19 18:15 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

cnTomato 2019-08-22 10:59 评论0 收藏0
task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

赵春朋 2019-08-01 15:00 评论0 收藏0