JavaScript单例模式实现数据增删改查封装教程

单例模式与数据操作背景

本文通过具体实例，讲解如何在JavaScript中运用设计模式里的单例模式（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://www.jb51.net/",
    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://www.jb51.net/",
    data: {id:"1"},
    success: function( result ){
    if ( result.status ) { alert("删除成功！") } else { alert("删除失败") }
  },
    error: function(){
    alert("新增出现异步，请得新增加或联系技术管理员");
  }
  });
});

上述两个代码片段简要展示了实现增加和删除功能的JavaScript代码。观察可知，两者在Ajax请求部分存在大量重复代码。若删除功能在其他场景复用，需重复编写相同逻辑，这种冗余代码结构令人感到不便。

接下来对代码进行改进。

基于单例模式的代码优化


var SingletonCRUD = (function(){
 SingletonClass() {}
 SingletonClass.prototype = {
   constructor: SingletonClass,
   add: function( data ) {
  $.ajax({
   type: "post"
     dataType:"json",
     url: "https://www.jb51.net/",
     data: data,
     success: function( result ){
    if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
   },
     error: function(){
    alert("新增出现异步，请得新增加或联系技术管理员");
   }
    });
   }，
  remove: function( data ) {
  $.ajax({
   type: "post"
     dataType:"json",
     url: "https://www.jb51.net/",
     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事件函数）与操作数据的异步请求逻辑相分离。

优化后的单例模式代码如下：

门面模式与最终封装


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://www.jb51.net/", data, function( result ){
    if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }
  });
   }，
  remove: function( data ) {
  this.ajax("https://www.jb51.net/", 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程序设计有所帮助。

JS单例模式封装数据增删改查接口

单例模式与数据操作背景

单例模式基础实现

原始增删功能代码分析

基于单例模式的代码优化

门面模式与最终封装

实用工具推荐