首頁  >  文章  >  web前端  >  JS中的單例模式實作對資料增刪改查

JS中的單例模式實作對資料增刪改查

亚连
亚连原創
2018-06-07 15:31:281931瀏覽

這篇文章主要介紹了JS基於設計模式中的單例模式(Singleton)實現封裝對資料增刪改查功能.結合實例形式分析了javascript基於單例模式結合ajax針對資料庫進行增刪改查的相關操作技巧,需要的朋友可以參考下

本文實例講述了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: "http://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: "http://www.jb51.net/",
    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: "http://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: "http://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的事件函數)和操作資料(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("http://www.jb51.net/", data, function( result ){
    if ( result.status ) { alert("新增成功!") } else { alert("新增失败") }
  });
   },
  remove: function( data ) {
  this.ajax("http://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;
   }
  }
 }
})();

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在ES6中子元件呼叫父元件使用方法

在angular中如何製作動態表單

在angularjs中使用$http實作非同步上傳Excel檔案方法#

以上是JS中的單例模式實作對資料增刪改查的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn