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 键盘事件的几个基本方法
Oct 30 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
Three.js学习之几何形状
Aug 01 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 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
PHP 身份证号验证函数
2009/05/07 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
自主招生自荐信格式
2013/12/03 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
委托公证书格式
2015/01/26 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫