JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能
更新时间：2018年02月06日 08:47:02 作者：itpinpai
这篇文章主要介绍了JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能.结合实例形式分析了javascript基于单例模式结合ajax针对数据库进行增删改查的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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: "https://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: "https://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: "https://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: "https://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("https://www.jb51.net/", data, function( result ){
if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
});
}，
remove: function( data ) {
this.ajax("https://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），隐藏内部细节，对外暴露一个接口；
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了微信小程序使用audio组件播放音乐功能,结合实例形式分析了微信小程序audio组件播放在线音乐相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了Webpack 是如何加载模块的，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家详细介绍了ionic隐藏tabs的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了JavaScript实现简洁的俄罗斯方块,以完整实例形式分析了JavaScript实现俄罗斯方块游戏的具体技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下2016-03-03
JavaScript数据结构yocto queue队列链表代码分析
这篇文章主要为大家介绍了JavaScript数据结构yocto queue队列链表代码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家详细介绍了小程序实现悬浮搜索框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
公司原先的JS和CSS文件都是用在线压缩程序压缩的，看似方便，但很容易出错，可能是压缩程序把CSS里面的一些Hack语句给混淆了，于是我决定用大名鼎鼎的YUI compressor。2011-01-01
这篇文章介绍了echarts实现饼图与样式设置的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
下面小编就为大家带来一篇js操作浏览器的参数方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要介绍了详解JS模块导入导出以及相关问题解决方法，需要的朋友学习参考下吧。2017-12-12
最新评论