"Design pattern"javascript-a single case pattern and scene practice of design pattern

Single Example Introduction

The last time I summed up the module pattern in the design pattern, there may not be really positive use in the scene, found that the effect is not good, want to use it is not so handy,

So this time I'm going to change the way ~ ~ from a simple scene to see the singleton mode,

Because JavaScript is very flexible, it also brings a lot of flexibility when using design patterns, and there are many ways to implement a single case, which requires us to grasp the core of the singleton pattern .

Introduction to the Singleton pattern:

Singleton mode is to ensure that there is only one instance of a class, the method of implementation is generally first to determine whether the instance exists or not, if there is a direct return, if it does not exist to create a return, this ensures that a class has only one instance object.

In JavaScript, a singleton serves as a namespace provider, providing a unique access point from the global namespace to access the object

Role:

　1. Communication between modules

2, the system of a variety of objects can only exist one

3, protect their own properties and methods, to ensure that all the object access is the same instance

Precautions:

1, note the use of this

2, closures easily cause memory leaks, do not need to deal with the rapid recovery

Simple scene

Let's start by implementing a standard Singleton pattern:

1, if the instance exists on the return, the instance does not exist to create a new instance;

2. Isolate the code from the global namespace to provide a single point of access for the function:

        varMysingleton = (function () {            //instance holds a reference to singletonLet instance; //Singleton            //private methods and variables            functioninit () {functionPrivatemethod () {Console.log (' I am Private '); } Const privatevariable= ' I am also private '; Const Privaterandomnumber=Math.random (); //public methods and variables                return{publicmethod:function() {Console.log (' I am Public '); }, GetRandomNumber:function(){                        returnPrivaterandomnumber; }                }            }            //Gets the singleton instance, returns if it exists, creates a new instance if it does not exist            return{getinstance:function(){                    if(!instance) {Instance=init (); }                    returninstance;        }            }        })(); //TestConst SINGLEA =mysingleton.getinstance (); Const Singleb=mysingleton.getinstance ();
Console.log (Singlea.getrandomnumber ()= = = Singleb.getrandomnumber ());//trueConsole.log (Singlea.publicmethod ())//I am Public

Here is a simple non-standard singleton pattern type that we often use in the scene,

Scenario One: Using a simple singleton pattern to implement an editable table

Html

   <Tableclass= "Table table-bordered"ID= "Js-table-test">        <TR>            <TD>Number</TD>            <TD>Name</TD>        </TR>        <TR>            <TD>1</TD>            <TD>Okaychen</TD>        </TR>        <TR>            <TD>2</TD>            <TD>Stackoverflowchen</TD>        </TR>    </Table>

We may do this before using the singleton mode:

 $ ("#js-table-test TD"). Click (function   ( Argument) { var  m = $ (this  
   
    ). html ();  
    var  s = "<input type= ' text ' value= '" + M + "'/>" 
    ;        $ ( 
    this  
    ). html (s); }) $ ( "#js-table-test TD"). On (' KeyUp ', ' input ', 
    function  
     (E) {e.stoppropagation ();  
    var  me = $ (
    this  
    );             
    if  (E.keycode==13
    
   

So let's compare the idea of using a single example of code >>

1. Use the self-executing function to pass the parameter $ to reduce the number of queries

2. Use simple singleton mode to lay the groundwork for later modification or modularization

Provides single access point init, datas shared data, render package corresponding elements, bind to bind events, _DO to regulate private events;

(function ($) {            //name Space            varindex ={init:function () {                    //entrance                    varme = This;                    Me.render ();                Me.bind (); }, Datas: {//Sharing DataNum:1}, Render:function () {                    //encapsulates the corresponding element                    varme = This; Me.test= $ (' #js-table-test TD '); }, bind:function () {                    //Binding Events                    varme = This;Me.test.on (' Click ', $.proxy (me[' _do '), This)); }, _do:function(e) {//Private Events                    varme = This; varm =$ (e.target). text (); vars = "<input type= ' text ' value= '" + M + "'/>";                    $ (e.target). HTML (s); Console.log (Me.datas.num++)}} index.init (); }) (jQuery);

"Design pattern"javascript-a single case pattern and scene practice of design pattern