Design pattern list

What’s not linked is what hasn’t been written, what’s planned to be written, Front-end Design Patterns (1) — Factory Pattern Front-end design Pattern (2) — Singleton Pattern Front-end design Pattern (3) — Adapter Pattern Front-end Design Pattern (4) — Decorator Pattern Front-end Design Pattern (5) — Agency Pattern Front-end Design Pattern (6) — Appearance pattern && Observer Pattern Front-end Design Pattern (7) — State and Strategy Pattern Front-end Design Pattern (8) — Prototype pattern…

Writing in the front

There are 23 design patterns, which can be classified into three categories: creation (factory, singleton, prototype, etc.), structure (decorator, agent, etc.), and behavior (observer, iterator, etc.). Today we are going to talk about factory patterns, which are divided into factory method patterns, abstract factory patterns, simple factory patterns, ok, let’s go step by step.

Simple factory mode

Come on, let’s start with the easy one. The simple factory pattern is an instance class diagram where a factory object determines which product class is created: apples and pears are inherited plants

Code:

class Plant {
    constructor (name) {
        this.name = name
    }
    grow () {
        console.log('I have the ability to grow.')
    }
}
class Apple extends Plant {
    constructor (name, color) {
        super(name)
        this.color = color
        console.log(this.color)
    }
}
class Pear extends Plant {
    constructor (name, color) {
        super(name)
        this.color = color
        console.log(this.color)
    }
}
new Apple('apple'.'red')
new Pear('pear'.'yellow'Class jquery {constructor(selector){constructor(selector){let elements = Array.from(document.querySelectorAll(selector));
        letlength = elements? elements.length:0;for(leti=0; i<length; i++){ this[i]=elements[i]; } this.length = length; }html(){

    }
}
window.$ = function(selector){
   return new jQuery(selector);
}
Copy the code

The advantage of a simple factory is that we can inherit and extend new functions on the basis of the original logic before moving, so that we can improve efficiency, and the functions written by the great god can be reused, and can stand on the shoulders of the giant, and expand continuously. Of course, in fact, you should have written or used these usually, but now by a noun specification up, is it suddenly tall and fashionable? The disadvantage of direct new in the above code is that it is coupled and implementation-dependent.

Factory method pattern

As in the previous class diagram, the requirements have changed and need to add an orange:

The code:

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
class Apple extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class Orange extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class AppleFactory{
    create() {
        return new Apple('apple'.'red');
    }
}
class OrangeFactory{
    create() {
        return new Orange('orange'.'orange');
    }
}
const settings={
    'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);
Copy the code

The nice thing about this is that we can add different fruits, we don’t have to worry about how to do it, we can add the same fruit class, we can just use it, and the nice thing about this is that if the AppleFactory changes and there’s a new function, but there’s a lot of references, we can just add an AppleFactory, The change does not affect the old code. The above code is modified to introduce a java-like interface concept

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~'); } // Add a new class Factory {create() { } } class Apple extends Plant{ constructor(name, color) { super(name); this.color = color } } class Orange extends Plant{ constructor(name, color) { super(name); This. Color = color}} class AppleFactory extends Factory{staticcreate() {
     return new Apple('apple'.'red');
    }
}
class OrangeFactory extends Factory{
    static create() {
        return new Orange('orange'.'orange'); }} // Uncoupling through the configuration file const Settings ={'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);
Copy the code

  • Factories are generally interfaces that specify the methods that subclasses must implement
  • Rely on abstractions, not implementations
  • An interface has only method definitions and no implementation. If a class wants to implement the interface, it must implement all the methods in the interface

Abstract Factory pattern

The abstract factory pattern is a factory pattern that is used when there are multiple abstract roles. The abstract factory pattern provides an interface to the client that allows the client to create product objects in multiple product families without specifying the specific product.

For example, if you want to write software in Java that runs on different systems, such as Windows, MAC, etc., their ICONS and buttons are different

The class diagram

code

Class Factory {// public methods are associatedcreateButton() {// Create button}createIcon() {// create an Icon}} class Icon {} class AppleIcon {render() {console.log(' draw apple icon ')}} class WindowsIcon {render() {console.log(' draw window icon ')}} class Button {} class AppleButton {render() {console.log(' draw apple button ')}} class WindowsButton {render() {console.log(' draw Windows button ')}} Class AppleFactory extends Factory {createButton() {// Create buttonreturn new AppleButton();
    }
    createIcon() {// Create the iconreturn new AppleIcon();
    }
}
class WindowsFactory extends Factory {
    createButton() {// Create buttonreturn new WindowsButton();
    }
    createIcon() {// Create the iconreturnnew WindowsIcon(); }} /** * Java is cross-platform * 1. Draw an icon * 2. Draw a button */letwindowsFactory = new WindowsFactory(); windowsFactory.createIcon().render(); windowsFactory.createButton().render(); / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =let appleFactory = new AppleFactory();
appleFactory.createIcon().render();
appleFactory.createButton().render();
Copy the code

summary

  1. A simple factory is usually a function that returns an instance of the product (most commonly used, most used)
  2. To create a product, you need to first create an instance of the factory and then create the product through the factory. (less)
  3. In the abstract factory, a factory can create multiple products (rarely used)

Supplementary knowledge – class diagram

  • Used to describe the composition of the object classes themselves and the various static relationships between the object classes in the system
  • Relationships between classes: dependencies, generalization (inheritance), implementation, association, aggregation, and composition

Dependence

As long as each other is used in the class, there is a dependency relationship between them, if not each other, even the compilation can not pass, commonly said is like animals depend on water and air, the following is the class diagram: composed of three parts, class name, class attribute, class method. Dependencies are represented by dashed, hollow arrows

Generalization relations

The generalization relation is actually the inheritance relation, which is a special case of the dependency relation, and the generalization relation is represented by the solid line hollow arrow