Encapsulation of front-end design patterns

Posted by ereptur on Thu, 20 Jan 2022 14:26:03 +0100

Encapsulation of front-end design patterns

  this article refers to the JavaScript Design Pattern and development practice written by Zeng tan

1. Package data

  in the object system of many languages, encapsulating data is implemented by syntax parsing. These languages may provide private, public, protected and other keywords to provide different access rights.
  however, JavaScript does not provide support for these keywords. We can only rely on the scope of variables to implement the encapsulation feature, and can only simulate public and private encapsulation.
    in addition to the let provided in ECMAScript 6, we generally create the scope through functions

    var MyObject = function() {
            let _name = 'seven' //private
            this.name = 'six' //public
            this.getName = function() { //public
                return _name;
            }

        }
        var myObject = new MyObject()
        console.log(myObject.name);
        console.log(myObject._name);
        console.log(myObject.getName());
        var object = (function() {
                var _name = 'seven' //private
                return {
                    getName: function() {
                        return _name; //public
                    }
                }
            })() // The immediate execution function is used to prevent the function from forming a closure, resulting in that the local variables are always stored in memory and are not automatically cleared after the function is called, so they live outside the function, that is, the scope of the local variables is expanded
        console.log(object._name);
        console.log(object.getName());

2. Packaging implementation

  the purpose of encapsulation is to hide information. Encapsulation should be regarded as "any form of encapsulation", that is, encapsulation not only hides data, but also hides implementation details, design details and types of hidden objects.
  in terms of encapsulating implementation details (that is, encapsulating details into functions), encapsulation makes changes inside objects transparent to other objects, that is, invisible. An object is responsible for its own behavior. No other object or user cares about its internal implementation. Encapsulation makes the coupling between objects loose, and objects communicate only through the exposed API interface (exposing the function name). When we modify an object, we can modify its internal implementation at will. As long as the external interface does not change, it will not affect other functions of the program.

     // In addition to the let s provided in ECMAScript 6, we generally create scopes through functions
        var MyObject = function() {
            let _name = 'seven' //private
            this.name = 'six' //public
            this.getName = function() { //public
                return _name;
            }

        }
        var myObject = new MyObject()
        console.log(myObject.name);
        console.log(myObject._name);
        console.log(myObject.getName());
        var object = (function() {
                var _name = 'seven' //private
                return {
                    getName: function() {
                        return _name; //public
                    }
                }
            })() // The immediate execution function is used to prevent the function from forming a closure, resulting in that the local variables are always stored in memory and are not automatically cleared after the function is called, so they live outside the function, that is, the scope of the local variables is expanded
        console.log(object._name);
        console.log(object.getName());

3. Packaging implementation

  encapsulation type is an important encapsulation method in static type language. Generally speaking, encapsulation types are through abstract classes and interfaces
To carry out ①. Hiding the real type of the object behind the abstract class or interface, the customer cares more about the object than the type of the object
act. In many static language design patterns, trying to hide the types of objects also promotes the birth of these patterns
One of the reasons. Such as factory method mode, combination mode, etc.
  of course, there is no support for abstract classes and interfaces in JavaScript. JavaScript itself is also a vaguely typed language
Words. JavaScript doesn't have the ability to encapsulate types, and there's no need to do more. Design pattern implementation for JavaScript
At present, not distinguishing between types is a kind of tarnish, which can also be said to be a kind of liberation. In the later chapters, we can learn slowly
Understand this.
    in the following java example, the types of Duck object and Chicken object are hidden behind the supertype Animal, and the Duck object and Chicken object can be used interchangeably. This is the encapsulation type, that is, the upward transformation in Java

   public abstract class Animal { 
    abstract void makeSound(); // Abstract method
    } 
    public class Chicken extends Animal{ 
        public void makeSound(){ 
        System.out.println( "Cluck" ); 
        } 
    } 
    public class Duck extends Animal{ 
        public void makeSound(){ 
        System.out.println( "GA GA" ); 
        } 
    }
    public class AnimalSound{ 
        public void makeSound( Animal animal ){ // Accept arguments of type Animal
        animal.makeSound(); 
        } 
    } 
    public class Test { 
        public static void main( String args[] ){ 
            AnimalSound animalSound= new AnimalSound (); 
            Animal duck = new Duck(); 
            Animal chicken = new Chicken(); 
            animalSound.makeSound( duck ); // Output quack quack
            animalSound.makeSound( chicken ); // Output cluck
        } 
    }

Topics: Javascript Front-end