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


Posted in Javascript onFebruary 06, 2018

本文实例讲述了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://3water.com/",
    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://3water.com/",
    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://3water.com/",
     data: data,
     success: function( result ){
    if ( result.status ) { alert("新增成功!") } else { alert("新增失败") }
   },
     error: function(){
    alert("新增出现异步,请得新增加或联系技术管理员");
   }
    });
   },
  remove: function( data ) {
  $.ajax({
   type: "post"
     dataType:"json",
     url: "https://3water.com/",
     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://3water.com/", data, function( result ){
    if ( result.status ) { alert("新增成功!") } else { alert("新增失败") }
  });
   },
  remove: function( data ) {
  this.ajax("https://3water.com/", 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 相关文章推荐
jquery插件validate验证的小例子
May 08 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
AngularJS执行流程详解
Feb 17 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
Vue仿今日头条实例详解
Feb 06 #Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 #Javascript
详解React开发必不可少的eslint配置
Feb 05 #Javascript
详解js的作用域、预解析机制
Feb 05 #Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 #Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
详解vue静态资源打包中的坑与解决方案
Feb 05 #Javascript
You might like
mysql5详细安装教程
2007/01/15 PHP
php中session退出登陆问题
2014/02/27 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
PDO::prepare讲解
2019/01/29 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python实现整数的二进制循环移位
2019/03/08 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
什么是python的id函数
2020/06/11 Python
python中sys模块是做什么用的
2020/08/16 Python
详解Django中异步任务之django-celery
2020/11/05 Python
2014年圣诞节促销方案
2014/03/14 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
python学习之panda数据分析核心支持库
2021/05/07 Python
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server