Here is a concise front-end knowledge system waiting for you to check, have a look, there will be a surprise oh, if you feel good, begged star ha ~


A brief description of singleton patterns

Concept:

The idea of the singleton pattern is to ensure that there is only one instance of a particular class, meaning that the second time you use the same class to create a letter object, it should be exactly the same as the first time.

Features:

  1. The namespace can be partitioned to remove the risk of global variables.
  2. Code can be organized into a more integrated, easy to read and maintain.
  3. Can be instantiated and instantiated once.

A simple implementation of the singleton pattern

        var Singleton = function(name){
            this.name = name;
        };
        Singleton.prototype.getName = function() {returnthis.name; } var getInstance = (function() {
            var instance = null;
            return function(name) {
                if(! instance) { instance = new Singleton(name); }returninstance; }}) (); Var a = getInstance("aa");
        var b = getInstance("bb");
        console.log(b.getName()); // "aa"
        console.log(a === b);     // true
Copy the code

To implement a singleton is to use a variable to indicate whether the class is instantiated. If it is not instantiated, we can instantiate it once. Otherwise, we return the instantiated object.

The use of singleton patterns

In our daily work, we often need to implement a mask layer to prevent users from interrupting page operations. The so-called mask layer is a translucent div layer with the same size as the window. We want pages to have at most one mask layer, so singletons are a good fit.

Here is the code implementation ~~~

        var createMask = (function(){
            var div;
            return function() {if(! div) { div = document.createElement("div");
                    div.innerHTML = "Mask layer";
                    div.style.display = 'none';
                    document.body.appendChild(div);
                }
                return div;
            }
        })();
        document.querySelector("body").onclick = function(){
            var win = createMask();
            win.style.display = "block";
        }
Copy the code

The above code, although can achieve the requirements, but not general. If the business needs us to implement the singleton pattern to create popover effect, it will need to copy a copy of the code, so we need to encapsulate the singleton pattern.

Encapsulation of singleton patterns

var getInstance = function(fn) {
    var result;
    return function() {returnresult || (result = fn.call(this,arguments)); }};Copy the code

If there is an instance of result, return it. If there is an instance of result, execute fn and save the result to result.

Now, no matter how many objects we need to instantiate, we use getInstance to do it.

Here is a code example ~~~

        var createMask = function(){
            var div = document.createElement("div");
            div.innerHTML = "Mask layer";
            div.style.display = 'none';
            document.body.appendChild(div);
            returndiv; }; Var createIframe = // createIframefunction(){
            var iframe = document.createElement("iframe");
            document.body.appendChild(iframe);
            returniframe; }; Var getInstance =function(fn) {
            var result;
            return function() {returnresult || (result = fn.call(this,arguments)); }}; Var createSingleMask = getInstance(createMask); document.querySelector("body").onclick = function(){
            var win = createSingleMask();
            win.style.display = "block"; }; Var createSingleIframe = getInstance(createIframe); document.querySelector("body").onclick = function(){
            var win = createSingleIframe();
            win.src = "https://jiangxia.github.io/";
        };
Copy the code

The singleton pattern is used more often in our daily applications, which is equivalent to encapsulating our code in one, exposing only one entry, thus avoiding contamination of all variables.