js 拖拽实现面向对象

1.js 支持面向对象编程，但只是基于面向对象，不使用类或者接口。
2.演变 工厂模式-------》构造函数模式----------》原型模式

工厂模式的缺点：
　　①函数内部new ,不太符合 new 函数这种写法     ----解决方法 构造函数
　　②资源浪费，工厂模式中函数中的方法，每一个新函数都会有自己的一个函数------解决方法 原型模式

3.构造函数的缺点：每个成员都无法得到复用，包括函数。
原型链的缺点：对象实例共享所有继承的属性和方法。

因此不适合单独使用，解决办法在子类构造函数内部调用超类的构造函数，就做到了每个实例都有自己的属性

5.最好的办法寄生组合继承：使用原型链继承共享的属性和方法，而通过借用构造函数继承实例的属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script>

    function Person(name,sex){

        this.name = name;

        this.sex= sex;

    }

    Person.prototype.sayName = function(){

        alert(this.name);

    };

    Person.prototype.saySex = function(){

        alert(this.sex);

    };

    function Worker(name,sex,job){

        Person.call(this,name,sex); //调用构造函数

        this.job = job;

    }

    /*Worker.prototype = Person.prototype; //引用的写法，这样写改变子类的方法会把父类的方法也改变了*/

    for(var attr in Person.prototype){ //这样写就不会了

        Worker.prototype[attr] = Person.prototype[attr];

    }

    Worker.prototype.sayJob = function(){

        alert(this.job);

    };

    Worker.prototype.sayName = function(){

        alert('123');

    };

    window.onload = function(){

        var person1 = new Person('ww','女');

        person1.sayName();

        var instance = new Worker('leo','男','soft');

        instance.sayName();

        instance.sayJob();

    };

</script>

</head>

<body>

</body>

</html>

// JavaScript Document

    /*构造函数*/

    function Drag(id){

        this.disX = 0;

        this.disY = 0;

        this.oDiv = document.getElementsByTagName(id)[0];

        var _this = this;

        this.oDiv.onmousedown = function(ev){

            _this.fnDown(ev);

            return false;

        };

    }

    Drag.prototype.fnDown = function(ev){

        var oEvent = ev || event;

        this.disX = oEvent.clientX - this.oDiv.offsetLeft;

        this.disY = oEvent.clientY - this.oDiv.offsetTop;

        var _this = this;

        document.onmouseover = function(ev){

            _this.fnMove(ev);

        };

        document.onmouseup = function(){

            _this.fnUp(ev);

        };

    }

    Drag.prototype.fnMove = function(ev){

        var ev = ev || event;

        this.oDiv.style.left = ev.clientX - this.disX+'px';

        this.oDiv.style.top = ev.clientY - this.disY+'px';

   }

   Drag.prototype.fnUp = function(){

        document.onmouseover = document.onmouseup = null;

   }

// JavaScript Document

function LimateDrag(id){

    Drag.call(this,id); //继承属性

}

//继承方法

for(var i in Drag.prototype){

    LimateDrag.prototype[i] = Drag.prototype[i]

}

LimateDrag.prototype.fnMove = function(ev){

        var ev = ev || event;

        var l = ev.clientX - this.disX;

        var t = ev.clientY - this.disY;

        if(l < 0){

            l = 0;

        }else if(l >= document.documentElement.clientWidth-this.oDiv.offsetWidth ){

            l = document.documentElement.clientWidth-this.oDiv.offsetWidth;

        }

        if(t < 0){

            t = 0;

        }else if(t >= document.documentElement.clientHeight-this.oDiv.offsetHeight){

            t = document.documentElement.clientHeight-this.oDiv.offsetHeight;

        }

        this.oDiv.style.left = l+'px';

        this.oDiv.style.top = t+'px';

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    div{width:100px;height:100px;background:red;position:absolute;left:0;top:0;}

</style>

<script src ='Drag.js'></script>

<script src ='LimateDrag.js'></script>

<script>

    window.onload = function(){

        new LimateDrag('div');

    };

</script>

</head>

<body>

<div></div>

</body>

</html>

巴特西

js 拖拽实现面向对象

最新文章

热门文章