本文实例讲述了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: http://www.jb51.net/, 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: http://www.jb51.net/, 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: 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 ); });
经常用singleton实例来做一些tool工具类；
使用设计模式优点：解耦合、可读性强、代码结构清晰；
通过上面的小例子，把点击事件里的获取数据（click的事件函数）和操作数据(ajax请求)相分离;
通过对单例模式的优化后的代码：
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; } } } })();
singleclass中的ajax方法，也相当于一个门面模式（facade），隐藏内部细节，对外暴露一个接口；
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js的作用域与预解析使用详解
动态显示select下拉列表数据
以上就是singleton封装增删改查的详细内容。