Parsing JavaScript single case pattern concept and example _javascript skill

Objective

Like other programming languages, JavaScript also has a number of design patterns, such as a single example mode, proxy mode, observer mode, and so on, skilled javascript design patterns can make our code logic clearer, and easier to maintain and refactor.

This article will introduce the more common and practical patterns in JavaScript mode--single case mode, which is mainly divided into concept and instance part. The introduction of an example will also explain the additional knowledge points in the code.

Single case mode concept

First, what is a single case pattern? It can be understood that a singleton pattern is designed to ensure that a class has only one instance and provides a global access point.

Perhaps some people still do not understand the concept of a single case, then you can imagine some examples of life. For example, when registering the account, if our registered account already exists, then the system will prompt us "the account already exists whether use this account login", we cannot create an identical account again, unless the original account is written off. This is the vivid embodiment of the single case model.

Similar examples include the landing box on the Web page, no matter how many times we click the login button, the interface will always display a landing bomb box, no longer create a second.

This article will take the landing bomb frame as an example to introduce the use of the single case mode.

Single case Mode instance

1.demo Display

Download the address: frame example

2. Code display

Code to build an instance of a single-mode bullet box everyone may write differently, but the goal is one: to build a globally unique and accessible bomb frame. Let's take this example step-by-step.

(1) Get DOM object

var $ = function (ID) {return
 typeof id = = ' string '? document.getElementById (ID): ID; 
};

First, in order to facilitate some of the operations on the DOM, we use the principle of functional programming to get the target ID of the element object method encapsulated, directly using the $ (ID) can be obtained.

(2) Bomb frame constructor

var Modal = function (ID, HTML) {
 this.html = html;
 This.id = ID;
 This.open = false;

Here we declare a modal as the constructor for the frame, and then define the public attribute HTML, ID, and open internally. HTML is used to define the contents of the frame, the ID is used to define the ID name of the frame, and open is used to determine whether the frame is open.

(3) Open method

Modal.prototype.create = function () {
 if (!this.open) {
 var Modal = document.createelement (' div ');
 modal.innerhtml = this.html;
 Modal.id = this.id;
 Document.body.appendChild (modal);
 settimeout (function () {
  modal.classList.add (' Show ');
 }, 0);
 This.open = true;
 }
;

We define the Create method on the modal prototype chain, where we create and insert a frame into the DOM and animate the frame with a class "show" animation effect. Here is a brief introduction to the following classlist:

Classlist is a more convenient operation element class attribute than classname, but incompatible compatibility IE10 the following version:

The Operation class method provided by it is similar to jquery, mainly

• Add (Class1, Class2, ...) adds one or more class names to the element, similar to jquery's addclass ()
• Remove (Class1, Class2, ...) removes one or more class names from the element, similar to jquery's Removeclass ()
• Contains (class) to determine whether the specified class name exists, similar to the jquery Hasclass ()

Here we use the Add method to add a show class to modal.

(4) Close method

Modal.prototype.delete = function () {
 if (this.open) {
 var Modal = $ (this.id);
 Modal.classList.add (' hide '); 
 settimeout (function () {
  document.body.removeChild (modal);
 };
 This.open = false;
 }
;

After defining the open method, we define a method to close the frame, add a hide animation effect to the frame object inside it, and finally remove the frame object from the page.

(5) Create an instance

var createintance = (function () {
 var instance;
 return function () {return
 instance | | (Instance = new Modal (' Modal ', ' This is a bullet frame ')
 }}
) ();

This is an important part of implementing a single case pattern, and we analyze the knowledge points:

Encapsulates the instance private variable with a closure and returns a function

Use of | | Syntax judgment if instance does not exist, then executes the latter's instantiated modal method, exists to return directly to instance, and ensures that only one instance of the frame is present

The creation of this instance can also be understood as part of the proxy pattern.

(6) button operation

var operate = {
 Setmodal:null,
 open:function () {
 this.setmodal = createintance ();
 This.setModal.create ();
 },
 delete:function () {
 this.setmodal? This.setModal.delete (): ';
 }
;

Here we put the button action in the operate object so that the open and close operation can get the instance setmodal through this.

(7) Binding events

$ (' open '). onclick = function () {
 operate.open ();
};
$ (' delete '). onclick = function () {
 operate.delete ();
};

Finally, we will open and delete methods to bind to two buttons up, so we use a single example of the implementation of the frame demo is realized.

Conclusion

This article only demonstrates one way of implementing a single example pattern, and how to build a generic single case pattern is given to interested readers.

The article inspiration originates from "Javascrit design pattern and Development practice" a book.

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!