JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能。分享给大家供大家参考，具体如下：
单例模式
单例模式的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例
单例模式最初的定义出现于《设计模式》（艾迪生维斯理,1994）：“保证一个类仅有一个实例，并提供一个访问它的全局访问点。”
单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”
{
SingletonClass()
{
}
var singleton = null;
return
{
ge
Tinstance: function()
{
if (singleton == null)
{
singleton = new singletonClass(
);
} else
{
return singleton;
}
}
}
})(
);
Singleton.ge
Tintance(
);
前端经常用到一些和接口相关的增删改查异步操作。我们来举例，我在操作数据列表时，常常少不了，增加 修改 删除功能。有的方案是用同步的（刷新页面），用户体验好一些用异步；
代码如下
增加功能
{
$.ajax(
{
type: "post"
dataType:"json",url: "//cn.js-code.com/",data:
{name:"csdn博客",dir:"web前端"},
success: function( result )
{
if ( result.status )
{ alert("新增成功！") } else
{ alert("新增失败") }
},error: function()
{
alert("新增出现异步，请得新增加或联系技术管理员"
);
}
}
);
}
);
删除功能
{
$.ajax(
{
type: "post"
dataType:"json",data:
{id:"1"},
success: function( result )
{
if ( result.status )
{ alert("删除成功！") } else
{ alert("删除失败") }
},error: function()
{
alert("新增出现异步，请得新增加或联系技术管理员"
);
}
}
);
}
);
上面这二个代码片段简单描述了，增加和删除功能的JS代码。有的同学发现了，他们有共同点，就是ajax请求中有一部分是相同的，并且删除功能如果在其它地方也用到呢？，那在其它地方也要写一代码这种相同的代码。感觉很不舒服
我们改进一下
{
SingletonClass()
{}
SingletonClas
s.prototype =
{
constructor: SingletonClass,add: function( dat
a ) {
$.ajax(
{
type: "post"
dataType:"json",data: data,
success: function( result )
{
if ( result.status )
{ alert("新增成功！") } else
{ alert("新增失败") }
},error: function()
{
alert("新增出现异步，请得新增加或联系技术管理员"
);
}
}
);
}，
remove: function( dat
a ) {
$.ajax(
{
type: "post"
dataType:"json",
success: function( result )
{
if ( result.status )
{ alert("删除成功！") } else
{ alert("删除失败") }
},error: function()
{
alert("新增出现异步，请得新增加或联系技术管理员"
);
}
}
);
}
}
var singleton = null;
return
{
ge
Tinstance: function()
{
if (singleton == null)
{
singleton = new singletonClass(
);
} else
{
return singleton;
}
}
}
})(
);
var curd = SingletonCRUD.ge
Tintance(
);
$(".add").click(function()
{
var data =
{"name":"name"};
curd.add( dat
a );
}
);
$(".del").click(function()
{
var data =
{"id": 1};
curd.remove( dat
a );
}
);
经常用Singleton实例来做一些Tool工具类；
使用设计模式优点：解耦合、可读性强、代码结构清晰；
通过上面的小例子，把点击事件里的获取数据（click的事件函数）和操作数据(ajax请求)相分离;
通过对单例模式的优化后的代码：
{
SingletonClass()
{}
SingletonClas
s.prototype =
{
constructor: SingletonClass,ajax: function(url,data
success )
{
$.ajax(
{
type: "post"
dataType:"json",url: url,
success:
success,error: function()
{
alert("新增出现异步，请得新增加或联系技术管理员"
);
}
}
);
},add: function( dat
a ) {
thi
s.ajax("//cn.js-code.com/",data,function( result )
{
if ( result.status )
{ alert("新增成功！") } else
{ alert("新增失败") }
}
);
}，
remove: function( dat
a ) {
thi
s.ajax("//cn.js-code.com/",function( result )
{
if ( result.status )
{ alert("删除成功！") } else
{ alert("删除失败") }
}
);
}
}
var singleton = null;
return
{
ge
Tinstance: function()
{
if (singleton == null)
{
singleton = new singletonClass(
);
} else
{
return singleton;
}
}
}
})(
);
SingleClass中的ajax方法，也相当于一个门面模式（Facade），隐藏内部细节，对外暴露一个接口；
更多关于JavaScript相关内容可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
大佬总结
以上是大佬教程为你收集整理的JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能全部内容，希望文章能够帮你解决JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
