JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改

本文实例讲述了JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能。分享给大家供大家参考，具体如下：

单例模式

单例模式的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例

单例模式最初的定义出现于《设计模式》（艾迪生维斯理, 1994）：“保证一个类仅有一个实例，并提供一个访问它的全局访问点。”

单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”

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

前端经常用到一些和接口相关的增删改查异步操作。我们来举例，我在操作数据列表时，常常少不了，增加 修改 删除功能。有的方案是用同步的（刷新页面），用户体验好一些用异步；

代码如下

增加功能

$(".add").click(function(){  $.ajax({  type: "post"    dataType:"json",    url: "//www.Vevb.com/",    data: {name:"csdn博客",dir:"web前端"},    success: function( result ){    if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }  },    error: function(){    alert("新增出现异步，请得新增加或联系技术管理员");  }  });});

删除功能

$(".del").click(function(){  $.ajax({  type: "post"    dataType:"json",    url: "//www.Vevb.com/",    data: {id:"1"},    success: function( result ){    if ( result.status ) { alert("删除成功！") } else { alert("删除失败") }  },    error: function(){    alert("新增出现异步，请得新增加或联系技术管理员");  }  });});

上面这二个代码片段简单描述了，增加和删除功能的JS代码。有的同学发现了，他们有共同点，就是ajax请求中有一部分是相同的，并且删除功能如果在其它地方也用到呢？，那在其它地方也要写一代码这种相同的代码。感觉很不舒服

我们改进一下

var SingletonCRUD = (function(){ SingletonClass() {} SingletonClass.prototype = {   constructor: SingletonClass,   add: function( data ) {  $.ajax({   type: "post"     dataType:"json",     url: "//www.Vevb.com/",     data: data,     success: function( result ){    if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }   },     error: function(){    alert("新增出现异步，请得新增加或联系技术管理员");   }    });   }，  remove: function( data ) {  $.ajax({   type: "post"     dataType:"json",     url: "//www.Vevb.com/",     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 );});