JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能
本文實(shí)例講述了JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能。分享給大家供大家參考,具體如下:
單例模式
單例模式的核心結(jié)構(gòu)中只包含一個(gè)被稱為單例的特殊類。通過單例模式可以保證系統(tǒng)中一個(gè)類只有一個(gè)實(shí)例
單例模式最初的定義出現(xiàn)于《設(shè)計(jì)模式》(艾迪生維斯理, 1994):“保證一個(gè)類僅有一個(gè)實(shí)例,并提供一個(gè)訪問它的全局訪問點(diǎn)?!?/p>
單例模式定義:“一個(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)的增刪改查異步操作。我們來舉例,我在操作數(shù)據(jù)列表時(shí),常常少不了,增加 修改 刪除功能。有的方案是用同步的(刷新頁面),用戶體驗(yàn)好一些用異步;
代碼如下
增加功能
$(".add").click(function(){
$.ajax({
type: "post"
dataType:"json",
url: "http://www.dhdzp.com/",
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: "http://www.dhdzp.com/",
data: {id:"1"},
success: function( result ){
if ( result.status ) { alert("刪除成功!") } else { alert("刪除失敗") }
},
error: function(){
alert("新增出現(xiàn)異步,請(qǐng)得新增加或聯(lián)系技術(shù)管理員");
}
});
});
上面這二個(gè)代碼片段簡單描述了,增加和刪除功能的JS代碼。有的同學(xué)發(fā)現(xiàn)了,他們有共同點(diǎn),就是ajax請(qǐng)求中有一部分是相同的,并且刪除功能如果在其它地方也用到呢?,那在其它地方也要寫一代碼這種相同的代碼。感覺很不舒服
我們改進(jìn)一下
var SingletonCRUD = (function(){
SingletonClass() {}
SingletonClass.prototype = {
constructor: SingletonClass,
add: function( data ) {
$.ajax({
type: "post"
dataType:"json",
url: "http://www.dhdzp.com/",
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: "http://www.dhdzp.com/",
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í)例來做一些Tool工具類;
使用設(shè)計(jì)模式優(yōu)點(diǎn):解耦合、可讀性強(qiáng)、代碼結(jié)構(gòu)清晰;
通過上面的小例子,把點(diǎn)擊事件里的獲取數(shù)據(jù)(click的事件函數(shù))和操作數(shù)據(jù)(ajax請(qǐng)求)相分離;
通過對(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("http://www.dhdzp.com/", data, function( result ){
if ( result.status ) { alert("新增成功!") } else { alert("新增失敗") }
});
},
remove: function( data ) {
this.ajax("http://www.dhdzp.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方法,也相當(dāng)于一個(gè)門面模式(Facade),隱藏內(nèi)部細(xì)節(jié),對(duì)外暴露一個(gè)接口;
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié)
這篇文章主要介紹了javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié),包括JavaScript Math.random()內(nèi)置函數(shù) ,Js 隨機(jī)數(shù)產(chǎn)生6位數(shù)字的代碼,需要的朋友可以參考下2018-04-04
基于JS實(shí)現(xiàn)右側(cè)緩慢彈窗動(dòng)態(tài)效果
在現(xiàn)代Web開發(fā)中,動(dòng)態(tài)交互效果是提升用戶體驗(yàn)的重要手段之一,其中,從頁面右側(cè)緩慢滑出的彈窗效果因其不遮擋主要內(nèi)容、易于用戶操作而備受歡迎,本文將詳細(xì)介紹如何使用JavaScript結(jié)合CSS3動(dòng)畫實(shí)現(xiàn)這一效果,并探討其在實(shí)際項(xiàng)目中的應(yīng)用,需要的朋友可以參考下2025-02-02
JavaScript實(shí)現(xiàn)在標(biāo)題欄上顯示當(dāng)前日期的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)在標(biāo)題欄上顯示當(dāng)前日期的方法,涉及javascript操作時(shí)間及DOM節(jié)點(diǎn)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫效果,涉及javascript基于時(shí)間函數(shù)的頁面元素屬性動(dòng)態(tài)變換實(shí)現(xiàn)運(yùn)動(dòng)效果相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法
這篇文章主要介紹了JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法,涉及javascript針對(duì)數(shù)組及隨機(jī)數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
讓瀏覽器非阻塞加載javascript的幾種方法小結(jié)
通常大多數(shù)瀏覽器是并行下載資源的,但由于外部腳本的特殊性例如通過腳本改變文檔的DOM結(jié)構(gòu)、腳本之間的存在依賴關(guān)系、使用document.write 向頁面輸出HTML等。2011-04-04
JavaScript中Null與Undefined的區(qū)別解析
這篇文章主要介紹了JavaScript中Null與Undefined的區(qū)別解析,本文給出了多個(gè)代碼實(shí)例講解它們之間的區(qū)別,需要的朋友可以參考下2015-06-06

