JS基于设计模式中的单例模式(Singleton)实现封装
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了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://.jb51./", data: {name:"csdn博客",dir:"web前端"}, suess: function( result ){ if ( result.status ) { alert("新增成功!") } else { alert("新增失败") } }, error: function(){ alert("新增出现异步,请得新增加或联系技术管理员"); } }); });
删除功能
$(".del").click(function(){ $.ajax({ type: "post" dataType:"json", url: "https://.jb51./", data: {id:"1"}, suess: 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://.jb51./", data: data, suess: function( result ){ if ( result.status ) { alert("新增成功!") } else { alert("新增失败") } }, error: function(){ alert("新增出现异步,请得新增加或联系技术管理员"); } }); }, remove: function( data ) { $.ajax({ type: "post" dataType:"json", url: "https://.jb51./", data: data, suess: 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 suess ){ $.ajax({ type: "post" dataType:"json", url: url, data: data, suess: suess, error: function(){ alert("新增出现异步,请得新增加或联系技术管理员"); } }); }, add: function( data ) { this.ajax("https://.jb51./", data, function( result ){ if ( result.status ) { alert("新增成功!") } else { alert("新增失败") } }); }, remove: function( data ) { this.ajax("https://.jb51./", 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程序设计有所帮助。
上一篇:js中的闭包学习心得
下一篇:Vue仿今日头条实例详解
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程