js设计模式(创建型设计模式)-单例模式

工作中其实我们经常用到，只不过一直不知道他怎么称呼。如今重新认识一下，单例模式又称单体模式，是只允许实例化一次的对象。

---

1.非单例模式

  通常，我们在写页面，比如活动页面，比如操作dom的时候会写一些公共的方法来方便我们自己使用，比如:

function addCss() {

        var addStyle = "@-webkit-keyframes fall{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(" + (mH - 100) + "px)}}\

        @keyframes fall {from{transform:translateY(0)}to{transform:translateY(" + (mH - 100) + "px)}}";

        document.getElementsByTagName('style')[0].insertAdjacentHTML('beforeEnd', addStyle);

    }

    function r(min, max) {

        return ~~(Math.random() * (max - min) + min);

    }

    function $(id) {

        //缓存

        if (!window['_BC_' + id]) {

            window['_BC_' + id] = document.getElementById(id);

        }

        return window['_BC_' + id];

    }

2.单例模式

2.1 命名空间管理员

  其实单例模式我们也经常用到，比如你最熟悉的jquery,他就为我们提供了一个命名空间jquery。

  那么命名空间又是什么鬼？他就像人一样，每个人都有自己的空间，张三的空间就叫张三，李四的空间就叫李四，用名字来区别彼此。好比我们用jquery.animate()一样，是一个道理。这样我们就可以防止对象的重写，代码如下

var redpack = {

addClass:function(){},

$:function(){},

r:function(){}

}

2.2 模块分明

  单例模式中，我们可以更清晰的定义模块，方便代码的维护和扩展。好比tangram中的代码

baidu.dom.addClass  //添加元素类

baidu.dom.append

baidu.event.stopPropagation

2.3 创建小型代码库

2.4 无法修改的静态变量static

首先，js是不存在static的，但我们可以通过灵活的方式创建。我们只需要将变量定义在方法中，而不提供修改它的方法就可以了

var dl = (function() {

        var cfg = {

                a: 1,

                b: 2

            },

            return {

                get: function(param) {

                    return cfg[param] ? cfg[param] : '不存在';

                }

            }

    })()

2.5 惰性单例

单例模式还有一种延迟创建方式，称为惰性创建。代码如下

var dl = (function() {

        var instance = null;

        function contain() {

            return {

                a: 1,

                b: 2

            }

        };

        return {

            get: function() {

                if (!instance) {

                    var test = contain();

                }

                return test

            }

        }

    })()

惰性单例模式，可以节省初始加载时的开销，在需要的时候调用。