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学习随笔(使用window和frame)的技巧
Mar 08 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
基于input动态模糊查询的实现方法
Dec 12 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
javascript控制台详解
2015/06/25 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python交互式图形编程实例(二)
2017/11/17 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
师范生个人推荐信
2013/11/29 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
物业招聘计划书
2014/01/10 职场文书
运动会开幕式解说词
2014/02/05 职场文书
《月迹》教学反思
2014/02/19 职场文书
2014学年自我鉴定
2014/02/23 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
5道关于python基础 while循环练习题
2021/11/27 Python