JS的平凡之路--单例模式的各种实现方式

单例模式:保证一个类有且仅有一个实例,并且有一个全局访问点。虽然JavaScript中没有类的概念,但是我们依旧可以用很多方式模拟单例模式。

一、全局变量实现单例模式

  用全局变量实现的单例模式:

            var singleton = {
                num: 1,
                add: function (a) {
                    this.num += a;
                }
            }
            const s1 = singleton;
            const s2 = singleton;
            console.log(s1 === s2) // true

  虽然这样可以实现一个单例模式,但是:

  • 全局变量很容易被污染(降低污染的方式可以使用命名空间和闭包封装私有变量);
  • 对于this的使用上可能会出现一些弊端,导致this不再指向例子中的singleton。

二、构造函数的静态属性实现单例

  通过构造函数的静态属性来判断是否创建过实例:

            function Singleton() {
                if (Singleton.instance) {
                    return Singleton.instance;
                }
                this.name = "单例";
                Singleton.instance = this;
            }

            const s1 = new Singleton();
            const s2 = new Singleton();
            console.log(s1 === s2); // true

  这种方式看起来好像还不错,但是一旦你修改Singleton.instance就功亏一篑了。

三、利用代理实现单例模式

  通过构造函数的静态属性的实现方法,我们可以发现单例的创建和判断的代码多放在了构造函数中,这其实违反了职责单一的原则。所以我们可以通过代理将这两部分的代码拆分开:

            function Person(name) {
                this.name = name || '无名';
            }

            var ProxyCreatePersonSingleton = (function () {
                let _instance;
                return function () {
                    if (!_instance) {
                        _instance = new Person(arguments[0]);
                    }
                    return _instance;
                }
            })();

            const p1 = new ProxyCreatePersonSingleton('xiaoming');
            const p2 = new ProxyCreatePersonSingleton();
            console.log(p1 === p2); // true

  但是有个缺点,比如我们突然要一个动物的单例,需要一个非常类似的代理方法,但是我们不得不重复的书写。

四、改造

             function createSingle(fn) {
                 let _instance;
                 return function () {
                     return _instance || (_instance = fn.apply(this, arguments));
                 }
             }

             const personSingle = createSingle(_ => new Person);
             const p1 = personSingle();
             const p2 = personSingle();

             console.log(p1 === p2); // true

  这里我们利用闭包和高阶函数的知识,减少重复的代码书写。

如果文章的内容能够帮助您,欢迎关注(^_^)。
GitHub

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
单例模式是一常用的设计模式,它的主要目的是确保一个类只有一个实例,并提供一个全局访问点。在 JavaScript 中,可以使用单例模式实现弹出 div 的功能。 下面是一个简单的例子: ```javascript var Popup = (function() { var instance; function createInstance() { var div = document.createElement("div"); div.innerHTML = "Hello, world!"; div.style.display = "none"; document.body.appendChild(div); return div; } return { getInstance: function() { if (!instance) { instance = createInstance(); } return instance; }, show: function() { this.getInstance().style.display = "block"; }, hide: function() { this.getInstance().style.display = "none"; } }; })(); // 使用 Popup.show(); // 显示弹出框 Popup.hide(); // 隐藏弹出框 ``` 在这个例子中,我们使用了一个立即执行函数,创建了一个私有变量 `instance`,它存储了唯一的实例。在 `createInstance` 函数中,我们创建了一个 div 元素,并将其添加到页面中。然后,我们返回这个 div 元素,作为单例的实例。 在 `getInstance` 方法中,我们首先检查实例是否已经存在。如果不存在,我们调用 `createInstance` 方法来创建实例。最后,我们返回实例。 在 `show` 和 `hide` 方法中,我们通过 `getInstance` 方法来获取实例,并设置其样式属性来显示或隐藏弹出框。 通过这方式,我们可以确保只有一个弹出框实例存在,并且可以在任何时候访问它。同时,我们可以在需要时方便地显示或隐藏弹出框。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值