这次给大家带来Singleton封装增删改查，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: "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封装增删改查的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2779550.html
