Dieses Mal werde ich Ihnen das Hinzufügen, Löschen, Ändern und Überprüfen der Singleton-Kapselung vorstellen. Was sind die Vorsichtsmaßnahmen für das Hinzufügen, Löschen, Ändern und Überprüfen der Singleton-Kapselung?
Das Beispiel in diesem Artikel beschreibt, wie JS die Funktion zum Kapseln des Hinzufügens, Löschens, Änderns und Überprüfens von Daten basierend auf dem Einzelfallmodus (Singleton) im Design implementiert Muster. Teilen Sie es wie folgt als Referenz mit allen:
Einzelfallmodus
Die Kernstruktur des Einzelfallmodus enthält nur eine namens Eine besondere Klasse von Singletons. Das Singleton-Muster kann sicherstellen, dass eine Klasse im System nur eine Instanz hat
Die ursprüngliche Definition des Singleton-Musters erschien in „Design Patterns“ (Addison Wesley, 1994): „Garantie, dass eine Klasse nur eine Instanz hat.“ . Und stellen Sie einen globalen Zugriffspunkt bereit, um darauf zuzugreifen.
“
Das Frontend verwendet häufig einige asynchrone Vorgänge im Zusammenhang mit Schnittstellen wie Hinzufügen, Löschen, Ändern und Abfragen. Nehmen wir ein Beispiel. Wenn ich eine Datenliste bearbeite, füge ich häufig die Funktionen zum Ändern und Löschen hinzu. Einige Lösungen verwenden synchron (aktualisieren Sie die Seite), und die Benutzererfahrung ist besser, wenn Sie asynchron verwenden.
var Singleton = (function(){
SingletonClass() {
}
var singleton = null;
return {
getInstance: function() {
if (singleton == null) {
singleton = new singletonClass();
} else {
return singleton;
}
}
}
})();
Singleton.getIntance();Nach dem Login kopieren
Der Code lautet wie folgt
Funktionen hinzufügen Funktion löschen
Die beiden obigen Codeausschnitte beschreiben kurz den JS-Code zum Hinzufügen und Löschen von Funktionen. Einige Schüler haben festgestellt, dass sie etwas gemeinsam haben, das heißt, dass einige der Ajax-Anfragen gleich sind. Was ist, wenn die Löschfunktion auch an anderen Stellen verwendet wird? , dann müssen Sie den gleichen Code an anderen Stellen schreiben. Ich fühle mich sehr unwohl
$(".add").click(function(){
$.ajax({
type: "post"
dataType:"json",
url: "http://www.jb51.net/",
data: {name:"csdn博客",dir:"web前端"},
success: function( result ){
if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
},
error: function(){
alert("新增出现异步，请得新增加或联系技术管理员");
}
});
});Nach dem Login kopieren
Lasst es uns verbessern
$(".del").click(function(){
$.ajax({
type: "post"
dataType:"json",
url: "http://www.jb51.net/",
data: {id:"1"},
success: function( result ){
if ( result.status ) { alert("删除成功！") } else { alert("删除失败") }
},
error: function(){
alert("新增出现异步，请得新增加或联系技术管理员");
}
});
});Nach dem Login kopieren
Ich verwende oft Singleton-Instanzen, um einige Tool-Tool-Klassen zu erstellen
Vorteile der Verwendung von Entwurfsmustern: Entkopplung, Lesbarkeit Stark , klare Codestruktur;
var SingletonCRUD = (function(){
SingletonClass() {}
SingletonClass.prototype = {
constructor: SingletonClass,
add: function( data ) {
$.ajax({
type: "post"
dataType:"json",
url: "http://www.jb51.net/",
data: data,
success: function( result ){
if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
},
error: function(){
alert("新增出现异步，请得新增加或联系技术管理员");
}
});
}，
remove: function( data ) {
$.ajax({
type: "post"
dataType:"json",
url: "http://www.jb51.net/",
data: data,
success: function( result ){
if ( result.status ) { alert("删除成功！") } else { alert("删除失败") }
},
error: function(){
alert("新增出现异步，请得新增加或联系技术管理员");
}
});
}
}
var singleton = null;
return {
getInstance: function() {
if (singleton == null) {
singleton = new singletonClass();
} else {
return singleton;
}
}
}
})();
var curd = SingletonCRUD.getIntance();
$(".add").click(function(){
var data = {"name":"name"};
curd.add( data );
});
$(".del").click(function(){
var data = {"id": 1};
curd.remove( data );
});Nach dem Login kopieren
Durch das obige kleine Beispiel werden die Erfassungsdaten (Klickereignisfunktion) und Betriebsdaten (Ajax-Anfrage) im Klickereignis getrennt;
Durch die Reihenfolge Die optimiert Code des Beispielmodus:
Die Ajax-Methode in SingleClass entspricht auch einem Fassadenmodus (Facade), der interne Details verbirgt und eine Schnittstelle der Außenwelt zugänglich macht.
Glauben Sie; Ob es Ihnen gefällt oder nicht: Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
var SingletonCRUD = (function(){
SingletonClass() {}
SingletonClass.prototype = {
constructor: SingletonClass,
ajax: function(url, data success ){
$.ajax({
type: "post"
dataType:"json",
url: url,
data: data,
success: success,
error: function(){
alert("新增出现异步，请得新增加或联系技术管理员");
}
});
},
add: function( data ) {
this.ajax("http://www.jb51.net/", data, function( result ){
if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
});
}，
remove: function( data ) {
this.ajax("http://www.jb51.net/", data, function( result ){
if ( result.status ) { alert("删除成功！") } else { alert("删除失败") }
});
}
}
var singleton = null;
return {
getInstance: function() {
if (singleton == null) {
singleton = new singletonClass();
} else {
return singleton;
}
}
}
})();Nach dem Login kopieren
Empfohlene Lektüre:
Detaillierte Erläuterung des Umfangs und der Voranalyse von js
Dynamische Anzeige ausgewählter Drop- Daten auflisten
Das obige ist der detaillierte Inhalt vonHinzufügen, Löschen, Ändern und Abfragen der Singleton-Kapselung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
