這次帶給大家Singleton封裝增刪改查,Singleton封裝增刪改查的注意事項有哪些,下面就是實戰案例,一起來看一下。
本文實例講述了JS基於設計模式中的單例模式(Singleton)實現封裝對資料增刪改查功能。分享給大家供大家參考,具體如下:
單例模式
單例模式的核心結構中只包含一個稱為單例的特殊類。透過單例模式可以保證系統中一個類別只有一個實例
單例模式最初的定義出現於《設計模式》(艾迪生維斯理, 1994):「保證一個類別只有一個實例,並提供一個存取它的全域存取點。
”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var Singleton = ( function (){
SingletonClass() {
}
var singleton = null;
return {
getInstance: function () {
if (singleton == null) {
singleton = new singletonClass();
} else {
return singleton;
}
}
}
})();
Singleton.getIntance();
|
登入後複製
前端常用到一些和介面相關的增刪改查非同步操作。我們來舉例,我在操作資料清單時,常常少不了,增加 修改 刪除功能。有的方案是用同步的(刷新頁面),使用者體驗好一些用非同步;程式碼如下
##增加功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $( ".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( "新增出现异步,请得新增加或联系技术管理员" );
}
});
});
|
登入後複製
刪除功能1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $( ".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請求中有一部分是相同的,並且刪除功能如果在其它地方也用到呢? ,那在其它地方也要寫一程式碼這種相同的程式碼。感覺很不舒服
我們改進一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 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請求)相分離;
透過對單例模式的最佳化後的程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 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;
}
}
}
})();
|
登入後複製
SingleClass中的ajax方法,也相當於一個門面模式(Facade),隱藏內部細節,對外暴露一個介面;
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
js的作用域與預解析使用詳解
#動態顯示select下拉清單資料
以上是Singleton封裝增刪改查的詳細內容。更多資訊請關注PHP中文網其他相關文章!