這篇文章給大家分享的是有關JS基于設計模式中單例模式實現封裝對數據增刪改查功能的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創新互聯是專業的齊齊哈爾網站建設公司，齊齊哈爾接單;提供網站設計、網站制作,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行齊齊哈爾網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

單例模式

單例模式的核心結構中只包含一個被稱為單例的特殊類。通過單例模式可以保證系統中一個類只有一個實例

單例模式最初的定義出現于《設計模式》（艾迪生維斯理, 1994）：“保證一個類僅有一個實例，并提供一個訪問它的全局訪問點?！?/p>

單例模式定義：“一個類有且僅有一個實例，并且自行實例化向整個系統提供。”

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("新增出現異步，請得新增加或聯系技術管理員");
  }
  });
});

上面這二個代碼片段簡單描述了，增加和刪除功能的JS代碼。有的同學發現了，他們有共同點，就是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的事件函數）和操作數據(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://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;
   }
  }
 }
})();

感謝各位的閱讀！關于“JS基于設計模式中單例模式實現封裝對數據增刪改查功能的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞標題：JS基于設計模式中單例模式實現封裝對數據增刪改查功能的示例分析
本文網址：http://vcdvsql.cn/article24/gjgeje.html

成都網站建設公司_創新互聯，為您提供網站維護、網站排名、App開發、品牌網站建設、品牌網站制作、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯