JS設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問(wèn)對(duì)象模式的示例分析

這篇文章主要為大家展示了“JS設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問(wèn)對(duì)象模式的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問(wèn)對(duì)象模式的示例分析”這篇文章吧。

引言

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í)際開(kāi)發(fā)中怎樣合理使用他們。

問(wèn)題

大部分網(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)目是由多位程序員共同開(kāi)發(fā)的，這時(shí)就會(huì)遇到一個(gè)問(wèn)題：怎樣確保自己的數(shù)據(jù)不會(huì)覆蓋掉其他人的呢？因?yàn)樵谝粋€(gè)頁(yè)面中大家都是使用同一個(gè)WebStorage對(duì)象，總不能把大家使用過(guò)的Key記錄下來(lái)吧。這時(shí)候就可以使用數(shù)據(jù)訪問(wèn)對(duì)象模式來(lái)解決了。

數(shù)據(jù)訪問(wèn)對(duì)象模式（DAO）

數(shù)據(jù)訪問(wèn)對(duì)象模式就是對(duì)數(shù)據(jù)源的訪問(wèn)與存儲(chǔ)進(jìn)行封裝，提供一個(gè)數(shù)據(jù)訪問(wèn)對(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，開(kāi)發(fā)人員+Key等，還可以在值中添加一段前綴用來(lái)描述數(shù)據(jù)，如添加數(shù)據(jù)過(guò)期日期的時(shí)間戳，用來(lái)管理數(shù)據(jù)的生命周期。具體格式項(xiàng)目組可以自己定義，主要是便于管理，防止出現(xiàn)沖突，約定好規(guī)范后就可以開(kāi)始定義數(shù)據(jù)訪問(wèn)對(duì)象了。

下面以localStorage為例，介紹一下數(shù)據(jù)訪問(wèn)對(duì)象類的定義和使用。

代碼示例

DAO類基本結(jié)構(gòu)

數(shù)據(jù)訪問(wèn)對(duì)象類的基本結(jié)構(gòu)如下，我們給鍵值添加了一段前綴用來(lái)避免鍵值沖突，并且在值中加入數(shù)據(jù)過(guò)期時(shí)間戳以及分隔符，獲取值的時(shí)候再進(jìn)行判斷是否過(guò)期，這樣可以更靈活地管理存儲(chǔ)數(shù)據(jù)的生命周期。這里還用到了回調(diào)的方式，方便獲取數(shù)據(jù)訪問(wèn)過(guò)程的具體結(jié)果，以及在必要時(shí)執(zhí)行相關(guān)操作。

/**
 * LocalStorage數(shù)據(jù)訪問(wèn)類
 * @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ù)訪問(wèn)類原型方法
Dao.prototype = {
  // 操作狀態(tài)
  status: {
    SUCCESS: 0,   // 成功
    FAILURE: 1,   // 失敗
    OVERFLOW: 2,  // 溢出
    TIMEOUT: 3   // 過(guò)期
  },
  // 本地存儲(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 過(guò)期時(shí)間
  */
  set: function (key, value, callback, time) {
    // 默認(rèn)為成功狀態(tài)
    var status = this.status.SUCCESS,
      key = this.getKey(key);
    try {
      // 獲取過(guò)期時(shí)間戳
      time = new Date(time).getTime() || time.getTime();
    } catch (e) {
      // 未設(shè)置過(guò)期時(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ù)是否未過(guò)期
      if (new Date(1*time).getTime() > new Date().getTime() || time == 0) {
        // 獲取數(shù)據(jù)值
        value = value.slice(index + timeSplitLen);
      } else {
        // 數(shù)據(jù)已過(guò)期，刪除數(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); });

寫(xiě)在最后

其實(shí)數(shù)據(jù)訪問(wèn)對(duì)象模式更適合與服務(wù)器端的數(shù)據(jù)庫(kù)操作，比如在nodejs中操作MongoDB，通過(guò)對(duì)數(shù)據(jù)庫(kù)增刪改查操作的封裝，可以方便我們對(duì)前端存儲(chǔ)的管理，不必為操作數(shù)據(jù)庫(kù)感到煩惱，DAO已經(jīng)為我們提供了便捷統(tǒng)一的接口，這樣在團(tuán)隊(duì)開(kāi)發(fā)中就不用擔(dān)心影響到其他人的數(shù)據(jù)了。

以上是“JS設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問(wèn)對(duì)象模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！