In the absence of reference data types such as objects and functions, we can only describe information about a transaction or an individual based on the way variables are created

var name="Zhang";
var age=25;
var height="180cm";

var name="Bill";
var age=28;
var height="175cm"; .Copy the code

This creates a large number of global variables, eventually leading to global variable conflicts (global variable pollution)

Requirements: We expect to be able to group (or classify) the information that describes a transaction.

  • This is where the object data type comes in handy
var person1={
	name:'Joe'.age:25. };var person2={
	name:'bill'.age:28. };Copy the code
  • After grouping, the key-value pairs in each group are private, and even if the two groups have attributes of the same name, there is no conflict, greatly eliminating the problem of global variable contamination
  • This grouping management concept is the earliest singleton design pattern idea in JS.

1. Singleton design pattern

1, define,

  • Based on the object data type, the attributes and methods describing the current transaction are unified and grouped together for management, which can reduce global variable pollution. This JS design pattern is called “singleton design pattern”.

2, the characteristics of

  • 1. Each object is a separate instance (separate heap memory), storing key-value pairs that are private to the heap, so there is no conflict between the two instances
  • 2. In the singleton design pattern, there are some new concepts, in the following cases:
    • var obj = { xxx:xxx , ... };
    • objNot only is a variable used to store objects (object names), but it is also called a “namespace” (in essence, one for the heap memory of an object)objHeap memory is space,objIs the name);
    • Attributes and methods that describe the current transaction are grouped into Spaces for management

In other programming languages, only instances constructed based on constructors are considered to be “singleton design patterns”, i.e. Var XXX = new XXX;

But in JS, var obj={… }; It is based on new Object() itself, so it is the standard singleton design pattern;

3, the application

  • In real project development, especially collaborative team development, we often divide a large page into “sections/modules” according to functional features. In such a section, many attributes and methods need to be written to achieve specific functions.

  • At this point, some methods only need to be used within the board, and some methods may also need to be used in other boards, so we both want to privatize, but also to expose some methods for surface retrieval, here involves our module management ideas;

The singleton design pattern is also the most fundamental modularity idea

4. Module management idea

  • The singleton design pattern is also the most fundamental modularity idea
  • AMD/CMD (requireJS and seaJS)
  • UMD
  • CommonJS
  • ES6Module
  • .

Based on singleton design pattern thought + closure thought + module management thought

var utils=(function(){
    function queryElement(){}
    function deleteElement(){}...//=> Export the attribute methods in the current section that need to be retrieved by others (also equivalent to putting these attribute methods in the utils namespace for group management, avoiding conflicts with others)
    return {
        queryElement:queryElement,
        deleteElement:deleteElement }; }) ();var searchModule=(function(){
    function queryData(){}
    function bindHTML(){
        //=> Need to call utils module (method in namespace)
        utils.queryElement();
    }
    return {
        init:function(){}}; }) ();Copy the code

5, defect

Record people information based on the singleton design pattern (for example) : Create a single instance or namespace and manage the information describing each person in groups

var person1={
	name:'Ming'.age:92.sex:'male'.score:90
};

var person2={
	name:'xiao gang'.age:62.sex:'male'.score:85
};

var person3={
	name:'little red'.age:18.sex:'woman'.score:100, qunzi:'red'
};
Copy the code
  • However, every time to describe the information of a transaction, the corresponding key-value pairs need to be written. If the information of similar transactions is repeatedly described, not only many things need to be repeated, but also the code redundancy will be caused

Ii. Factory design mode

1, define,

  • The so-called factory design pattern is to create a lot of “similar instances”, let’s say goodbye to manual creation, and achieve industrial mass production (according to this sentence we think of => improved development efficiency, reduced redundant code in the page => “low coupling high cohesion” => function encapsulation).
function createPerson(name,age,sex,score,qunzi){
	var person={};
	person.name=name;
	person.age=age;
	person.sex=sex;
	person.score=score;
	if(typeofqunzi! = ="undefined") {//=> Pass the corresponding argument to the qunzi parameter
		person.qunzi=qunzi;
	}
	return person;
}
var person1=createPerson('Ming'.92.'male'.90);
var person2=createPerson('xiao gang'.62.'male'.85);
var person3=createPerson('little red'.18.'woman'.100.'red');
Copy the code

Mind mapping