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 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python 列表的清空方式
2020/01/13 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
婚内房产协议书范本
2014/10/02 职场文书
校园运动会广播稿
2014/10/06 职场文书
健康状况证明书
2014/11/26 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
欢迎新生标语2015
2015/07/16 职场文书