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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
Element-UI+Vue模式使用总结
Jan 02 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php文件缓存类汇总
2014/11/21 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
Sea.JS知识总结
2016/05/05 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
Vue Router的手写实现方法实现
2020/03/02 Javascript
Python 开发Activex组件方法
2009/11/08 Python
为python设置socket代理的方法
2015/01/14 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Django框架实现的分页demo示例
2019/05/25 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
降低python版本的操作方法
2020/09/11 Python
python中二分查找法的实现方法
2020/12/06 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
24岁生日感言
2014/01/13 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
实施意见格式范本
2015/06/05 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书