JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
作者:itpinpai 时间:2024-04-29 14:08:48
本文实例讲述了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.aspxhome.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.aspxhome.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: "https://www.aspxhome.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.aspxhome.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 );
});
经常用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.aspxhome.com/", data, function( result ){
if ( result.status ) { alert("新增成功!") } else { alert("新增失败") }
});
},
remove: function( data ) {
this.ajax("https://www.aspxhome.com/", 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程序设计有所帮助。
来源:http://blog.csdn.net/itpinpai/article/details/51355342
标签:JS,设计模式,单例模式,Singleton
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
用Python画圣诞树代码示例
2023-06-14 06:22:27
![](https://img.aspxhome.com/file/2023/2/95552_0s.png)
sql 多表连接查询
2024-01-20 15:28:30
![](https://img.aspxhome.com/file/2023/1/91171_0s.jpg)
Python第三方库的几种安装方式(小结)
2021-11-01 19:34:09
position:relative/absolute无法冲破的等级
2007-05-11 17:03:00
深入学习Python中的上下文管理器与else块
2023-05-11 08:57:53
Python教程按照字典的键或值进行排序方法解析
2023-01-12 09:10:26
mysql 基础教程之库与表的详解
2024-01-19 13:14:38
PyCharm的设置方法和第一个Python程序的建立
2023-09-03 19:12:57
![](https://img.aspxhome.com/file/2023/6/118026_0s.jpg)
windows下Python实现将pdf文件转化为png格式图片的方法
2022-03-22 08:55:51
Go语言从单体服务到微服务设计方案详解
2023-09-02 02:45:57
![](https://img.aspxhome.com/file/2023/8/92038_0s.jpg)
Next.js应用转换为TypeScript方法demo
2024-05-11 09:36:17
![](https://img.aspxhome.com/file/2023/2/125952_0s.png)
使用Python实现正态分布、正态分布采样
2023-10-28 06:25:01
![](https://img.aspxhome.com/file/2023/7/134827_0s.jpg)
ASP中双引号单引号和&连接符使用技巧
2007-10-01 18:20:00
SQL Server CROSS APPLY和OUTER APPLY的应用详解
2024-01-21 02:27:21
解决vue watch数据的方法被调用了两次的问题
2024-05-05 09:10:33
在TensorFlow中实现矩阵维度扩展
2021-09-21 17:50:15
Python使用python-docx读写word文档
2023-12-27 06:27:30
![](https://img.aspxhome.com/file/2023/4/124924_0s.jpg)
Python编程产生非均匀随机数的几种方法代码分享
2023-02-10 02:00:19
![](https://img.aspxhome.com/file/2023/7/67417_0s.png)
Python调用adb命令实现对多台设备同时进行reboot的方法
2022-08-06 02:40:45
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2024-04-16 08:55:16
![](https://img.aspxhome.com/file/2023/0/136820_0s.jpg)