這篇文章主要介紹了JS基於設計模式中的單例模式（Singleton）實現封裝對資料增刪改查功能.結合實例形式分析了javascript基於單例模式結合ajax針對資料庫進行增刪改查的相關操作技巧,需要的朋友可以參考下
本文實例講述了JS基於設計模式中的單例模式（Singleton）實現封裝對資料增刪改查功能。分享給大家供大家參考，具體如下：
單例模式
單例模式的核心結構中只包含一個稱為單例的特殊類。透過單例模式可以保證系統中一個類別只有一個實例
單例模式最初的定義出現於《設計模式》（艾迪生維斯理, 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.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: "http://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: "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請求)相分離;
透過對單例模式的優化後的程式碼：
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;
}
}
}
})();登入後複製
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
在ES6中子元件呼叫父元件使用方法
在angular中如何製作動態表單
在angularjs中使用$http實作非同步上傳Excel檔案方法#
以上是JS中的單例模式實作對資料增刪改查的詳細內容。更多資訊請關注PHP中文網其他相關文章！
