本文实例讲述了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),隐藏内部细节,对外暴露一个接口;

更多关于javascript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。


您可能感兴趣的文章:JavaScript设计模式经典之命令模式深入理解JavaScript系列(34):设计模式之命令模式详解JS设计模式之观察者模式实现实时改变页面中金额数的方法JS设计模式之状态模式概念与用法分析JS设计模式之策略模式概念与用法分析JS设计模式之访问者模式定义与用法分析JavaScript设计模式之调停者模式实例详解JS设计模式之责任链模式实例详解JavaScript编程设计模式之构造器模式实例分析JavaScript 设计模式 安全沙箱模式JS设计模式之命令模式概念与用法分析

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: function,data,alert,模式,JavaScript,result,singleton,ajax,var,单例,else,success,url
分页:12
转载请注明
本文标题:JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
本站链接:http://www.codesec.net/view/572498.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(19)