In diesem Artikel wird hauptsächlich die Implementierung von JS basierend auf dem Singleton-Modus (Singleton) im Entwurfsmuster vorgestellt, um die Funktion des Hinzufügens, Löschens, Änderns und Überprüfens von Daten zu kapseln. In Kombination mit dem Beispielformular wird die Korrelation von Javascript analysiert Informationen zum Singleton-Modus und Ajax zum Hinzufügen, Löschen, Ändern und Überprüfen der Datenbank finden Freunde in Not unter
Dieser Artikel beschreibt das Beispiel von JS basierend auf dem Singleton-Muster (Singleton). Entwurfsmuster zur Kapselung der Funktion des Hinzufügens, Löschens, Änderns und Überprüfens von Daten. 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.
“var Singleton = (function(){ SingletonClass() { } var singleton = null; return { getInstance: function() { if (singleton == null) { singleton = new singletonClass(); } else { return singleton; } } } })(); Singleton.getIntance();
Funktionen hinzufügen $(".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("新增出现异步,请得新增加或联系技术管理员");
}
});
});
$(".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("新增出现异步,请得新增加或联系技术管理员"); } }); });
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 ); });
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; } } } })();
In ES6 rufen untergeordnete Komponenten die Verwendungsmethoden für übergeordnete Komponenten auf
So erstellen Sie dynamische Formen in Winkeln
Verwenden Sie $http, um das asynchrone Hochladen von Excel-Dateien in AngularJS zu implementieren
Das obige ist der detaillierte Inhalt vonDer Singleton-Modus in JS implementiert das Hinzufügen, Löschen, Ändern und Abfragen von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!