Singleton封裝增刪改查

來源：懂視網責編：小采時間：2020-11-27 19:58:30

Singleton封裝增刪改查

Singleton封裝增刪改查:這次給大家帶來Singleton封裝增刪改查，Singleton封裝增刪改查的注意事項有哪些，下面就是實戰案例，一起來看一下。本文實例講述了JS基于設計模式中的單例模式（Singleton）實現封裝對數據增刪改查功能。分享給大家供大家參考，具體如下：單例模式單例模式的

推薦度：

點擊下載本文 文檔為doc格式

導讀Singleton封裝增刪改查:這次給大家帶來Singleton封裝增刪改查，Singleton封裝增刪改查的注意事項有哪些，下面就是實戰案例，一起來看一下。本文實例講述了JS基于設計模式中的單例模式（Singleton）實現封裝對數據增刪改查功能。分享給大家供大家參考，具體如下：單例模式單例模式的

這次給大家帶來Singleton封裝增刪改查，Singleton封裝增刪改查的注意事項有哪些，下面就是實戰案例，一起來看一下。

本文實例講述了JS基于設計模式中的單例模式（Singleton）實現封裝對數據增刪改查功能。分享給大家供大家參考，具體如下：

單例模式

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

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

單例模式定義：“一個類有且僅有一個實例，并且自行實例化向整個系統提供?！?/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: "http://www.gxlcms.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: "http://www.gxlcms.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: "http://www.gxlcms.com/",
 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.gxlcms.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("http://www.gxlcms.com/", data, function( result ){
 if ( result.status ) { alert("新增成功！") } else { alert("新增失敗") }
 });
 }，
 remove: function( data ) {
 this.ajax("http://www.gxlcms.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），隱藏內部細節，對外暴露一個接口；

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

Singleton封裝增刪改查

推薦度：

點擊下載本文 文檔為doc格式

標簽：查詢封裝增刪改查

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

Singleton封裝增刪改查

Singleton封裝增刪改查

Singleton封裝增刪改查

最新推薦

猜你喜歡

熱門推薦