JavaScript面向对象的程序之拖拽组件的开发Demo——xyp_hf

本文链接：https://blog.csdn.net/xyphf/article/details/77448311

今天我们聊一聊JavaScript面向对象的程序之组件的开发，我们写个拖拽组件的Demo例子，来讲述一下这里面的坑

组件开发其实也是代码复用的一种形式，很多朋友会问，那么组件和继承到底有什么区别?
我们说继承更像子类继承父类，那么组件更像兄弟之间的关系，它是一种更丰富的代码复用形式，表现出多种不同的形态

我们先说一下今天这个拖拽组件的需求
div1红色方块点击按下的时候，无变化；
div2黄色方块点击按下的时候,title变成’hello’；
div3蓝色方块点击按下的时候，title变成’和派孔明’，鼠标抬起的时候变成’好帅’
div4绿色方块点击按下的时候无变化，鼠标抬起的时候,title变成’byebye’

坑一：
为了使div2改变title，我们给它写个参数(回调函数)，但是当div1参数不写的时候程序会报错;
为了使div3点击按下的时候，title变成’和派孔明’，鼠标抬起的时候变成’好帅’，我们写两个参数(回调函数)，这时候div2只有两个参数也会报错；
为了使div4点击按下的时候无变化，鼠标抬起的时候,title变成’byebye’，我们给他写个回调函数，但是我们发现title是鼠标按下的时候变化，不是鼠标抬起的时候变化的

坑二：
我们说我们传的参数和形参是一一对应的，不会第一个参数对上第二个形参，要解决这个问题我们可以在传参时在参数前面写个空函数作为占位符，但是参数一旦多起来就不好做了，或者说过于麻烦，所以说在传参过程中可能会出现参数顺序的问题。

所以在写组件的时候要解决两个坑：
1、参数不写的时候会报错。
2、当参数特别多，有的写有的不写会出现参数顺序的问题

那么我们来解决这两个问题
首先我们解决顺序问题，参数多的时候会出现顺序问题，那么只有一个参数不就不会出现问题了吗，那么一个参数怎么能够代表多个值呢，我们可以使用JSON的形式，JSON整体代表一个参数，但是里面的键值对可以代表很多参数，但它总体还是表示一个参数，我们举个例子

        function show(opt) {

        }

        show({ //写成json的形势
            id : 'div1',
            toDown : function() { },
            toUp : function() {}
        });

我再来解决当参数不写的时候，程序会报错

在前面我们说过什么是面向对象的拷贝继承?

        var a = { //配置参数
            name = '小明';
        }
        var b = { // 默认参数
            name : '小强';
        }
        extend(b,a);
        // 把a赋值给b，这时候如果a有name就会被覆盖为小明，如没有默认是小强
        //a对象要把所有的内容复制给b，在两个key值相同的情况下，‘小明’就把‘小强覆盖了’
        // 注意：两个对象的key一定要相同，否则覆盖不

        // 拷贝继承函数
        function extend(obj1,obj2) {
            for(var attr in obj2)
            {
                obj1[att2] = obj2[attr];
            }
        }

在面向对象的程序当中，通常我们把a称作“配置参数”，把b称作“默认参数”.
意思是当程序有配置的时候执行配置，当程序没有配置的时候执行默认。也就是说不管是执行配置还是执行默认都不会是undefined。
配置参数的优先级要比默认参数的优先级高，只有配置参数没有的情况下，才会执行默认参数。这就是解决参数不写报错时的方法。

了。

下面是拖拽组件DEMO的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>拖拽组件开发</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        #div1{ width:100px;height: 100px;background: red;position: absolute}
        #div2{ width:100px;height: 100px;background: yellow;position: absolute;left: 100px; }
        #div3{ width:100px;height: 100px;background: blue;position: absolute;left: 200px;}
        #div4{ width:100px;height: 100px;background: green;position: absolute;left: 300px; }
    </style>
    <script>
        window.onload = function(){
            var d1 = new Drag();
            d1.init({ //配置参数
                id : 'div1'
            });

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

            var d3 = new Drag();
            d3.init({ //配置参数
                id : 'div3',
                fnDown : function() {
                    document.title = "和派孔明";
                },
                fnUp : function() {
                    document.title = '好帅';
                }
            });

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

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

            this.settings = { //默认参数
                fnDown : function () { },
                fnUp : 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.fnDown();
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
                    This.fnMove(ev);
                };
                document.onmouseup = function(){
                    This.fnUp();
                    This.settings.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];
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

这时候我们发现div1红色方块点击按下的时候，无变化；div2黄色方块点击按下的时候,title变成’hello’；div3蓝色方块点击按下的时候，title变成’和派孔明’，鼠标抬起的时候变成’好帅’；div4绿色方块点击按下的时候无变化，鼠标抬起的时候,title变成’byebye’，相互之间不影响。