欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS設計模式之數據訪問對象模式的實例講解

 更新時間：2017年09月30日 08:05:20   作者：kMacro  
下面小編就為大家?guī)硪黄狫S設計模式之數據訪問對象模式的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

引言

HTML5 提供了兩種在客戶端存儲數據的新方法：localStorage、sessionStorage，他們是Web Storage API 提供的兩種存儲機制，區(qū)別在于前者屬于永久性存儲，而后者是局限于當前窗口的數據傳遞，存儲在其中的數據會在當前會話結束時被刪除。localStorage、sessionStorage的具體內容在這里就不多做介紹了，我們主要探討一下在實際開發(fā)中怎樣合理使用他們。

問題

大部分網站會將一些數據（如：用戶Token）存儲在前端，用來實現(xiàn)頁面間的傳值，對于一些大型Web應用來說，其存儲的數據可能會非常多，數據的管理會變得復雜，并且一個大型項目是由多位程序員共同開發(fā)的，這時就會遇到一個問題：怎樣確保自己的數據不會覆蓋掉其他人的呢？因為在一個頁面中大家都是使用同一個WebStorage對象，總不能把大家使用過的Key記錄下來吧。這時候就可以使用數據訪問對象模式來解決了。

數據訪問對象模式（DAO）

數據訪問對象模式就是對數據源的訪問與存儲進行封裝，提供一個數據訪問對象類負責對存儲的數據進行管理和操作，規(guī)范數據存儲格式，類似于后臺的DAO層。

由于WebStorage采用Key-Value的方式存取數據，而且只能存字符串（任何類型存儲的時候都會被轉為字符串，讀取的時候需要進行類型轉換），所以我們可以對Key的格式進行規(guī)范，比如模塊名+Key，開發(fā)人員+Key等，還可以在值中添加一段前綴用來描述數據，如添加數據過期日期的時間戳，用來管理數據的生命周期。具體格式項目組可以自己定義，主要是便于管理，防止出現(xiàn)沖突，約定好規(guī)范后就可以開始定義數據訪問對象了。

下面以localStorage為例，介紹一下數據訪問對象類的定義和使用。

代碼示例

DAO類基本結構

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

/**
 * LocalStorage數據訪問類
 * @param {string} prefix Key前綴
 * @param {string} timeSplit 時間戳與存儲數據之間的分割符
 */
var Dao = function (prefix, timeSplit) {
  this.prefix = prefix;
  this.timeSplit = timeSplit || '|-|';
}
// LocalStorage數據訪問類原型方法
Dao.prototype = {
  // 操作狀態(tài)
  status: {
    SUCCESS: 0,   // 成功
    FAILURE: 1,   // 失敗
    OVERFLOW: 2,  // 溢出
    TIMEOUT: 3   // 過期
  },
  // 本地存儲對象
  storage: localStorage || window.localStorage,
  // 獲取帶前綴的真實鍵值
  getKey: function (key) {
    return this.prefix + key;
  },
  // 添加（修改）數據
  set: function (key, value, callback, time) {
    ...
  },
  // 獲取數據
  get: function (key, callback) {
    ...
  },
  // 刪除數據
  remove: function (key, callback) {
    ...
  }
}

添加（修改）數據

/**
  * 添加（修改）數據
  * @param key 數據字段標識
  * @param value 數據值
  * @param callback 回調函數
  * @param time 過期時間
  */
  set: function (key, value, callback, time) {
    // 默認為成功狀態(tài)
    var status = this.status.SUCCESS,
      key = this.getKey(key);
    try {
      // 獲取過期時間戳
      time = new Date(time).getTime() || time.getTime();
    } catch (e) {
      // 未設置過期時間時默認為一個月
      time = new Date().getTime() + 1000 * 60 * 60 * 24 * 30;
    }
    try {
      // 向本地存儲中添加（修改）數據
      this.storage.setItem(key, time + this.timeSplit + value);
    } catch (e) {
      // 發(fā)生溢出
      status = this.status.OVERFLOW;
    }
    // 執(zhí)行回調并傳入參數
    callback && callback.call(this, status, key, value);
  }

獲取數據

/**
  * 獲取數據
  * @param key 數據字段標識
  * @param callback 回調函數
  */
  get: function (key, callback) {
    var key = this.getKey(key),
      status = this.status.SUCCESS,  // 獲取數據狀態(tài)
      value = null;  // 獲取數據值

    try {
      // 從本地存儲獲取數據
      value = this.storage.getItem(key);
    } catch (e) {
      // 獲取數據失敗
      status = this.status.FAILURE;
      value = null;
    }

    // 如果成功獲取數據
    if (status !== this.status.FAILURE) {
      var index = value.indexOf(this.timeSplit),
        timeSplitLen = this.timeSplit.length,
        // 獲取時間戳
        time = value.slice(0, index);
      // 判斷數據是否未過期
      if (new Date(1*time).getTime() > new Date().getTime() || time == 0) {
        // 獲取數據值
        value = value.slice(index + timeSplitLen);
      } else {
        // 數據已過期，刪除數據
        value = null;
        status = this.status.TIMEOUT;
        this.remove(key);
      }
    }

    // 執(zhí)行回調
    callback && callback.call(this, status, value);
    // 返回結果值
    return value;
  }

刪除數據

/**
  * 刪除數據
  * @param key 數據字段標識
  * @param callback 回調函數
  */
  remove: function (key, callback) {
    // 設置默認狀態(tài)為失敗
    var status = this.status.FAILURE,
      key = this.getKey(key),
      value = null;
    try {
      // 獲取數據值
      value = this.storage.getItem(key);
    } catch (e) {
      // 數據不存在，不采取操作
    }
    // 如果數據存在
    if (value) {
      try {
        // 刪除數據
        this.storage.removeItem(key);
        status = this.status.SUCCESS;
      } catch (e) {
        // 數據刪除失敗，不采取操作
      }
    }
    // 執(zhí)行回調并傳入參數，刪除成功則傳入被刪除的數據值
    callback && callback.call(this, status, status > 0 ? null : value.slice(value.indexOf(this.timeSplit) + this.timeSplit.length));
  }

用法

var dao = new Dao('myModule_');
// 添加/修改數據
dao.set('token', 'abc', function () { console.log(arguments); });
// 獲取數據
var value = dao.get('token', function () { console.log(arguments); });
console.log(value);
// 刪除數據
dao.remove('token', function () { console.log(arguments); });

寫在最后

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

以上這篇JS設計模式之數據訪問對象模式的實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論