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 Event学习第八章 事件的顺序
Feb 07 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
js实现登录与注册界面
Nov 01 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
原生JS实现多条件筛选
Aug 19 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
javascript 短路法代码精简
2009/08/20 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
Node.js模块加载详解
2014/08/16 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Python zip()函数用法实例分析
2018/03/17 Python
python实现俄罗斯方块游戏
2020/03/25 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
类如何去实现接口
2013/12/19 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
信息管理专业自荐书
2014/06/05 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题