Based on Singleton in the design mode, JS implements the function of adding, deleting, modifying, and querying data by encapsulation. The design mode is singleton.

Based on Singleton in the design mode, JS implements the function of adding, deleting, modifying, and querying data by encapsulation. The design mode is singleton.

This article describes how to add, delete, modify, and query data by using the Singleton mode in the design mode of JS. We will share this with you for your reference. The details are as follows:

Singleton Mode

The core structure of the singleton mode only contains a special class called Singleton. The Singleton mode ensures that only one instance is available for one class in the system.

The initial definition of Singleton mode appears in design patterns (aisavisli, 1994): "ensure that a class has only one instance and provide a global access point to it ."

Singleton mode definition:"A class has only one instance and is self-instantiated to provide 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 frontend often uses some interface-related addition, deletion, modification, and query asynchronous operations. For example, I often add the modify/delete function when operating the data list. Some solutions use synchronous (refresh the page), and the user experience is better with asynchronous;

The Code is as follows:

Added features

$ (". Add "). click (function () {$. ajax ({type: "post" dataType: "json", url: "http://www.bkjia.com/", data: {name: "csdn blog", dir: "web Front-end "}, success: function (result) {if (result. status) {alert ("added successfully! ")} Else {alert (" failed to add ") }}, error: function () {alert (" added asynchronous, please add or contact the technical administrator ");}});});

Delete feature

$ (". Del "). click (function () {$. ajax ({type: "post" dataType: "json", url: "http://www.bkjia.com/", data: {id: "1"}, success: function (result) {if (result. status) {alert ("deleted successfully! ")} Else {alert (" failed to delete ") }}, error: function () {alert (" added asynchronous, please add or contact the technical administrator ");}});});

The above two code snippets briefly describe the JS Code for adding and deleting functions. Some people found that they have something in common, that is, some of the ajax requests are the same, and what if the delete function is used elsewhere ?, Write the same code elsewhere. Uncomfortable

Let's improve it.

Var SingletonCRUD = (function () {SingletonClass () {} SingletonClass. prototype = {constructor: SingletonClass, add: function (data) {$. ajax ({type: "post" dataType: "json", url: "http://www.bkjia.com/", data: data, success: function (result) {if (result. status) {alert ("added successfully! ")} Else {alert (" failed to add ") }}, error: function () {alert (" added asynchronous, please add or contact the technical administrator ") ;}}}, remove: function (data) {$. ajax ({type: "post" dataType: "json", url: "http://www.bkjia.com/", data: data, success: function (result) {if (result. status) {alert ("deleted successfully! ")} Else {alert (" failed to delete ") }}, error: function () {alert (" added asynchronous, please add or contact the technical administrator ") ;}}}}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 );});

The Singleton instance is often used as some Tool classes;

Advantages of the design mode: strong coupling, readability, and clear code structure;

In the preceding example, the acquired data (click Event function) in the click event is separated from the operation data (ajax request;

The code after the singleton mode is optimized:

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 ("added asynchronous, please add or contact the technical administrator ") ;}}, add: function (data) {this. ajax ("http://www.bkjia.com/", data, function (result) {if (result. status) {alert ("New Added successfully! ")} Else {alert (" failed to add ") }}, remove: function (data) {this. ajax ("http://www.bkjia.com/", data, function (result) {if (result. status) {alert ("deleted successfully! ")} Else {alert (" failed to delete ") }}) ;}var singleton = null; return {getInstance: function () {if (singleton = null) {singleton = new singletonClass () ;}else {return singleton ;}}}})();

The ajax method in SingleClass is also equivalent to a Facade, which hides internal details and exposes an interface;