「设计模式」单例模式🍑

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

单例模式的定义

单例模式是一种简单且常用的模式，一般被用来实现仅需要单一的对象，如全局缓存、浏览器中的 window 对象、通用提示浮窗等。单例模式的定义是保证一个类仅有一个实例，并提供一个访问它的全局访问点。

日常最常用的是惰性单例，是单例模式的重点，惰性即指的是在需要的时候才创建对象实例。

单例模式的应用场景

单例模式在我们实际开发中使用的场景最常见的莫过于公共提示弹窗、带 iframe 链接的登录弹窗。

其中带 iframe 链接加载的登录弹窗这个场景最为常见，实现原理是惰性单例，最能体现单例模式在实际应用中的价值。接下来我们会着重就这个场景来进行分析。

单例模式的优缺点

优点：

• 不需要重复增删 dom 节点，减少重载的频率，节省性能消耗
• 完整的单例模式遵循单一职责原则，逻辑清晰，易理解
• 代码耦合度低，易维护 缺点：
• 需要编写的代码量比较多
• 不适用需要频繁变化的对象
• 由于需要额外的变量来进行判断，如果滥用单例，会导致变量空间的多余占用

单例模式的实现原理分析

接下来我们针对应该怎么写带 iframe 链接的登录弹窗来进行分析：

• 首先实现核心的创建函数，即新建 iframe 的 dom 节点并插入 body
• 实现一个通过的管理单例的方法，方法内部用变量判断是否重复调用
• 根据通用逻辑产出登录弹窗函数，函数名为对外暴露的调用方法
• 用户点击按钮时会执行新建弹窗步骤，后续点击通过样式控制显示隐藏即可

具体实现的代码

根据上一步的思路写出代码

// 核心创建函数
var createIframe = function(param) {
    var iframe = document.createElement('iframe');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(iframe);
    iframe.src = param;
    return iframe;
}

// 管理单例的逻辑，通用的
var getSingle = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments));
    }
}

// 产出登录弹窗函数
var loginIframe = getSingle(createIframe);

// 使用时的点击函数
var btn = function() {
    var href = 'https://juejin.cn/';
    // 这里new加不加都行，加了是因为比较符合习惯
    var loginLayer = new loginIframe(href);
    loginLayer.style.display = 'block';
}
// 这里用延时3s模拟用户点击触发
setTimeout(btn, 3000);