本文实例讲述了JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能。分享给大家供大家参考,具体如下:
单例模式
单例模式的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例
单例模式最初的定义出现于《设计模式》(艾迪生维斯理,1994):“保证一个类仅有一个实例,并提供一个访问它的全局访问点。”
单例模式定义:“一个类有且仅有一个实例,并且自行实例化向整个系统提供。”
前端经常用到一些和接口相关的增删改查异步操作。我们来举例,我在操作数据列表时,常常少不了,增加 修改 删除功能。有的方案是用同步的(刷新页面),用户体验好一些用异步;
代码如下
博客",dir:"web前端"},success: function( result ){
if ( result.status ) { alert("新增成功!") } else { alert("新增失败") }
},error: function(){
alert("新增出现异步,请得新增加或联系技术管理员");
}
});
});
上面这二个代码片段简单描述了,增加和删除功能的JS代码。有的同学发现了,他们有共同点,就是ajax请求中有一部分是相同的,并且删除功能如果在其它地方也用到呢?,那在其它地方也要写一代码这种相同的代码。感觉很不舒服
我们改进一下
增加或联系技术管理员");
}
});
},
remove: function( data ) {
$.ajax({
type: "post"
dataType:"json",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请求)相分离;
通过对单例模式的优化后的代码:
增加或联系技术管理员");
}
});
},add: function( data ) {
this.ajax("//www.jb51.cc/",data,function( result ){
if ( result.status ) { alert("新增成功!") } else { alert("新增失败") }
});
},
remove: function( data ) {
this.ajax("//www.jb51.cc/",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程序设计有所帮助。