Introduction to JavaScript Single example mode and _javascript technique of example

Objective

In fact, like other programming languages, JavaScript also has a number of design patterns, such as single example mode, proxy mode, observer mode, etc., skilled use javascript design pattern can make our code logic clearer, and easier to maintain and refactor.

This article will introduce the single example pattern in JavaScript, in the eyes of traditional development engineers, a single example is to ensure that a class has only one instance, the method of implementation is generally to determine whether the instance exists or not, if there is a direct return, if there is no existence on the creation and return, which ensures that a class has only one instance object. In JavaScript, a single instance acts as a namespace provider, providing a unique access point from the global namespace to access the object. Let's take a look at the detailed introduction.

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

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 method on the modal prototype chain create , where we create and insert a frame into the DOM and animate the frame with a class "show". Here is a brief introduction to the following classlist:

classListis a className more convenient operation element class attribute, but incompatible with compatibility IE10 the following version:

Classlist compatibility

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

add(class1, class2, ...) add one or more class names to the element, similar to jqueryaddClass()


remove(class1, class2, ...) removes one or more class names from an element, similar to jquery'sremoveClass()


contains(class) to determine if the specified class name exists, such as jqueryhasClass()


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 the method to close the frame, add the 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:

1. Use closures to encapsulate instance private variables and return a function

2. Use | | Syntax judgment if instance not present, the instantiation method of the latter is performed, and the Modal existence is returned directly instance to ensure 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 be done by this fetching the instance setModal .

(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.

Summarize

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 above is the entire content of this article, I hope that the study or work can bring some help.