JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能
本文实例讲述了JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能。分享给大家供大家参考，具体如下：
单例模式
单例模式的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例
单例模式最初的定义出现于《设计模式》（艾迪生维斯理,1994）：“保证一个类仅有一个实例，并提供一个访问它的全局访问点。”
单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”
varSingleton=(function(){
SingletonClass(){
}
varsingleton=null;
return{
getInstance:function(){
if(singleton==null){
singleton=newsingletonClass();
}else{
returnsingleton;
}
}
}
})();
Singleton.getIntance();
前端经常用到一些和接口相关的增删改查异步操作。我们来举例，我在操作数据列表时，常常少不了，增加修改删除功能。有的方案是用同步的（刷新页面），用户体验好一些用异步；
代码如下
增加功能
$(".add").click(function(){
$.ajax({
type:"post"
dataType:"json",
url:"https://www.nhooo.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:"https://www.nhooo.com/",
data:{id:"1"},
success:function(result){
if(result.status){alert("删除成功！")}else{alert("删除失败")}
},
error:function(){
alert("新增出现异步，请得新增加或联系技术管理员");
}
});
});
上面这二个代码片段简单描述了，增加和删除功能的JS代码。有的同学发现了，他们有共同点，就是ajax请求中有一部分是相同的，并且删除功能如果在其它地方也用到呢？，那在其它地方也要写一代码这种相同的代码。感觉很不舒服
我们改进一下
varSingletonCRUD=(function(){
SingletonClass(){}
SingletonClass.prototype={
constructor:SingletonClass,
add:function(data){
$.ajax({
type:"post"
dataType:"json",
url:"https://www.nhooo.com/",
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.nhooo.com/",
data:data,
success:function(result){
if(result.status){alert("删除成功！")}else{alert("删除失败")}
},
error:function(){
alert("新增出现异步，请得新增加或联系技术管理员");
}
});
}
}
varsingleton=null;
return{
getInstance:function(){
if(singleton==null){
singleton=newsingletonClass();
}else{
returnsingleton;
}
}
}
})();
varcurd=SingletonCRUD.getIntance();
$(".add").click(function(){
vardata={"name":"name"};
curd.add(data);
});
$(".del").click(function(){
vardata={"id":1};
curd.remove(data);
});
经常用Singleton实例来做一些Tool工具类；
使用设计模式优点：解耦合、可读性强、代码结构清晰；
通过上面的小例子，把点击事件里的获取数据（click的事件函数）和操作数据(ajax请求)相分离;
通过对单例模式的优化后的代码：
varSingletonCRUD=(function(){
SingletonClass(){}
SingletonClass.prototype={
constructor:SingletonClass,
ajax:function(url,datasuccess){
$.ajax({
type:"post"
dataType:"json",
url:url,
data:data,
success:success,
error:function(){
alert("新增出现异步，请得新增加或联系技术管理员");
}
});
},
add:function(data){
this.ajax("https://www.nhooo.com/",data,function(result){
if(result.status){alert("新增成功！")}else{alert("新增失败")}
});
}，
remove:function(data){
this.ajax("https://www.nhooo.com/",data,function(result){
if(result.status){alert("删除成功！")}else{alert("删除失败")}
});
}
}
varsingleton=null;
return{
getInstance:function(){
if(singleton==null){
singleton=newsingletonClass();
}else{
returnsingleton;
}
}
}
})();
SingleClass中的ajax方法，也相当于一个门面模式（Facade），隐藏内部细节，对外暴露一个接口；
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。