JS設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問對(duì)象模式的實(shí)例講解

引言
HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法:localStorage、sessionStorage,他們是Web Storage API 提供的兩種存儲(chǔ)機(jī)制,區(qū)別在于前者屬于永久性存儲(chǔ),而后者是局限于當(dāng)前窗口的數(shù)據(jù)傳遞,存儲(chǔ)在其中的數(shù)據(jù)會(huì)在當(dāng)前會(huì)話結(jié)束時(shí)被刪除。localStorage、sessionStorage的具體內(nèi)容在這里就不多做介紹了,我們主要探討一下在實(shí)際開發(fā)中怎樣合理使用他們。
問題
大部分網(wǎng)站會(huì)將一些數(shù)據(jù)(如:用戶Token)存儲(chǔ)在前端,用來(lái)實(shí)現(xiàn)頁(yè)面間的傳值,對(duì)于一些大型Web應(yīng)用來(lái)說(shuō),其存儲(chǔ)的數(shù)據(jù)可能會(huì)非常多,數(shù)據(jù)的管理會(huì)變得復(fù)雜,并且一個(gè)大型項(xiàng)目是由多位程序員共同開發(fā)的,這時(shí)就會(huì)遇到一個(gè)問題:怎樣確保自己的數(shù)據(jù)不會(huì)覆蓋掉其他人的呢?因?yàn)樵谝粋€(gè)頁(yè)面中大家都是使用同一個(gè)WebStorage對(duì)象,總不能把大家使用過的Key記錄下來(lái)吧。這時(shí)候就可以使用數(shù)據(jù)訪問對(duì)象模式來(lái)解決了。
數(shù)據(jù)訪問對(duì)象模式(DAO)
數(shù)據(jù)訪問對(duì)象模式就是對(duì)數(shù)據(jù)源的訪問與存儲(chǔ)進(jìn)行封裝,提供一個(gè)數(shù)據(jù)訪問對(duì)象類負(fù)責(zé)對(duì)存儲(chǔ)的數(shù)據(jù)進(jìn)行管理和操作,規(guī)范數(shù)據(jù)存儲(chǔ)格式,類似于后臺(tái)的DAO層。
由于WebStorage采用Key-Value的方式存取數(shù)據(jù),而且只能存字符串(任何類型存儲(chǔ)的時(shí)候都會(huì)被轉(zhuǎn)為字符串,讀取的時(shí)候需要進(jìn)行類型轉(zhuǎn)換),所以我們可以對(duì)Key的格式進(jìn)行規(guī)范,比如模塊名+Key,開發(fā)人員+Key等,還可以在值中添加一段前綴用來(lái)描述數(shù)據(jù),如添加數(shù)據(jù)過期日期的時(shí)間戳,用來(lái)管理數(shù)據(jù)的生命周期。具體格式項(xiàng)目組可以自己定義,主要是便于管理,防止出現(xiàn)沖突,約定好規(guī)范后就可以開始定義數(shù)據(jù)訪問對(duì)象了。
下面以localStorage為例,介紹一下數(shù)據(jù)訪問對(duì)象類的定義和使用。
代碼示例
DAO類基本結(jié)構(gòu)
數(shù)據(jù)訪問對(duì)象類的基本結(jié)構(gòu)如下,我們給鍵值添加了一段前綴用來(lái)避免鍵值沖突,并且在值中加入數(shù)據(jù)過期時(shí)間戳以及分隔符,獲取值的時(shí)候再進(jìn)行判斷是否過期,這樣可以更靈活地管理存儲(chǔ)數(shù)據(jù)的生命周期。這里還用到了回調(diào)的方式,方便獲取數(shù)據(jù)訪問過程的具體結(jié)果,以及在必要時(shí)執(zhí)行相關(guān)操作。
/**
* LocalStorage數(shù)據(jù)訪問類
* @param {string} prefix Key前綴
* @param {string} timeSplit 時(shí)間戳與存儲(chǔ)數(shù)據(jù)之間的分割符
*/
var Dao = function (prefix, timeSplit) {
this.prefix = prefix;
this.timeSplit = timeSplit || '|-|';
}
// LocalStorage數(shù)據(jù)訪問類原型方法
Dao.prototype = {
// 操作狀態(tài)
status: {
SUCCESS: 0, // 成功
FAILURE: 1, // 失敗
OVERFLOW: 2, // 溢出
TIMEOUT: 3 // 過期
},
// 本地存儲(chǔ)對(duì)象
storage: localStorage || window.localStorage,
// 獲取帶前綴的真實(shí)鍵值
getKey: function (key) {
return this.prefix + key;
},
// 添加(修改)數(shù)據(jù)
set: function (key, value, callback, time) {
...
},
// 獲取數(shù)據(jù)
get: function (key, callback) {
...
},
// 刪除數(shù)據(jù)
remove: function (key, callback) {
...
}
}
添加(修改)數(shù)據(jù)
/**
* 添加(修改)數(shù)據(jù)
* @param key 數(shù)據(jù)字段標(biāo)識(shí)
* @param value 數(shù)據(jù)值
* @param callback 回調(diào)函數(shù)
* @param time 過期時(shí)間
*/
set: function (key, value, callback, time) {
// 默認(rèn)為成功狀態(tài)
var status = this.status.SUCCESS,
key = this.getKey(key);
try {
// 獲取過期時(shí)間戳
time = new Date(time).getTime() || time.getTime();
} catch (e) {
// 未設(shè)置過期時(shí)間時(shí)默認(rèn)為一個(gè)月
time = new Date().getTime() + 1000 * 60 * 60 * 24 * 30;
}
try {
// 向本地存儲(chǔ)中添加(修改)數(shù)據(jù)
this.storage.setItem(key, time + this.timeSplit + value);
} catch (e) {
// 發(fā)生溢出
status = this.status.OVERFLOW;
}
// 執(zhí)行回調(diào)并傳入?yún)?shù)
callback && callback.call(this, status, key, value);
}
獲取數(shù)據(jù)
/**
* 獲取數(shù)據(jù)
* @param key 數(shù)據(jù)字段標(biāo)識(shí)
* @param callback 回調(diào)函數(shù)
*/
get: function (key, callback) {
var key = this.getKey(key),
status = this.status.SUCCESS, // 獲取數(shù)據(jù)狀態(tài)
value = null; // 獲取數(shù)據(jù)值
try {
// 從本地存儲(chǔ)獲取數(shù)據(jù)
value = this.storage.getItem(key);
} catch (e) {
// 獲取數(shù)據(jù)失敗
status = this.status.FAILURE;
value = null;
}
// 如果成功獲取數(shù)據(jù)
if (status !== this.status.FAILURE) {
var index = value.indexOf(this.timeSplit),
timeSplitLen = this.timeSplit.length,
// 獲取時(shí)間戳
time = value.slice(0, index);
// 判斷數(shù)據(jù)是否未過期
if (new Date(1*time).getTime() > new Date().getTime() || time == 0) {
// 獲取數(shù)據(jù)值
value = value.slice(index + timeSplitLen);
} else {
// 數(shù)據(jù)已過期,刪除數(shù)據(jù)
value = null;
status = this.status.TIMEOUT;
this.remove(key);
}
}
// 執(zhí)行回調(diào)
callback && callback.call(this, status, value);
// 返回結(jié)果值
return value;
}
刪除數(shù)據(jù)
/**
* 刪除數(shù)據(jù)
* @param key 數(shù)據(jù)字段標(biāo)識(shí)
* @param callback 回調(diào)函數(shù)
*/
remove: function (key, callback) {
// 設(shè)置默認(rèn)狀態(tài)為失敗
var status = this.status.FAILURE,
key = this.getKey(key),
value = null;
try {
// 獲取數(shù)據(jù)值
value = this.storage.getItem(key);
} catch (e) {
// 數(shù)據(jù)不存在,不采取操作
}
// 如果數(shù)據(jù)存在
if (value) {
try {
// 刪除數(shù)據(jù)
this.storage.removeItem(key);
status = this.status.SUCCESS;
} catch (e) {
// 數(shù)據(jù)刪除失敗,不采取操作
}
}
// 執(zhí)行回調(diào)并傳入?yún)?shù),刪除成功則傳入被刪除的數(shù)據(jù)值
callback && callback.call(this, status, status > 0 ? null : value.slice(value.indexOf(this.timeSplit) + this.timeSplit.length));
}
用法
var dao = new Dao('myModule_');
// 添加/修改數(shù)據(jù)
dao.set('token', 'abc', function () { console.log(arguments); });
// 獲取數(shù)據(jù)
var value = dao.get('token', function () { console.log(arguments); });
console.log(value);
// 刪除數(shù)據(jù)
dao.remove('token', function () { console.log(arguments); });
寫在最后
其實(shí)數(shù)據(jù)訪問對(duì)象模式更適合與服務(wù)器端的數(shù)據(jù)庫(kù)操作,比如在nodejs中操作MongoDB,通過對(duì)數(shù)據(jù)庫(kù)增刪改查操作的封裝,可以方便我們對(duì)前端存儲(chǔ)的管理,不必為操作數(shù)據(jù)庫(kù)感到煩惱,DAO已經(jīng)為我們提供了便捷統(tǒng)一的接口,這樣在團(tuán)隊(duì)開發(fā)中就不用擔(dān)心影響到其他人的數(shù)據(jù)了。
以上這篇JS設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問對(duì)象模式的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- JS設(shè)計(jì)模式之責(zé)任鏈模式實(shí)例詳解
- JavaScript編程設(shè)計(jì)模式之構(gòu)造器模式實(shí)例分析
- JavaScript設(shè)計(jì)模式之代理模式詳解
- JavaScript設(shè)計(jì)模式之單例模式詳解
- JavaScript設(shè)計(jì)模式之策略模式詳解
- javascript常用的設(shè)計(jì)模式
- JavaScript 設(shè)計(jì)模式 安全沙箱模式
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式)
- javascript設(shè)計(jì)模式之解釋器模式詳解
- JavaScript設(shè)計(jì)模式之調(diào)停者模式實(shí)例詳解
相關(guān)文章
js實(shí)現(xiàn)一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)的3種方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)的3種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02
javascript實(shí)現(xiàn)文本域?qū)懭胱址麜r(shí)限定字?jǐn)?shù)
這篇文章主要介紹了javascript實(shí)現(xiàn)文本域的寫入字符個(gè)數(shù)限定字?jǐn)?shù),需要的朋友可以參考下2014-02-02
JavaScript 中如何實(shí)現(xiàn)大文件并行下載
本文將介紹如何利用 async-pool 這個(gè)庫(kù)提供的 asyncPool 函數(shù)來(lái)實(shí)現(xiàn)大文件的并行下載。2021-05-05
JavaScript利用正則表達(dá)式來(lái)禁止鍵盤輸入數(shù)字
本文主要介紹了JavaScript利用正則表達(dá)式來(lái)禁止鍵盤輸入數(shù)字,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示(zepto.js)
這篇文章主要為大家詳細(xì)介紹了scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
uniapp小程序項(xiàng)目獲取位置經(jīng)緯度信息
在實(shí)際項(xiàng)目中很多時(shí)候我們需要獲取設(shè)備的位置信息,去展示給客戶,或者以位置信息為參數(shù),繼續(xù)向服務(wù)器獲取一些數(shù)據(jù),這篇文章主要介紹了uni-app如何獲取位置信息(經(jīng)緯度),需要的朋友可以參考下2022-11-11
javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 迭代器模式原理與用法,結(jié)合實(shí)例形式分析了javascript迭代器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
js中如何復(fù)制一個(gè)對(duì)象并獲取其所有屬性和屬性對(duì)應(yīng)的值
如果知道這個(gè)對(duì)象的所有屬性自然就可以重新new一個(gè),然后對(duì)每個(gè)屬性賦值,就可以做到,但如果不知道呢?如何創(chuàng)建一個(gè)內(nèi)容相同 的對(duì)象呢?下面有個(gè)不錯(cuò)的示例,大家可以看看2013-10-10
Firefox中autocomplete="off" 設(shè)置不起作用Bug的解決方法
在實(shí)現(xiàn)補(bǔ)全提示功能時(shí)(Suggest),都會(huì)給輸入框(Input)元素添加autocomplete屬性,且值設(shè)為off。2011-03-03

