Der Singleton-Modus in JS implementiert das Hinzufügen, Löschen, Ändern und Abfragen von Daten

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();

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.

Der Code lautet wie folgt

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("新增出现异步，请得新增加或联系技术管理员");
  }
  });
});

Funktion löschen

$(".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("新增出现异步，请得新增加或联系技术管理员");
  }
  });
});

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

Lasst es uns verbessern

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 );
});

Ich verwende oft Singleton-Instanzen, um einige Tool-Tool-Klassen zu erstellen;

Vorteile der Verwendung von Entwurfsmustern: Entkopplung, hohe Lesbarkeit usw Die Codestruktur ist klar;

Durch das obige kleine Beispiel werden die Erfassungsdaten (Klickereignisfunktion) und Betriebsdaten (Ajax-Anfrage) im Klickereignis getrennt;

Durch Verwendung des Singleton-Modus Der optimierte Code:

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;
   }
  }
 }
})();

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

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!