Introduction to JavaScript Design patterns and single case mode

Design patterns are a set of experiences that have been reused, mature, categorized and experienced in countless combat designs. Design patterns are used to make the system code reusable, extensible, decoupled, easier to understand, and to ensure the reliability of the code. Design pattern makes code development truly engineering, design pattern is the cornerstone of software engineering, like building structure. Only a solid foundation to lay a good structure to build a good high-rise buildings. Why should there be a design pattern? for the reuse of code, the principle of opening and closing principle of maintainability design mode is added: open to expansion, close to modification. For example, in life, only to build up the building, instead of demolition of the building (change the structure of the building) on the Richter conversion principle : The subclass inherits the parent class, the individual tune completely can, for example: Puppy is an animal, we can call the puppy's sleeping and eating method, does not affect the parent class relies on the reversal principle : Refers to an object, If the object has the underlying type, refer directly to the bottom, for example: Pour the water from the well into the bucket, the water can be in the well, or it can be in the bucket, and the bottom is the water in the well. interface Isolation principle : Each interface should be a role, the responsibility is single, do not affect each other. For example: Each key to open a lock. synthesis/Aggregation Reuse principle : New objects should use some existing objects to make them part of the new object, such as: There are some camera parts in hand, and then buy a new camera. Dimitri Principle : An object should have as little knowledge of other objects as possible, i.e. high cohesion, low coupling, minimizing the connections between components and decoupling. For example: Don't put a toothbrush and brush together.

In short, through the design pattern of these principles, you can stand on the shoulders of giants hold system architecture. single case mode of design pattern

1 single case mode is what.

Single example is to ensure that a class has only one instance, the method is generally to determine whether the instance exists or not, if there is a direct return, if it does not exist, create and return, this ensures that a class has only one instance object, in JS, a singleton as a namespace provider, Provides a unique access point from the global namespace to access the object.

2 The role of single example mode: The object of a class in a communication system between modules can only exist a property and method to protect itself

3 considerations in a single case pattern:
-note the use of this
-Note that closures are easy to cause memory leaks and need to be recycled quickly
-Note the cost of new, for example: declaring a literal form directly to initialize a string is less expensive than passing a new one ()

4 Single case Mode display: Example: Using a single case pattern to represent: the process of communication between Joh and lily two persons:

var Joh = (function (argument) {
  //inside has a Room object
  johhouse = function (message) {
    This.doorbell = messages;//Doorbell as information Channel, where the doorbell on behalf of the information
  };
  var door; Initialize a gate
  var info = {//
    Send Message Method
    Sendmessage:function (Messages) {
      //This is not created in the single case mode, then returns
      if (!door {
        door = new Johhouse (message);
      }
      return door;
    }
  ;
  return info; Joh is this info
}) ();

var Lily = {
  calljoh:function (msg) {
    var door = joh.sendmessage (msg);//Here the SendMessage function is a closure
    alert ( Door.doorbell);
    door = null; Recycle
  }
}

lily.calljoh (' I am coming! ');//Eject I am coming!

Example 2: Communication between buttons on the page

<div class= ' Topbar ' > <button id= ' a ' >A</button> </div> <div class = ' Banner ' > <button id= ' b ' >B</button> </div> 

var Topbar = {
  init:function () {
    this.render ();
    This.bind ();
  },
  A:4,
  //Render function is used to get page element
  render:function () {
    This.btna = document.getElementById (' a ');
  },
  //bind function is used to bind event
  bind:function () {
    var me = this;
    Bind-point-click events Update itself
    This.btnA.onclick = function () {
      me.change ();
      Console.log (ME.A); Output current A
    }
  ,
  change:function () {
    THIS.A = 5;}}
;

var banner = {
  init:function () {
    this.render ();
    This.bind ();
  },
  //Render function is used to get page element
  render:function () {
    THIS.BTNB = document.getElementById (' B ');
  },
  //bind function is used to bind event
  bind:function () {
    var me = this;
    This.btnB.onclick = function () {
      me.change ();
    }
  },
  change:function () {
    Console.log (' Topbar.a before: ', TOPBAR.A);
    TOPBAR.A = n;
    Console.log (' topbar.a after: ', TOPBAR.A);
  }
;

Topbar.init ();
Console.log (TOPBAR.A); 8

banner.init ();

The examples in the above example are: page initialization, output 4 Click a when the output 5

Then click b to Output:

TOPBAR.A before:  5
topbar.a after:  40

The communication between components can be done through the single example mode, and there is only one instance in the global scope, and the communication between the instances can be achieved.