Today, let's talk about the component development of JavaScript object-oriented programs. Let's write an example of dragging component Demo to describe the pit in it.

Component development is actually a form of code reuse, many friends will ask, then what is the difference between components and inheritance?
We say that inheritance is more like subclass inheriting parent class, then component is more like the relationship between brothers. It is a more abundant form of code reuse, showing a variety of different forms.

Let's start with the requirements for today's drag-and-drop component.
When the div1 red box is clicked, there is no change.
When the yellow box of div2 is clicked, title becomes `hello'.
When the div3 blue box is clicked and pressed, the title becomes'and Paikongming', and when the mouse is raised, it becomes' handsome'.
The div4 green box clicks and clicks unchanged. When the mouse is raised, the title becomes'byebye'

Pits 1:
In order to change the title of div2, we write a parameter (callback function) to it, but when the div1 parameter is not written, the program will report an error.
In order to make div3 click and press, title becomes `and Paikongming', and mouse lift becomes `handsome', we write two parameters (callback function). At this time, div2 only has two parameters will also report errors.
In order to make div4 click and press unchanged, when the mouse is raised, Title becomes'byebye'. We write a callback function for div4, but we find that title changes when the mouse is pressed, not when the mouse is raised.

Pit two:
We say that the parameters we pass are one-to-one correspondence, not the first parameter to the second parameter. To solve this problem, we can write an empty function in front of the parameters as a placeholder, but once the parameters hide, it is not easy to do, or it is too troublesome, so the problem of parameter order may arise in the process of parameter transmission.

So there are two pits to solve when writing components:
1. Errors will be reported when parameters are not written.
2. When there are too many parameters, the order of parameters will appear when some are written or not.

So let's solve these two problems.
First of all, we solve the problem of order, when there are many parameters, there will be a problem if there is only one parameter. Then how can a parameter represent multiple values? We can use the form of JSON, JSON as a whole represents a parameter, but the key pair inside can represent many parameters, but it still represents a parameter as a whole. An example

        function show(opt) {

        }

        show({ //The situation written as json
            id : 'div1',
            toDown : function() { },
            toUp : function() {}
        });

I'll fix that when the parameters are not written, the program will report errors.

As we said earlier What is object-oriented copy inheritance?

        var a = { //configuration parameter
            name = 'Xiao Ming';
        }
        var b = { // Default parameters
            name : 'Cockroach';
        }
        extend(b,a);
        // Assign a to b, then if a has name, it will be overwritten as Xiaoming, if there is no default is Xiaoqiang.
        //Object a copies all the content to b. When the two key values are the same, Xiao Ming covers Xiao Qiang.
        // Note: The key s of the two objects must be the same, otherwise they will not be overwritten.

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

In object-oriented programs, we usually call a "configuration parameter" and b "default parameter".
This means to execute configuration when the program is configured, and default when the program is not configured. That is to say, neither configuration nor default execution is undefined.
The priority of configuration parameters is higher than that of default parameters. The default parameters will be executed only if the configuration parameters are not available. This is the way to solve the problem of parameter error-free.

Now.

Here is the code for dragging component DEMO

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Drag Component Development</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({ //configuration parameter
                id : 'div1'
            });

            var d2 = new Drag();
            d2.init({ //configuration parameter
                id : 'div2',
                fnDown : function() {
                    document.title = 'hello';
                }
            });

            var d3 = new Drag();
            d3.init({ //configuration parameter
                id : 'div3',
                fnDown : function() {
                    document.title = "Kongming and he";
                },
                fnUp : function() {
                    document.title = 'Handsome';
                }
            });

            var d4 = new Drag();
            d4.init({ //configuration parameter
                id : 'div4',
                fnUp : function() {
                    document.title = 'byebye';
                }
            });
        };

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

            this.settings = { //Default parameters
                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;
        };

        // Encapsulated copy inheritance function
        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>

At this time, we found no change when div1 red box is clicked; when div2 yellow box is clicked, title becomes `hello'; when div3 blue box is clicked, title becomes `and piekongming'; when the mouse is raised, it becomes `handsome'; when div4 green box is clicked, it does not change; when the mouse is raised, title becomes `byebye They do not affect each other.