Le mode Singleton dans JS implémente l'ajout, la suppression, la modification et l'interrogation de données

Cet article présente principalement l'implémentation de JS basé sur le mode singleton (Singleton) dans le modèle de conception pour encapsuler la fonction d'ajout, de suppression, de modification et de vérification des données. Combiné avec l'exemple de formulaire, il analyse la corrélation basée sur javascript. sur le mode singleton et ajax pour ajouter, supprimer, modifier et vérifier la base de données Pour les compétences opérationnelles, les amis dans le besoin peuvent se référer à

Cet article décrit l'exemple de JS basé sur le modèle singleton (Singleton) dans le. modèle de conception pour encapsuler la fonction d’ajout, de suppression, de modification et de vérification des données. 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 fournir 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;
   }
  }
 }
})();

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Dans ES6, les composants enfants appellent les méthodes d'utilisation des composants parents

Comment créer des formulaires dynamiques en angulaire

Utilisez $http pour implémenter le téléchargement asynchrone de fichiers Excel dans angulairejs

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!