This is the 18th day of my participation in Gwen Challenge

An introduction to design patterns

A design pattern is a set of well-cataloged, well-known, reusable code experiences

Tool libraries: These are assemblies of methods, such as jquery and underscore, whose methods are usually unrelated

Framework: A set of semi-finished code that also supports methods, usually related to each other

Architecture: It is a set of design ideas for large projects

classification

All design patterns can be basically divided into three types: creative design patterns, structural design patterns, and behavioral design patterns

role

What the creative design pattern does: It solves the problem of creating objects

What the structural design pattern does: It solves problems when objects and classes are grouped together

The role of behavioral design patterns: to solve the relationship between object and class coupling, responsibilities

history

Design patterns were originally developed by a foreign group called GOF (Gang of Four). There are a total of 23 design patterns. So far, there are far more than 23 design patterns.

Simple Factory model

For example:

function person(name, age, sex, job) {
	var person = {
		name: name,
		age: age,
		sex: sex,
		job: job
	}
	return person;
}
Copy the code

At this point, Person is a “simple factory”, and each time a different “raw material” is added, a different “product” can be obtained.

Execution code:

var p = person("Wang".40."Male"."Chef");
var p1 = person("Old zhang".41."Male"."IT");
Copy the code

Output result:

Parasitic reinforcement plant

For example:

// Define a new factory
function StrongPerson(name, age, sex) {
	// This is a factory
	// Initialize People
	var p = new People(name, age, sex);
// add attributes and methods to object p
	p.title = "nihao";
	p.sayNihao = function() {
		console.log("Hello");
	}
	return p;
}
Copy the code

Execution code:

// Create an object
var people = new StrongPerson("Xiao gang".12."Male");
people.sayHello();
people.sayNihao();
Copy the code

Output result:

The factory method

Definition: Manages multiple classes that can return multiple products

// Factory method: define a factory that contains the creation of multiple instances

// Define the constructor
function Dog() {
	this.type = "dog";
}

// Define the constructor
function Cat() {
	this.type = "cat";
}

// Define the constructor
function Pig() {
	this.type = "pig";
}

// Define a new factory
function FactoryMethod(type) {
	if (type === "dog") {
		return new Dog();
	} else if (type === "cat") {
		return new Cat();
	} else if (type === "pig") {
		return newPig(); }}var dog = FactoryMethod("dog");
var cat = FactoryMethod("cat");
var pig = FactoryMethod("pig");
Copy the code

Archetype and Inheritance

Prototype:

// The prototype is an attribute of the constructor whose value is an object

// Define the constructor
function People(name, age, sex) {
	this.name = name;
	this.age = age;
	this.sex = sex;
}

// The method should be written on the prototype
People.prototype.sayHello = function() {
	console.log("Hello, my name is + this.name + "My age is." + this.age + "I am one." + this.sex + "Child");
}
Copy the code

Inheritance:

// Define the parent class
function People(name, age, sex) {
	this.name = name;
	this.age = age;
	this.sex = sex;
}
// Method of the parent class
People.prototype.sayHello = function() {
	console.log("Hello, my name is + this.name + "My age is." + this.age + "I am one." + this.sex + "Child");
}

// Define subclasses
function Student(name, age, sex, grade) {
	// constructor inheritance
	People.apply(this.arguments);
	// Subclass-specific attributes
	this.grade = grade;
}

/ / inheritance
// Use class inheritance
// Student.prototype = new People();
// This method of inheritance loses the prototype object of the subclass
// In addition, this method of inheritance creates several useless attributes on the prototype of the subclass

// We can use the object.create method provided by ES5
Student.prototype = Object.create(People.prototype);
/ / make up for
Student.prototype.constructor = Student;

// Subclass methods
Student.prototype.intro = function() {
	console.log("Hello, my name is + this.name + "My age is." + this.age + "I am one." + this.sex + "Child" + "I'll do it this year." + this.grade + "Grade.");
}
Copy the code

Execution code:

// initialize Student
var s = new Student("Xiao Ming".12."Male".6);
// Call the method of the parent class
s.sayHello();
// Call the subclass's own methods
s.intro();

// Check if student is an instance of student
console.log(s instanceof Student)
// Check if student is an instance of People
console.log(s instanceof People);
Copy the code

Output result:

Safety factory

For example:

/ / modification
function People(name, age, sex) {
	// Determine who this refers to to determine how the code executes
	if (this instanceof People) {
		// call with new, then proceed as usual
		this.name = name;
		this.age = age;
		this.sex = sex;
	} else {
		If a normal function wants to return something, an artificial return is required
		return newPeople(name, age, sex); }}/ / test
// Call the constructor with new
var p = new People("Xiao Ming".12."Male");
console.log(p);


// Execute the function without using new
var p1 = People("Small strong".11."Male");
console.log(p1);
Copy the code

Results:

The closure class

Simply put, you put the class in a closure

For example:

// a closure
(function() {}) ();/ / a class
function People() {}/ / closures
(function() {
	function People() {}}) ();// If the class is placed globally, others can also access it
// If the class is in a closure, no one else can manipulate it.
Copy the code

The singleton pattern

For example:

var single = (function() {
	function People(name, age, sex) {
		this.name = name;
		this.age = age;
		this.sex = sex;
	} 
	// If you do put the People class in the closure, no one else can manipulate People
	// However, we can't do it ourselves
	// We want to expose an interface so that outsiders can access the internal People class
// Define variables to hold singletons
	var instance = null;
	// Return the interface function
	return function(name, age, sex) {
		// Check whether the singleton exists
		if(! instance) {return instance = new People(name, age, sex);
		}
		// If the singleton already exists, return it directly
		return instance;
	}
})();

// Can only return one instantiated object, no matter how it is called outside
var p = single("Xiao Ming".12."Male");
var p1 = single("Little red".11."Female");
Copy the code

Results:

Common singleton

For example:

// Normal singleton: a singleton that is executed when defined
var single = (function() {
	/ / define the class
	function People(name, age, sex) {
		console.log("Ordinary singleton");
		this.name = name;
		this.age = age;
		this.sex = sex;
	}

	// Define variables to hold singletons
	var instance = new People("Xiao Ming".12."Male");

	// Define the interface
	return function() {
		// Since it has already been instantiated, there is no need to judge again
		return instance;
	}
})()
Copy the code

Inert singleton

For example:

var single = (function() {
	/ / define the class
	function People(name, age, sex) {
		console.log("Lazy singleton");
		this.name = name;
		this.age = age;
	this.sex = sex;
	}

	// Define variables to hold singletons
	var instance = null;

	// Define the interface function
	return function(name, age, sex) {
		// Check whether the singleton exists
		if(! instance) {return instance = new People(name, age, sex);
		}
		// If a singleton exists, return it directly
		return instance;
		}
})();
Copy the code