JS基于設(shè)計(jì)模式中單例模式實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能的示例分析

這篇文章給大家分享的是有關(guān)JS基于設(shè)計(jì)模式中單例模式實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)是專業(yè)的齊齊哈爾網(wǎng)站建設(shè)公司，齊齊哈爾接單;提供網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行齊齊哈爾網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

單例模式

單例模式的核心結(jié)構(gòu)中只包含一個(gè)被稱為單例的特殊類。通過(guò)單例模式可以保證系統(tǒng)中一個(gè)類只有一個(gè)實(shí)例

單例模式最初的定義出現(xiàn)于《設(shè)計(jì)模式》（艾迪生維斯理, 1994）：“保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。”

單例模式定義：“一個(gè)類有且僅有一個(gè)實(shí)例，并且自行實(shí)例化向整個(gè)系統(tǒng)提供。”

var Singleton = (function(){
 SingletonClass() {
 }
 var singleton = null;
 return {
  getInstance: function() {
   if (singleton == null) {
  singleton = new singletonClass();
   } else {
  return singleton;
   }
  }
 }
})();
Singleton.getIntance();

前端經(jīng)常用到一些和接口相關(guān)的增刪改查異步操作。我們來(lái)舉例，我在操作數(shù)據(jù)列表時(shí)，常常少不了，增加修改刪除功能。有的方案是用同步的（刷新頁(yè)面），用戶體驗(yàn)好一些用異步；

代碼如下

增加功能

$(".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("新增出現(xiàn)異步，請(qǐng)得新增加或聯(lián)系技術(shù)管理員");
  }
  });
});

刪除功能

$(".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("新增出現(xiàn)異步，請(qǐng)得新增加或聯(lián)系技術(shù)管理員");
  }
  });
});

上面這二個(gè)代碼片段簡(jiǎn)單描述了，增加和刪除功能的JS代碼。有的同學(xué)發(fā)現(xiàn)了，他們有共同點(diǎn)，就是ajax請(qǐng)求中有一部分是相同的，并且刪除功能如果在其它地方也用到呢？，那在其它地方也要寫一代碼這種相同的代碼。感覺(jué)很不舒服

我們改進(jìn)一下

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("新增出現(xiàn)異步，請(qǐng)得新增加或聯(lián)系技術(shù)管理員");
   }
    });
   }，
  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("新增出現(xiàn)異步，請(qǐng)得新增加或聯(lián)系技術(shù)管理員");
   }
    });
   }
 }
 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 );
});

經(jīng)常用Singleton實(shí)例來(lái)做一些Tool工具類；

使用設(shè)計(jì)模式優(yōu)點(diǎn)：解耦合、可讀性強(qiáng)、代碼結(jié)構(gòu)清晰；

通過(guò)上面的小例子，把點(diǎn)擊事件里的獲取數(shù)據(jù)（click的事件函數(shù)）和操作數(shù)據(jù)(ajax請(qǐng)求)相分離;

通過(guò)對(duì)單例模式的優(yōu)化后的代碼：

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("新增出現(xiàn)異步，請(qǐng)得新增加或聯(lián)系技術(shù)管理員");
   }
    });
   },
   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;
   }
  }
 }
})();

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

新聞標(biāo)題：JS基于設(shè)計(jì)模式中單例模式實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能的示例分析
本文網(wǎng)址：http://muchs.cn/article24/gjgeje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站排名、App開發(fā)、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容