Singleton mode in JS implements addition, deletion, modification and query of data

This article mainly introduces the implementation of JS based on the singleton mode (Singleton) in the design pattern to encapsulate the function of adding, deleting, modifying and checking data. Combined with the example form, it analyzes the correlation of javascript based on the singleton mode and ajax for adding, deleting, modifying and checking the database. For operational skills, friends in need can refer to

This article describes the example of JS based on the singleton pattern (Singleton) in the design pattern to encapsulate the function of adding, deleting, modifying and checking data. Share it with everyone for your reference, the details are as follows:

Single-case mode

The core structure of the single-case mode only contains one called A special class of singletons. The singleton pattern can ensure that a class in the system has only one instance.

The original definition of the singleton pattern appeared in "Design Patterns" (Addison Wesley, 1994): "Guarantee that a class has only one instance. And provide a global access point to access it."

Singleton pattern definition: "A class has one and only one instance, and it instantiates itself to provide it to the entire system. ”

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

The front end often uses some asynchronous operations related to interfaces such as addition, deletion, modification and query. Let's take an example. When I operate a data list, I often add the modify and delete functions. Some solutions use synchronous (refresh the page), and the user experience is better using asynchronous;

The code is as follows

Add function

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

Delete function

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

The above two code snippets briefly describe the JS code for adding and deleting functions. Some students discovered that they have something in common, that is, part of the ajax requests are the same, and what if the delete function is also used in other places? , then you need to write the same code in other places. I feel very uncomfortable

Let’s improve it

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

I often use Singleton instances to make some Tool tool classes;

The advantages of using design patterns: decoupling, strong readability, The code structure is clear;

Through the above small example, the acquisition data (click event function) and operation data (ajax request) in the click event are separated;

Through the singleton mode The optimized 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;
   }
  }
 }
})();

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use a child component to call a parent component in ES6

How to make a dynamic form in angular

Use $http to implement asynchronous uploading of Excel files in angularjs

The above is the detailed content of Singleton mode in JS implements addition, deletion, modification and query of data. For more information, please follow other related articles on the PHP Chinese website!