脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS单例模式（Singleton）实现封装对数据增删改查

JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能

 更新时间：2018年02月06日 08:47:02   作者：itpinpai  
这篇文章主要介绍了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://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: "https://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: "https://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: "https://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("https://www.jb51.net/", data, function( result ){
    if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
  });
   }，
  remove: function( data ) {
  this.ajax("https://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产生随机数的用法小结

    这篇文章主要介绍了javaScript产生随机数的用法小结,包括JavaScript Math.random()内置函数 ，Js 随机数产生6位数字的代码，需要的朋友可以参考下
    2018-04-04
  • 基于JS实现右侧缓慢弹窗动态效果

    基于JS实现右侧缓慢弹窗动态效果

    在现代Web开发中,动态交互效果是提升用户体验的重要手段之一,其中,从页面右侧缓慢滑出的弹窗效果因其不遮挡主要内容、易于用户操作而备受欢迎,本文将详细介绍如何使用JavaScript结合CSS3动画实现这一效果,并探讨其在实际项目中的应用,需要的朋友可以参考下
    2025-02-02
  • JavaScript读取本地文件常用方法流程解析

    JavaScript读取本地文件常用方法流程解析

    这篇文章主要介绍了JavaScript读取本地文件常用方法流程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • JavaScript实现在标题栏上显示当前日期的方法

    JavaScript实现在标题栏上显示当前日期的方法

    这篇文章主要介绍了JavaScript实现在标题栏上显示当前日期的方法,涉及javascript操作时间及DOM节点的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • JS实现的小火箭发射动画效果示例

    JS实现的小火箭发射动画效果示例

    这篇文章主要介绍了JS实现的小火箭发射动画效果,涉及javascript基于时间函数的页面元素属性动态变换实现运动效果相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • js读取本地excel文档数据的代码

    js读取本地excel文档数据的代码

    下面的代码在需要设置IE安全级别低才能正常运行，贴出来主要是可以学习这方面的技术的朋友参考下。
    2010-11-11
  • JavaScript数组对象实现增加一个返回随机元素的方法

    JavaScript数组对象实现增加一个返回随机元素的方法

    这篇文章主要介绍了JavaScript数组对象实现增加一个返回随机元素的方法,涉及javascript针对数组及随机数的相关操作技巧,需要的朋友可以参考下
    2015-07-07
  • 让浏览器非阻塞加载javascript的几种方法小结

    让浏览器非阻塞加载javascript的几种方法小结

    通常大多数浏览器是并行下载资源的，但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构、脚本之间的存在依赖关系、使用document.write 向页面输出HTML等。
    2011-04-04
  • JavaScript中Null与Undefined的区别解析

    JavaScript中Null与Undefined的区别解析

    这篇文章主要介绍了JavaScript中Null与Undefined的区别解析,本文给出了多个代码实例讲解它们之间的区别,需要的朋友可以参考下
    2015-06-06
  • JavaScript中对于SPA单页面的理解

    JavaScript中对于SPA单页面的理解

    这篇文章主要介绍了JavaScript中对于SPA单页面的理解，单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互
    2023-02-02

最新评论