Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects

Overview

In order to help you understand more methods and make comparisons, I will use three different methods to implement dragging.

• Direct implementation without encapsulating the object;
• Use native JavaScript to encapsulate drag objects;
• Implement dragging objects by extending jQuery.

The implementation process of dragging and dropping involves a lot of practical knowledge. Therefore, in order to consolidate my own knowledge accumulation and for everyone to learn more knowledge, I will try to share some details in detail. I believe that after reading carefully, you will definitely learn something.

1. How to animate a DOM element

We often change the position of an element by modifying its top, left, and translate. In the example below, each time the button is clicked, the corresponding element will move 5px. You can click here to view.

Click to see a small example of animating an element

Since modifying the top/left value of an element will cause the page to redraw, while translate will not, from the perspective of performance optimization, we will give priority to using the translate attribute.

2. How to obtain the transform compatible writing method supported by the current browser

Transform is a CSS3 attribute, and when we use it we have to face compatibility issues. There are roughly the following ways to write compatible versions of different browsers:

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']

Therefore, we need to determine which transform attribute is supported by the current browser environment. The method is as follows:

// Get the transform compatible writing method supported by the current browser function getTransform() {
    var transform = '',
    divStyle = document.createElement('div').style,
    // Several compatibility writing methods may be involved, and the one recognized by the browser is found through a loop transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

    i = 0,
    len = transformArr.length;

    for(; i < len; i++) {
        if (transformArr[i] in divStyle) {
            // Return immediately after finding, ending the function return transform = transformArr[i];
        }
    }

    // If not found, just return an empty string return transform;
}

This method is used to obtain the transform properties supported by the browser. If an empty string is returned, it means that the current browser does not support transform. At this time, we need to use left and top values ​​to change the position of the element. If supported, change the value of transform.

3. How to get the initial position of an element

We first need to get the initial position of the target element, so here we need a function specifically used to get the element style.

However, getting element styles in IE is slightly different from other browsers, so we need a compatible way of writing.

function getStyle(elem, property) {
    // ie uses currentStyle to get the style of an element, and other browsers use getComputedStyle to get it. return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];
}

With this method, you can start writing methods to get the initial position of the target element.

function getTargetPos(elem) {
    var pos = {x: 0, y: 0};
    var transform = getTransform();
    if(transform) {
        var transformValue = getStyle(elem, transform);
        if(transformValue == 'none') {
            elem.style[transform] = 'translate(0, 0)';
            return pos;
        } else {
            var temp = transformValue.match(/-?\d+/g);
            return pos = {
                x: parseInt(temp[4].trim()),
                y: parseInt(temp[5].trim())
            }
        }
    } else {
        if(getStyle(elem, 'position') == 'static') {
            elem.style.position = 'relative';
            return pos;
        } else {
            var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);
            var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);
            return pos = {
                x: x,
                y: y
            }
        }
    }
}

During the dragging process, we need to constantly set the new position of the target element so that it can move, so we need a method to set the position of the target element.

// pos = { x: 200, y: 100 }
function setTargetPos(elem, pos) {
    var transform = getTransform();
    if(transform) {
        elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
    } else {
        elem.style.left = pos.x + 'px';
        elem.style.top = pos.y + 'px';
    }
    return elem;
}

5. What events do we need to use?

In the browser on the PC, combining the three events of mousedown, mousemove, and mouseup can help us achieve dragging.

• mousedown Triggered when the mouse is pressed
• mousemove is triggered when the mouse is pressed and dragged
• mouseup Triggered when the mouse is released

On the mobile side, the corresponding ones are touchstart, touchmove, and touchend respectively.

When we bind these events to elements, an event object will be passed as a parameter to the callback function. Through the event object, we can get the precise position of the current mouse. The mouse position information is the key to realizing dragging.

The event object is very important, and it contains a lot of useful information. I will not expand on it here. You can print out the event object in the function to view its specific properties. This method is very useful for those who cannot remember the important properties of the event object.

6. The principle of dragging

When the event is triggered, we can get the exact position of the mouse through the event object. This is the key to achieving drag. When the mouse is pressed (mousedown trigger), we need to remember the initial position of the mouse and the initial position of the target element. Our goal is to achieve that when the mouse moves, the target element also moves. According to common sense, we can derive the following relationship:

Mouse position after moving - initial mouse position = target element position after moving - initial position of target element

If the difference in mouse position is represented by dis, then the position of the target element is equal to:

The position of the target element after moving = dis + the initial position of the target element

Through the event object, we can accurately know the current position of the mouse, so when the mouse is dragged (mousemove), we can continuously calculate the difference in mouse movement to find the current position of the target element. This process realizes dragging.

When the mouse is released (mouseup) to end the drag, we need to do some finishing work. See the code for details.

7. I would like to recommend mind mapping to assist in coding.

New friends often come to ask me if they can write code and do front-end work if they don’t have strong logical thinking skills. My answer is: Yes. Because with the help of mind mapping, you can easily make up for the shortcomings in logic. It is also clearer and less error-prone than trying to figure out the logic in your mind.

In the sixth point above, I introduced the principle, so it is not that difficult to do it. The specific steps are clearly given in the mind map below. We only need to write the code according to these steps. Try it, it must be easy.

Use mind maps to clearly express what we need to do during the entire dragging process

8. Code Implementation

Part 1. Preparation

// Get the target element object var oElem = document.getElementById('target');

//Declare 2 variables to save the x and y coordinates of the initial mouse position var startX = 0;
var startY = 0;

//Declare 2 variables to save the x and y coordinates of the initial position of the target element var sourceX = 0;
var sourceY = 0;

Part 2, Function

Since I have already posted the code before, I will not repeat it.

// Get the transform compatible writing method supported by the current browser function getTransform() {}

// Get element properties function getStyle(elem, property) {}

// Get the initial position of the element function getTargetPos(elem) {}

// Set the initial position of the element function setTargetPos(elem, potions) {}

Part 3. Declare callback functions for three events

These three methods are the core of realizing drag and drop. I will strictly follow the steps in the mind map above to complete our code.

//Bound to the callback on mousedown, event is the incoming event object function start(event) {
    // Get the initial position of the mouse startX = event.pageX;
    startY = event.pageY;

    // Get the initial position of the element var pos = getTargetPos(oElem);

    sourceX = pos.x;
    sourceY = pos.y;

    // Binding document.addEventListener('mousemove', move, false);
    document.addEventListener('mouseup', end, false);
}

function move(event) {
    // Get the current position of the mouse var currentX = event.pageX;
    var currentY = event.pageY;

    // Calculate the difference var distanceX = currentX - startX;
    var distanceY = currentY - startY;

    // Calculate and set the element's current position setTargetPos(oElem, {
        x: (sourceX + distanceX).toFixed(),
        y: (sourceY + distanceY).toFixed()
    })
}

function end(event) {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', end);
    // do other things
}

OK, a simple drag and drop can make it happen happily. Click the link below to view the demo of this example online.

Use native js to implement drag and drop

9. Encapsulate drag objects

Let's encapsulate the drag implemented above into a drag object. Our goal is that as long as we declare a drag instance, the target element passed in will automatically have the ability to be dragged.

In actual development, we often put an object in a separate js file. This js file will be used as a separate module and organized and used in various module ways. Of course there is no complicated module interaction here, because for this example, we only need one module.

To avoid variable pollution, we need to place the module in a block-level scope that simulates a function's self-execution.

(function() {
    ...
})();

In ordinary module organization, we simply compress many js files into one js file, so the first semicolon here is to prevent an error caused by not using a semicolon at the end of the previous module. essential. Of course, this will not happen if you use require or ES6 modules.

We know that when encapsulating an object, we can place properties and methods in the constructor or prototype, and after adding self-executing functions, we can prevent properties and methods from being in the internal scope of the module. This is knowledge of closures.

The challenge we face is how to properly handle the location of attributes and methods.

Of course, the situation of each object is different and cannot be generalized. We need to clearly know the characteristics of these three positions in order to make the most appropriate decision.

• In the constructor: The properties and methods are owned by the current instance alone and can only be accessed by the current instance. Each time an instance is declared, the methods will be recreated.
• In the prototype: Properties and methods are shared by all instances and can be accessed by all instances. Newly declared instances will not create duplicate methods.
• In module scope: attributes and methods cannot be accessed by any instance, but can be accessed by internal methods. Newly declared instances will not create the same methods repeatedly.

It is relatively simple to judge the method.

Because the methods in the constructor are always created repeatedly when a new instance is declared, we try to avoid declaring methods in the constructor.

If your method needs to use the variables in the constructor, or wants to make them public, you need to put them in the prototype.

If the method needs to be private and not accessible to the outside world, then place it in module scope.

Sometimes it is difficult to make the correct judgment on where to place the attributes, so it is difficult for me to give you an accurate definition of what attributes must be placed in what position. This requires continuous experience summary in actual development. But in general, we still need to combine the characteristics of these three positions to make the most appropriate judgment.

If the attribute value can only be owned by an instance alone, such as the name of a person object, which can only belong to a certain person instance, or the initial position of an element in the dragged object here is only the current position of the element, then this attribute is suitable to be placed in the constructor.

If an attribute is only accessible to internal methods, it is suitable to be placed in module scope.

Regarding object-oriented programming, I think the above points are the essence of this article that deserves serious consideration. If you don't think clearly when encapsulating, you may encounter many unexpected bugs, so it is recommended that you combine your own development experience, think more, and summarize your own opinions.

Based on these thoughts, you can try to encapsulate it yourself. Then compare them with mine to see how our ideas differ. I will express my thoughts in the comments of the examples below.

Click to view the packaged demo

js source code

(function() {
    // This is a private property and does not need to be accessed by instances var transform = getTransform();

    function Drag(selector) {
        // The properties placed in the constructor belong to each instance individually this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
        this.startX = 0;
        this.startY = 0;
        this.sourceX = 0;
        this.sourceY = 0;

        this.init();
    }


    // prototype Drag.prototype = {
        constructor: Drag,

        init: function() {
            // What needs to be done initially this.setDrag();
        },

        // Slightly modified, only used to obtain the attributes of the current element, similar to getName
        getStyle: function(property) {
            return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];
        },

        // Used to get the position information of the current element. Note the difference from the previous getPosition: function() {
            var pos = {x: 0, y: 0};
            if(transform) {
                var transformValue = this.getStyle(transform);
                if(transformValue == 'none') {
                    this.elem.style[transform] = 'translate(0, 0)';
                } else {
                    var temp = transformValue.match(/-?\d+/g);
                    pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim())
                    }
                }
            } else {
                if(this.getStyle('position') == 'static') {
                    this.elem.style.position = 'relative';
                } else {
                    pos = {
                        x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0),
                        y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0)
                    }
                }
            }

            return pos;
        },

        // Used to set the position of the current element setPosition: function(pos) {
            if(transform) {
                this.elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
            } else {
                this.elem.style.left = pos.x + 'px';
                this.elem.style.top = pos.y + 'px';
            }
        },

        // This method is used to bind the event setDrag: function() {
            var self = this;
            this.elem.addEventListener('mousedown', start, false);
            function start(event) {
                self.startX = event.pageX;
                self.startY = event.pageY;

                var pos = self.getPosition();

                self.sourceX = pos.x;
                self.sourceY = pos.y;

                document.addEventListener('mousemove', move, false);
                document.addEventListener('mouseup', end, false);
            }

            function move(event) {
                var currentX = event.pageX;
                var currentY = event.pageY;

                var distanceX = currentX - self.startX;
                var distanceY = currentY - self.startY;

                self.setPosition({
                    x: (self.sourceX + distanceX).toFixed(),
                    y: (self.sourceY + distanceY).toFixed()
                })
            }

            function end(event) {
                document.removeEventListener('mousemove', move);
                document.removeEventListener('mouseup', end);
                // do other things
            }
        }
    }

    // Private method, only used to get the compatible writing method of transform function getTransform() {
        var transform = '',
            divStyle = document.createElement('div').style,
            transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

            i = 0,
            len = transformArr.length;

        for(; i < len; i++) {
            if (transformArr[i] in divStyle) {
                return transform = transformArr[i];
            }
        }

        return transform;
    }

    // A way to expose to the outside world window.Drag = Drag;
})();

// Usage: declare 2 drag instances new Drag('target');
new Drag('target2');

Such a drag object is encapsulated.

I suggest that you try to encapsulate more components based on the way of thinking I provided. For example, encapsulate a pop-up window, encapsulate a loop carousel, etc. With more practice, object-orientation will no longer be a problem. This way of thinking can be used at any time in the future.

The above is a detailed explanation of the practical application of JavaScript object-oriented encapsulation and drag objects. For more information on how to implement encapsulation and drag objects in JS object-oriented, please pay attention to other related articles on 123WORDPRESS.COM!