javascript Design Pattern Monolithic Pattern Learning Notes

Monolithic mode provides a means to organize code into a logical unit, and the code in this logical unit can be accessed through a single 1 variable.

The advantages of the monolithic model are:

It can be used to divide namespaces and reduce the number of global variables. Using single mode can make the code more organized and make the code easy to read and maintain. Can be instantiated and instantiated once.

What is a monomer pattern? A monolithic pattern is an object that divides the namespace and organizes 1 batch of properties and methods in 1. If it can be instantiated, it can only be instantiated once.

However, not all objects are literally single. For example, if you simulate arrays or contain data, then it is not single. However, if you organize a batch of related attributes and methods in one, then it may be a single mode, so it depends on the developer's intention to write code;

Let's look at the basic structure of defining an object literal (structure similar to single schema) as follows:

//  Object literal 
var Singleton = {
  attr1: 1,
  attr2: 2,
  method1: function(){
    return this.attr1;
  },
  method2: function(){
    return this.attr2;
  }
};

For example, the above is just a simple literal structure, and all the member variables above are accessed through Singleton, but it is not a single mode; Because the monomer pattern has a more important feature, that is, it can only be instantiated once, and the above is only a class that cannot be instantiated, so it is not a monomer pattern; Object literals are one of the methods used to create single schemas;

The structure using single mode is as follows demo

What we understand is that if the single pattern is instantiated, it will only be instantiated once. To realize a single pattern, we only use a variable to identify whether the class is instantiated. If it is not instantiated, we can instantiate it once, otherwise, we can directly return the instantiated object.

The following code is the basic structure of the monolithic pattern:

//  Monomer mode 
var Singleton = function(name){
  this.name = name;
  this.instance = null;
};
Singleton.prototype.getName = function(){
  return this.name;
}
//  Get an instance object 
function getInstance(name) {
  if(!this.instance) {
    this.instance = new Singleton(name);
  }
  return this.instance;
}
//  Examples of testing monolithic patterns 
var a = getInstance("aa");
var b = getInstance("bb");

//  Because the monolithic pattern is only instantiated 1 So the following instances are equal 
console.log(a === b); // true

Since the single mode is only instantiated once, the first call returns the a instance object. When we continue to call, the instance of b is the instance of a, so the following is printed as aa;;

console.log(a.getName());// aa
console.log(b.getName());// aa

The above package monomer mode can also be changed to the following structure:

//  Monomer mode 
var Singleton = function(name){
  this.name = name;
};
Singleton.prototype.getName = function(){
  return this.name;
}
//  Get an instance object 
var getInstance = (function() {
  var instance = null;
  return function(name) {
    if(!instance) {
      instance = new Singleton(name);
    }
    return instance;
  }
})();
//  Examples of testing monolithic patterns 
var a = getInstance("aa");
var b = getInstance("bb");
//  Because the monolithic pattern is only instantiated 1 So the following instances are equal 

console.log(a === b); // true

console.log(a.getName());// aa

console.log(b.getName());// aa

Understand the benefits of using proxies to implement single-column patterns

For example, I need to create an div element on the page now. Then we definitely need to have a function to create div. Now I just need this function to create the div element, It doesn't want to take care of the rest, That is, to realize the principle of single 1 duty, Just like Taobao's kissy1, At the beginning of 1, they defined kissy to do only one thing, and do it well. The specific instantiation class in the single mode is handed over to the agent function to deal with it. The advantage of doing this is that the specific business logic is separated, and the agent only cares about the business logic of the agent. Here, the agent's role is to instantiate the object and only instantiate it once; Create div code just create div, nothing else; The following code:

//  Monomer mode 
var CreateDiv = function(html) {
  this.html = html;
  this.init();
}
CreateDiv.prototype.init = function(){
  var div = document.createElement("div");
  div.innerHTML = this.html;
  document.body.appendChild(div);
};
//  Agent Implementation Monomer Pattern 
var ProxyMode = (function(){
  var instance;
  return function(html) {
    if(!instance) {
      instance = new CreateDiv(" Let me test it ");
    }
    return instance;
  } 
})();
var a = new ProxyMode("aaa");
var b = new ProxyMode("bbb");
console.log(a===b);// true

Understand the basic principles of using single mode to realize pop-up window

Let's continue to use single mode to realize demo; with one pop-up window; Let's not discuss the use of single mode to achieve, we want to think about how we usually write code to achieve pop-up effect; For example, we have a pop-up window, which is definitely hidden by default. When I click, it needs to be displayed; Write the code as follows:

//  Implement a pop-up window 
var createWindow = function(){
  var div = document.createElement("div");
  div.innerHTML = " I am the pop-up content ";
  div.style.display = 'none';
  document.body.appendChild('div');
  return div;
};
document.getElementById("Id").onclick = function(){
  //  Click to create first 1 A div Element 
  var win = createWindow();
  win.style.display = "block";
}

Code as above; You can have a look, There are obvious shortcomings, For example, if I click on an element, I need to create an div. I click on the second element to create div again. We frequently click on certain elements, and they will frequently create elements of div. Although we can remove pop-up codes when we click Close, our frequent creation and deletion are not good, especially for performance, which will have a great impact. Frequent operations on DOM will cause redrawing, which will affect performance; Therefore, this is a very bad habit; We can now use the single mode to achieve the pop-up effect, we only instantiate it once; The following code:

//  Realize single mode pop-up window 
var createWindow = (function(){
  var div;
  return function(){
    if(!div) {
      div = document.createElement("div");
      div.innerHTML = " I am the pop-up content ";
      div.style.display = 'none';
      document.body.appendChild(div);
    }
    return div;
  }
})();
document.getElementById("Id").onclick = function(){
  //  Click to create first 1 A div Element 
  var win = createWindow();
  win.style.display = "block";
}

Understand writing common monomer patterns

Although the above pop-up code has completed the use of single mode to create pop-up effect, the code is not universal, for example, the above is the code to complete pop-up. What if we need an iframe in the page in the future? Do we need to rewrite a set of code to create iframe? For example, create iframe as follows:

var createIframe = (function(){
  var iframe;
  return function(){
    if(!iframe) {
      iframe = document.createElement("iframe");
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
    }
    return iframe;
  };
})();

We see the above code. The code for creating div is very similar to the code for creating iframe. We can now consider separating the general code and making the code completely abstract. We can now write a set of codes encapsulated in the getInstance function, as follows:

var getInstance = function(fn) {
  var result;
  return function(){
    return result || (result = fn.call(this,arguments));
  }
};

As the above code: We use a parameter fn to pass it in. If there is an instance of result, we will return it directly. Otherwise, the current getInstance function calls fn, and the this pointer points to this fn function; After that, the return is saved in result; Now we can pass a function in, whether it is creating div or creating iframe, in short, if this is the case, you can use getInstance to get their instance object;

The following tests create iframe and the code for creating div are as follows:

//  Monomer mode 
var Singleton = function(name){
  this.name = name;
  this.instance = null;
};
Singleton.prototype.getName = function(){
  return this.name;
}
//  Get an instance object 
function getInstance(name) {
  if(!this.instance) {
    this.instance = new Singleton(name);
  }
  return this.instance;
}
//  Examples of testing monolithic patterns 
var a = getInstance("aa");
var b = getInstance("bb");

0