Ajout, suppression, modification et requête d'encapsulation singleton

Cette fois, je vais vous apporter l'ajout, la suppression, la modification et la vérification de l'encapsulation Singleton. Quelles sont les précautions pour l'ajout, la suppression, la modification et la vérification de l'encapsulation Singleton ? Ce qui suit est un cas pratique, jetons un coup d'œil.

L'exemple de cet article décrit comment JS implémente la fonction d'encapsulation de l'ajout, de la suppression, de la modification et de la vérification des données sur la base du mode cas unique (Singleton) dans la conception modèle. Partagez-le avec tout le monde pour votre référence, comme suit :

Mode cas unique

La structure de base du mode cas unique contient uniquement celui appelé Une classe spéciale de singletons. Le modèle singleton peut garantir qu'une classe dans le système n'a qu'une seule instance

La définition originale du modèle singleton est apparue dans « Design Patterns » (Addison Wesley, 1994) : « Garantir qu'une classe n'a qu'une seule instance . Et fournissez un point d'accès global pour y accéder. "

Définition du modèle Singleton : "Une classe a une et une seule instance, et elle s'instancie pour la fournir à l'ensemble du système. ”

var Singleton = (function(){
 SingletonClass() {
 }
 var singleton = null;
 return {
  getInstance: function() {
   if (singleton == null) {
  singleton = new singletonClass();
   } else {
  return singleton;
   }
  }
 }
})();
Singleton.getIntance();

Le front-end utilise souvent certaines opérations asynchrones liées aux interfaces telles que l'ajout, la suppression, la modification et la requête. Prenons un exemple. Lorsque j'exploite une liste de données, j'ajoute souvent les fonctions de modification et de suppression. Certaines solutions utilisent le synchrone (actualiser la page), et l'expérience utilisateur est meilleure en utilisant l'asynchrone

Le code est le suivant

Ajouter des fonctions ;

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

Fonction de suppression

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

Les deux extraits de code ci-dessus décrivent brièvement le code JS pour ajouter et supprimer des fonctions. Certains étudiants ont découvert qu'ils ont quelque chose en commun, c'est-à-dire qu'une partie des requêtes ajax sont les mêmes, et que se passe-t-il si la fonction de suppression est également utilisée à d'autres endroits ? , alors vous devez écrire le même code à d’autres endroits. Je me sens très mal à l'aise

Améliorons-le

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

J'utilise souvent des instances Singleton pour créer certaines classes d'outils Tool

Avantages de l'utilisation de modèles de conception : découplage, lisibilité Fort ; , structure de code claire ;

Grâce au petit exemple ci-dessus, les données d'acquisition (fonction d'événement de clic) et les données d'opération (requête ajax) dans l'événement de clic sont séparées ;

Grâce à la commande L'optimisation code du mode exemple :

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

La méthode ajax dans SingleClass est également équivalente à un mode façade (Facade), cachant les détails internes et exposant une interface au monde extérieur

Believe ; ou non Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée de la portée et de la pré-analyse de js

Affichage dynamique du drop sélectionné données de la liste inférieure

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!