Big Xun Jun talk about JS and design mode------single case mode singleton ()

Source: Internet
Author: User

One, general overview

1, the author discusses

As the name implies, the singleton mode is not difficult to understand, is to produce a unique instance of a class, in our actual development will also use this pattern, it belongs to the creation of a pattern, based on the syntax of the JS language itself,

The object's direct amount "{}" can also be used as a representation of a singleton pattern, as in the following code reference

1 functionFoo () {2      This. Bar = "Hello Singleton!" ;3 } ;4 varSingleton = {5Instance:NULL ,6GetInstance:function(){7         if(! This. Instance) {8              This. Instance =NewFoo ();9         }Ten         return  This. instance; One     } A} ;

It's like this. When we call Singleton.getinstance () each time, we get a unique instance.

Singleton mode is one of the most basic and useful patterns of JavaScript, which provides a means of organizing code into a logical unit that is accessed through a single variable.

Monomers have many uses in Javascipt, which can be used to partition namespaces to reduce the flooding of global variables. You can also use the branch technology to handle the differences between browsers. Let's look at a few more examples (*^__^*)

1 varSingleton = (function(){2     functionFoo () {3          This. Bar = "Hello Singleton!" ;4     } ;5     return{6GetInstance:function(){7             if(!instance) {8Instance =NewFoo ();9             }Ten             returninstance; One         } A     } ; -})() ;

This is achieved through the module mode.

1 varSingleton = (function(){2     functionFoo () {3          This. Bar = "Hello Singleton!" ;4     } ;5     functionCreateInstance () {6         return NewFoo ();7     } ;8     return{9GetInstance:function(){Ten             if(!instance) { OneInstance =CreateInstance (); A             } -             returninstance; -         } the     } ; -})() ;

This is a single-case approach that incorporates the factory pattern implementation.

Singleton mode is one of the simplest forms in design mode. The purpose of this pattern is to make an object of a Class A unique instance of the system. To achieve this, you can start by instantiating it from the client. Therefore, you need a mechanism that only allows you to generate a unique instance of an object class, "block" All access to the object that you want to generate. Use the factory method to restrict the instantiation process. This method should be a static method (class method), because it makes no sense to let an instance of the class generate another unique instance.

Second, source case reference

We take the bootstrap front-end frame as an example to explain, the following is said to be "Alert.js v3.3.1" in the source code, as follows

This line of code,"if (!data) $ this. " Data (' Bs.alert', (Data = new alert (this))) " This is a singleton way to create an instance object of a component and determine whether an instance is created by locating the object that is cached in the DOM node.

Give us a few more examples to consolidate the way the singleton pattern is organized and how to use it

Look again, this is lazy loading.

Third, the introduction of the case

Today we will combine a singleton model with a factory model to do a small example to understand the main.

(1), create a singleton class

1 varSingleton = (function(){2     varInstance =NULL ;3     functionCreateInstance (type) {4         returnfactory.create (type);5     } ;6     return{7GetInstance:function(type) {8             if(!instance) {9Instance =CreateInstance (type);Ten             } One             returninstance; A         } -     } ; -})() ;

(2), Create factory class

1 varFactory = (function(){2     varInstancevendor = {3"Foo":function(){4             return NewFoo ();5         } ,6"Zoo":function(){7             return NewZoo ();8         }9     } ;Ten     return { OneCreate:function(type) { A             returnInstancevendor[type] (); -         } -     } ; the})() ;

(3), creating an Entity object class

1 function Foo () {2     this. Bar = "Hello Singleton!"  ; 3      This function () {4         return  This . Bar; 5     } ; 6 };

(4), creating a Client test class

1 function singleclient () {2      This function () {3         // Hello Singleton! 4     } ; 5 };

Four, summarize

The main points of the singleton pattern are three. One, there is only one instance of a class; Two, is that it must create this instance on its own; Thirdly, it must provide this instance to the whole system on its own. From the specific implementation point of view, is the following three points. One, the Singleton pattern class only provides a private constructor, Two, is a static private object in the class definition that contains the class. Three, is that the class provides a static, common function for creating or fetching static private objects of its own. hahaha, the end of this article, not to be continued, hope and we have enough communication, common progress (*^__^*) hehe ...

Big Xun Jun talk about JS and design mode------single case mode singleton ()

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.