面向对象插件编写过程

//组件开发 : 多组对象，像兄弟之间的关系( 代码复用的一种形式 )
window.onload=function(){
    var oDiv=document.getElementById('div1');
    var disX=0;
    var disY=0;

    oDiv.onmousedown=function(ev){
        var ev=ev || window.event;
        disX=ev.clientX-oDiv.offsetLeft;
        disY=ev.clientY-oDiv.offsetTop;

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

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

//先变形
var oDiv=null;
var disX=0;
var disY=0;
window.onload=function(){
    oDiv=document.getElementById('div1');
    init();
}
function init(){
    oDiv.onmousedown=fnDown;
}
function fnDown(ev){
    var ev=ev || window.event;
    disX=ev.clientX-oDiv.offsetLeft;
    disY=ev.clientY-oDiv.offsetTop;
    document.onmousemove = fnMove;
    document.onmouseup = fnUp;
    
    return false;
}
function fnMove(ev){
    var ev = ev || window.event;
    oDiv.style.left = ev.clientX - disX + 'px';
    oDiv.style.top = ev.clientY - disY + 'px';
}
function fnUp(){
    document.onmousemove = null;
    document.onmouseup = null;
}

//改成面向对象
window.onload=function(){
    var d1=new Drag('div1');
    d1.init();

    var d2=new Drag('div2');
    d2.init();
}
function Drag(id){
    this.oDiv=document.getElementById(id);
    this.disX=0;
    this.disY=0;
}
Drag.prototype.init=function(){
    var This=this;
    this.oDiv.onmousedown=function(ev){
        var ev = ev || window.event;
        This.fnDown(ev)
        return false;
    }
}
Drag.prototype.fnDown=function(ev){
    var This=this;
    this.disX=ev.clientX-this.oDiv.offsetLeft;
    this.disY=ev.clientY-this.oDiv.offsetTop;
    document.onmousemove = function(){
        var ev = ev || window.event;
        This.fnMove(ev);
    };
    document.onmouseup = this.fnUp;
}
Drag.prototype.fnMove=function(ev){
    this.oDiv.style.left = ev.clientX - this.disX + 'px';
    this.oDiv.style.top = ev.clientY - this.disY + 'px';
}
Drag.prototype.fnUp = function(){
    document.onmousemove = null;
    document.onmouseup = null;
};

//组件开发 : 多组对象，像兄弟之间的关系( 代码复用的一种形式 )
window.onload=function(){
    var d1=new Drag();
    d1.init('div1');

    var d2=new Drag();
    d2.init('div2');

    var d3=new Drag();
    d3.init('div3');

    var d4=new Drag();
    d4.init('div4');

}

function Drag(){
    this.obj = null;
    this.disX = 0;
    this.disY = 0;
}
Drag.prototype.init = function(id){
    
    var This = this;
    
    this.obj = document.getElementById(id);
    
    this.obj.onmousedown = function(ev){
        var ev = ev || window.event;
        This.fnDown(ev);
        
    
        
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            This.fnMove(ev);
        };
        document.onmouseup = function(){
            This.fnUp();
            
            
            
        };
        return false;
    };
    
};

Drag.prototype.fnDown = function(ev){
    this.disX = ev.clientX - this.obj.offsetLeft;
    this.disY = ev.clientY - this.obj.offsetTop;
};
Drag.prototype.fnMove = function(ev){
    this.obj.style.left = ev.clientX - this.disX + 'px';
    this.obj.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function(){
    document.onmousemove = null;
    document.onmouseup = null;
};

function extend(obj1,obj2){
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}

window.onload=function(){
    var d1=new Drag();
    d1.init({
        id:'div1'
    });

    var d2=new Drag();
    d2.init({  //配置参数
        id:'div2',
        toDown:function(){
            document.title = 'hello';
            document.body.style.background = 'black';
        }
    });

    var d3 = new Drag();
    d3.init({    //配置参数
        id : 'div3',
        toDown : function(){
            document.title = 'hello';
        },
        toUp : function(){
            document.title = 'world';
        }
    });

    var d4=new Drag();
    d4.init({    //配置参数
        id : 'div4',
        toUp : function(){
            document.title = 'hello vue';
        }
    });

}

function Drag(){
    this.obj = null;
    this.disX = 0;
    this.disY = 0;

    this.settings={ //默认参数
        toDown:function(){},
        toUp:function(){}
    }
}
Drag.prototype.init = function(opt){
    
    var This = this;
    
    this.obj = document.getElementById(opt.id);
    
    extend(this.settings,opt);
    this.obj.onmousedown = function(ev){
        var ev = ev || window.event;
        This.fnDown(ev);
        
        This.settings.toDown();
        
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            This.fnMove(ev);
        };
        document.onmouseup = function(){
            This.fnUp();
            This.settings.toUp();
            
            
        };
        return false;
    };
    
};

Drag.prototype.fnDown = function(ev){
    this.disX = ev.clientX - this.obj.offsetLeft;
    this.disY = ev.clientY - this.obj.offsetTop;
};
Drag.prototype.fnMove = function(ev){
    this.obj.style.left = ev.clientX - this.disX + 'px';
    this.obj.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function(){
    document.onmousemove = null;
    document.onmouseup = null;
};

function extend(obj1,obj2){
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}