⭐ 专栏简介
欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者，我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新，为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念，并提供实际案例和练习，让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具，我们都将为你提供丰富的内容和实用技巧，帮助你更好地理解并运用前端开发中的各种技术。
同时，我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进，前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术，使你能够站在前沿，与时俱进。通过掌握最新的前端技术，你将能够在竞争激烈的Web开发领域中有更大的竞争力。
📘 文章引言
一、单例模式是什么
单例模式（Singleton Pattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建
在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象，
从定义上来看，全局变量好像就是单例模式，但是一般情况我们不认为全局变量是一个单例模式，原因是：
全局命名污染
不易维护，容易被重写覆盖
二、实现
在javascript中，实现一个单例模式可以用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象即可，如下：
// 定义一个类 function Singleton(name) { this.name = name; this.instance = null; } // 原型扩展类的一个方法getName() Singleton.prototype.getName = function() { console.log(this.name) }; // 获取类的实例 Singleton.getInstance = function(name) { if(!this.instance) { this.instance = new Singleton(name); } return this.instance }; // 获取对象1 const a = Singleton.getInstance('a'); // 获取对象2 const b = Singleton.getInstance('b'); // 进行比较 console.log(a === b); 使用闭包也能够实现，如下： function Singleton(name) { this.name = name; } // 原型扩展类的一个方法getName() Singleton.prototype.getName = function() { console.log(this.name) }; // 获取类的实例 Singleton.getInstance = (function() { var instance = null; return function(name) { if(!this.instance) { this.instance = new Singleton(name); } return this.instance } })(); // 获取对象1 const a = Singleton.getInstance('a'); // 获取对象2 const b = Singleton.getInstance('b'); // 进行比较 console.log(a === b); 也可以将上述的方法稍作修改，变成构造函数的形式，如下： // 单例构造函数 function CreateSingleton (name) { this.name = name; this.getName(); }; // 获取实例的名字 CreateSingleton.prototype.getName = function() { console.log(this.name) }; // 单例对象 const Singleton = (function(){ var instance; return function (name) { if(!instance) { instance = new CreateSingleton(name); } return instance; } })(); // 创建实例对象1 const a = new Singleton('a'); // 创建实例对象2 const b = new Singleton('b'); console.log(a===b); // true
三、使用场景
在前端中，很多情况都是用到单例模式，例如页面存在一个模态框的时候，只有用户点击的时候才会创建，而不是加载完成之后再创建弹窗和隐藏，并且保证弹窗全局只有一个
可以先创建一个通常的获取对象的方法，如下：
const getSingle = function( fn ){ let result; return function(){ return result || ( result = fn .apply(this, arguments ) ); } };
创建弹窗的代码如下：
const createLoginLayer = function(){ var div = document.createElement( 'div' ); div.innerHTML = '我是浮窗'; div.style.display = 'none'; document.body.appendChild( div ); return div; }; const createSingleLoginLayer = getSingle( createLoginLayer ); document.getElementById( 'loginBtn' ).onclick = function(){ var loginLayer = createSingleLoginLayer(); loginLayer.style.display = 'block'; };
上述这种实现称为惰性单例，意图解决需要时才创建类实例对象
并且Vuex、redux全局态管理库也应用单例模式的思想
现在很多第三方库都是单例模式，多次引用只会使用同一个对象，如jquery、lodash、moment...
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！
