• 面向对象插件编写过程


     1 //组件开发 : 多组对象,像兄弟之间的关系( 代码复用的一种形式 )
     2 window.onload=function(){
     3     var oDiv=document.getElementById('div1');
     4     var disX=0;
     5     var disY=0;
     6 
     7     oDiv.onmousedown=function(ev){
     8         var ev=ev || window.event;
     9         disX=ev.clientX-oDiv.offsetLeft;
    10         disY=ev.clientY-oDiv.offsetTop;
    11 
    12         document.onmousemove=function(ev){
    13             var ev=ev || window.event;
    14             oDiv.style.left=ev.clientX-disX+'px';
    15             oDiv.style.top = ev.clientY - disY + 'px';
    16         }
    17 
    18         document.onmouseup = function(){
    19             document.onmousemove = null;
    20             document.onmouseup = null;
    21         };
    22         return false;
    23     }
    24 }
     1 //先变形
     2 var oDiv=null;
     3 var disX=0;
     4 var disY=0;
     5 window.onload=function(){
     6     oDiv=document.getElementById('div1');
     7     init();
     8 }
     9 function init(){
    10     oDiv.onmousedown=fnDown;
    11 }
    12 function fnDown(ev){
    13     var ev=ev || window.event;
    14     disX=ev.clientX-oDiv.offsetLeft;
    15     disY=ev.clientY-oDiv.offsetTop;
    16     document.onmousemove = fnMove;
    17     document.onmouseup = fnUp;
    18     
    19     return false;
    20 }
    21 function fnMove(ev){
    22     var ev = ev || window.event;
    23     oDiv.style.left = ev.clientX - disX + 'px';
    24     oDiv.style.top = ev.clientY - disY + 'px';
    25 }
    26 function fnUp(){
    27     document.onmousemove = null;
    28     document.onmouseup = null;
    29 }
     1 //改成面向对象
     2 window.onload=function(){
     3     var d1=new Drag('div1');
     4     d1.init();
     5 
     6     var d2=new Drag('div2');
     7     d2.init();
     8 }
     9 function Drag(id){
    10     this.oDiv=document.getElementById(id);
    11     this.disX=0;
    12     this.disY=0;
    13 }
    14 Drag.prototype.init=function(){
    15     var This=this;
    16     this.oDiv.onmousedown=function(ev){
    17         var ev = ev || window.event;
    18         This.fnDown(ev)
    19         return false;
    20     }
    21 }
    22 Drag.prototype.fnDown=function(ev){
    23     var This=this;
    24     this.disX=ev.clientX-this.oDiv.offsetLeft;
    25     this.disY=ev.clientY-this.oDiv.offsetTop;
    26     document.onmousemove = function(){
    27         var ev = ev || window.event;
    28         This.fnMove(ev);
    29     };
    30     document.onmouseup = this.fnUp;
    31 }
    32 Drag.prototype.fnMove=function(ev){
    33     this.oDiv.style.left = ev.clientX - this.disX + 'px';
    34     this.oDiv.style.top = ev.clientY - this.disY + 'px';
    35 }
    36 Drag.prototype.fnUp = function(){
    37     document.onmousemove = null;
    38     document.onmouseup = null;
    39 };
     1 //组件开发 : 多组对象,像兄弟之间的关系( 代码复用的一种形式 )
     2 window.onload=function(){
     3     var d1=new Drag();
     4     d1.init('div1');
     5 
     6     var d2=new Drag();
     7     d2.init('div2');
     8 
     9     var d3=new Drag();
    10     d3.init('div3');
    11 
    12     var d4=new Drag();
    13     d4.init('div4');
    14 
    15 }
    16 
    17 function Drag(){
    18     this.obj = null;
    19     this.disX = 0;
    20     this.disY = 0;
    21 }
    22 Drag.prototype.init = function(id){
    23     
    24     var This = this;
    25     
    26     this.obj = document.getElementById(id);
    27     
    28     this.obj.onmousedown = function(ev){
    29         var ev = ev || window.event;
    30         This.fnDown(ev);
    31         
    32     
    33         
    34         document.onmousemove = function(ev){
    35             var ev = ev || window.event;
    36             This.fnMove(ev);
    37         };
    38         document.onmouseup = function(){
    39             This.fnUp();
    40             
    41             
    42             
    43         };
    44         return false;
    45     };
    46     
    47 };
    48 
    49 Drag.prototype.fnDown = function(ev){
    50     this.disX = ev.clientX - this.obj.offsetLeft;
    51     this.disY = ev.clientY - this.obj.offsetTop;
    52 };
    53 Drag.prototype.fnMove = function(ev){
    54     this.obj.style.left = ev.clientX - this.disX + 'px';
    55     this.obj.style.top = ev.clientY - this.disY + 'px';
    56 };
    57 Drag.prototype.fnUp = function(){
    58     document.onmousemove = null;
    59     document.onmouseup = null;
    60 };
    61 
    62 function extend(obj1,obj2){
    63     for(var attr in obj2){
    64         obj1[attr] = obj2[attr];
    65     }
    66 }
     1 window.onload=function(){
     2     var d1=new Drag();
     3     d1.init({
     4         id:'div1'
     5     });
     6 
     7     var d2=new Drag();
     8     d2.init({  //配置参数
     9         id:'div2',
    10         toDown:function(){
    11             document.title = 'hello';
    12             document.body.style.background = 'black';
    13         }
    14     });
    15 
    16     var d3 = new Drag();
    17     d3.init({    //配置参数
    18         id : 'div3',
    19         toDown : function(){
    20             document.title = 'hello';
    21         },
    22         toUp : function(){
    23             document.title = 'world';
    24         }
    25     });
    26 
    27     var d4=new Drag();
    28     d4.init({    //配置参数
    29         id : 'div4',
    30         toUp : function(){
    31             document.title = 'hello vue';
    32         }
    33     });
    34 
    35 }
    36 
    37 function Drag(){
    38     this.obj = null;
    39     this.disX = 0;
    40     this.disY = 0;
    41 
    42     this.settings={ //默认参数
    43         toDown:function(){},
    44         toUp:function(){}
    45     }
    46 }
    47 Drag.prototype.init = function(opt){
    48     
    49     var This = this;
    50     
    51     this.obj = document.getElementById(opt.id);
    52     
    53     extend(this.settings,opt);
    54     this.obj.onmousedown = function(ev){
    55         var ev = ev || window.event;
    56         This.fnDown(ev);
    57         
    58         This.settings.toDown();
    59         
    60         document.onmousemove = function(ev){
    61             var ev = ev || window.event;
    62             This.fnMove(ev);
    63         };
    64         document.onmouseup = function(){
    65             This.fnUp();
    66             This.settings.toUp();
    67             
    68             
    69         };
    70         return false;
    71     };
    72     
    73 };
    74 
    75 Drag.prototype.fnDown = function(ev){
    76     this.disX = ev.clientX - this.obj.offsetLeft;
    77     this.disY = ev.clientY - this.obj.offsetTop;
    78 };
    79 Drag.prototype.fnMove = function(ev){
    80     this.obj.style.left = ev.clientX - this.disX + 'px';
    81     this.obj.style.top = ev.clientY - this.disY + 'px';
    82 };
    83 Drag.prototype.fnUp = function(){
    84     document.onmousemove = null;
    85     document.onmouseup = null;
    86 };
    87 
    88 function extend(obj1,obj2){
    89     for(var attr in obj2){
    90         obj1[attr] = obj2[attr];
    91     }
    92 }
    日常所遇,随手而记。
  • 相关阅读:
    SqlServer无备份下误删数据恢复
    vue——storage命名冲突问题解决 前端
    vue——bus总线 前端
    elementUI——elform表单验证,表单项切换显示,校验错误信息未清除 前端
    elementUI——input输入框,设置autocomplete="off"无效问题 前端
    elementUI——table空单元格自动填充占位符,编辑后数据更新视图未更新问题 前端
    vue——爷孙组件之间通信 前端
    vue——路由守卫beforeEach,next(), next('/'), next({...to, repalce: true})说明及实例问题 前端
    elementUI——zindex自增问题 前端
    vue——vuecli3项目打包时区分环境以及环境变量undefined问题解决 前端
  • 原文地址:https://www.cnblogs.com/zhihou/p/8117089.html
Copyright © 2020-2023  润新知