【JS 設計模式 】用單例模式(Singleton)來封裝對資料的增刪除改查
阿新 • • 發佈:2019-02-01
單例模式
單例模式的核心結構中只包含一個被稱為單例的特殊類。通過單例模式可以保證系統中一個類只有一個例項
單例模式最初的定義出現於《設計模式》(艾迪生維斯理, 1994):“保證一個類僅有一個例項,並提供一個訪問它的全域性訪問點。”
單例模式定義:“一個類有且僅有一個例項,並且自行例項化向整個系統提供。”
前端經常用到一些和介面相關的增刪改查非同步操作。我們來舉例,我在操作資料列表時,常常少不了,增加 修改 刪除功能。有的方案是用同步的(重新整理頁面),使用者體驗好一些用非同步;
程式碼如下
增加功能
刪除功能
上面這二個程式碼片段簡單描述了,增加和刪除功能的JS程式碼。有的同學發現了,他們有共同點,就是ajax請求中有一部分是相同的,並且刪除功能如果在其它地方也用到呢?,那在其它地方也要寫一程式碼這種相同的程式碼。感覺很不舒服
我們改進一下
單例模式的核心結構中只包含一個被稱為單例的特殊類。通過單例模式可以保證系統中一個類只有一個例項
單例模式最初的定義出現於《設計模式》(艾迪生維斯理, 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.csdn.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.csdn.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.csdn.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.csdn.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.csdn.net/", data, function( result ){
if ( result.status ) { alert("新增成功!") } else { alert("新增失敗") }
});
},
remove: function( data ) {
this.ajax("http://www.csdn.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),隱藏內部細節,對外暴露一個介面;