Vorwort
Im Prozess der JavaScript-Entwicklung haben Pioniere viele Lösungen für spezifische Probleme aus der Praxis zusammengefasst. Einfach ausgedrückt ist ein Designmuster eine prägnante und elegante Lösung für ein bestimmtes Problem zu einem bestimmten Anlass.
Im folgenden Zeitraum werde ich verschiedene gängige Designmuster in JavaScript aufzeichnen. Vielleicht kennen Sie es bereits, vielleicht haben Sie es täglich verwendet, sind aber mit dem Konzept nicht besonders vertraut, oder vielleicht haben Sie nur vage Vorstellungen davon. Dann glaube ich, dass Ihnen diese Serie auf jeden Fall einige Gewinne bringen wird
Bevor Sie diese gängigen Muster verstehen, beherrschen Sie standardmäßig zumindest
Wenn Sie sie verstehen, können Sie ein Muster besser verstehen. Natürlich können Ihnen die Dinge, die ich diesbezüglich aufgezeichnet habe, vielleicht etwas helfenPortal
Wenn der Artikel Auslassungen oder Fehler enthält, lesen Sie ihn bitte durch. Vielen Dank im Voraus für Ihre Ratschläge
Jetzt fangen wir damit an – Singleton-Muster
Konzept
Wie der Name schon sagt, gibt es nur eine Instanz
Definition: Stellen Sie sicher, dass eine Klasse nur eine Instanz hat und stellen Sie einen globalen Zugriffspunkt bereit, um darauf zuzugreifen.
Haben Sie beim Anblick einer solchen Definition irgendwelche Gedanken im Kopf? Konzept globaler Variablen? Es ist unbestreitbar, dass globale Variablen dem Konzept des Singleton-Musters entsprechen. Allerdings verwenden wir es normalerweise nicht und sollten es aus den folgenden zwei Gründen nicht als Singleton verwenden:
Vor ES6 haben wir normalerweise einen Konstruktor verwendet, um eine Klasse zu simulieren. Jetzt können wir das Schlüsselwort class auch direkt verwenden, um eine Klasse zu erstellen, obwohl es im Wesentlichen so ist ein Prototyp
Um sicherzustellen, dass eine Klasse nur eine Instanz hat, müssen wir eine Variable bereitstellen, um zu markieren, ob eine Instanz für eine Klasse erstellt wurde. Daher ist der Kern des Singleton-Modus: Stellen Sie sicher, dass es nur eine Instanz gibt und bieten Sie globalen Zugriff
Um diesen Kern herum haben wir im Grunde die Implementierung des Singleton-Modus verstanden
Implementierung
Basisversion
Gemäß der Definition des Singleton-Musters können wir einfach
var Singleton = function(name){
this.name = name
}
Singleton.instance = null // 初始化一个变量Singleton.getInstance = function(name) {// 判断这个变量是否已经被赋值，如果没有就使之为构造函数的实例化对象// 如果已经被赋值了就直接返回
if(!this.instance) {
this.instance = new Singleton(name)
}
return this.instance
}
var a = Singleton.getInstance('Tadpole')
var b = Singleton.getInstance('Amy')
a === b // trueNach dem Login kopieren
in implementieren auf folgende Weise
Der obige Code spiegelt deutlich die Definition des Singleton-Musters wider. Nur eine Instanz wird über eine Zwischenvariable initialisiert, sodass a und b am Ende völlig gleich sind
Wir können auch das Klassenschlüsselwort von ES6 verwenden, um dies zu erreichen
class Singleton {
constructor(name){
this.name = name
this.instance = null
}
// 提供一个接口对类进行实例化
static getInstance(name) {
if(!this.instance) {
this.instance = new Singleton(name)
}
return this.instance
}
}Nach dem Login kopieren
Das ist nicht schwer finde das ES6 Die Implementierungsmethode ist im Grunde die gleiche wie unsere Implementierung durch den Konstruktor
Es gibt Probleme:
Es ist nicht transparent genug, wir müssen den Aufruf einschränken Methode der Klasseninstanziierung
Die Kopplung ist zu hoch, die Kopplung funktionaler Geschäftscodes ist für eine spätere Wartung nicht förderlich
Konstruktor
Lassen Sie uns eine einfache Änderung an der obigen Methode vornehmen
// 将变量直接挂在构造函数上面，最终将其返回
function Singleton(name) {
if(typeof Singleton.instance === 'object'){
return Singleton.instance
}
this.name = name
return Singleton.instance = this
}
// 正常创建实例
var a = new Singleton('Tadpole')
var b = new Singleton('Amy')Nach dem Login kopieren
Lösen Sie das Problem, dass die Basisversion der Klasse nicht transparent genug ist. Sie können die neue verwenden Schlüsselwort zum Initialisieren der Instanz, aber es gibt auch neue Probleme
Diese Methode kann auch über die ES6-Methode implementiert werden
// 将 constructor 改写为单例模式的构造器
class Singleton {
constructor(name) {
this.name = name
if(!Singleton.instance) {
Singleton.instance = this
}
return Singleton.instance
}
}Nach dem Login kopieren
Abschluss
Durch die Definition des Singleton-Modus können Sie Ich möchte sicherstellen, dass es nur eine Instanz gibt und globalen Zugriff ermöglichen kann. Dann können Verschlüsse solche Anforderungen sicherlich erfüllen
var Singleton = (function () {
var SingleClass = function () {};
var instance;
return function () {
if (!instance) {
instance = new SingleClass() // 如果不存在 则new一个
}
return instance;
}
})()Nach dem Login kopieren
Durch die Eigenschaften von Verschlüssen wird eine Variable gespeichert und schließlich zurückgegeben, wodurch globaler Zugriff bereitgestellt wird
In ähnlicher Weise löst der obige Code das Problem immer noch nicht Kopplung
Beobachten wir diesen Codeabschnitt sorgfältig, wenn wir den Konstruktorteil nach außen extrahieren, wird dann die Funktionstrennung erreicht?
Proxy-Implementierung
Ändern Sie den obigen Code
function Singleton(name) {
this.name = name
}
var proxySingle = (function(){
var instance
return function(name) {
if(!instance) {
instance = new Singleton(name)
}
return instance
}
})()Nach dem Login kopieren
将创建函数的步骤从函数中提取出来，把负责管理单例的逻辑移到了代理类 proxySingle 中。这样做的目的就是将 Singleton 这个类变成一个普通的类，我们就可以在其中单独编写一些业务逻辑，达到了逻辑分离的效果
我们现在已经达到了逻辑分离的效果，并且也不 透明 了。但是，这个负责代理的类是否已经完全符合我们的要求呢，答案是否定的。设想一下，如果我们的构造函数有多个参数，我们是不是也应该在代理类中体现出来呢
那么，有没有更通用一些的实现方式呢
通用惰性单例
在前面的几个回合，我们已经基本完成了单例模式的创建。现在，我们需要寻求一种更通用的方式解决之前留下来的问题
试想一下，如果我们将函数作为一个参数呢
// 将函数作为一个参数传递
var Singleton = function(fn) {
var instance
return function() { // 通过apply的方式收集参数并执行传入的参数将结果返回
return instance || (instance = fn.apply(this, arguments))
}
}Nach dem Login kopieren
这种方式最大的优点就是相当于缓存了我们想要的结果，并且在我们需要的时候才去调用它，符合封装的单一职责
应用
前面有说过，所有的模式都是从实践中总结而来，下面就让我们来看看它在实际开发中都有哪些应用吧
通过单例模式的定义我们不难想出它在实际开发中的用途，比如：全局遮罩层
一个全局的遮罩层我们不可能每一次调用的时候都去创建它，最好的方式就是让它只创建一次，之后用一个变量将它保存起来，再次调用的时候直接返回结果即可
单例模式就很符合我们这样的需求
// 模拟一个遮罩层var createDiv = function () {
var div = document.createElement('div')
div.style.width = '100vw'
div.style.height = '100vh'
div.style.backgroundColor = 'red'
document.body.appendChild(div)
return div
}// 创建出这个元素var createSingleLayer = Singleton(createDiv)document.getElementById('btn').onclick = function () { // 只有在调用的时候才展示
var divLayer = createSingleLayer()
}Nach dem Login kopieren
当然，在实际应用中还是有很多适用场景的，比如登录框，还有我们可能会使用到的 Vux 之类的状态管理工具，它们实际上都是契合单例模式的
后记
单例模式是一种简单而又实用的模式，通过创建对象和管理单例的两个方法，我们就可以创造出很多实用且优雅的应用。当然，它也有自身的缺点，比如只有一个实例~
合理使用才能发挥出它的最大威力
最后，推荐一波前端学习历程，感兴趣的小伙伴可以 点击这里 ，也可以扫描下方二维码关注我的微信公众号，查看往期更多内容，欢迎 star 关注
推荐教程：《JS教程》
Das obige ist der detaillierte Inhalt vonJavaScript-Designmuster-Singleton-Muster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
