JSデータアクセスオブジェクトパターンの詳細説明-jsチュートリアル-php.cn

JSデータアクセスオブジェクトパターンの詳細説明

小云云

リリース： 2018-01-27 17:19:18

オリジナル

1172 人が閲覧しました

この記事では主にJSデザインパターンのデータアクセスオブジェクトパターンの解説例を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

問題

ほとんどの Web サイトは、ページ間で値を転送するためにフロントエンドに一部のデータ (ユーザートークンなど) を保存します。一部の大規模な Web アプリケーションでは、保存されるデータが非常に大きくなる可能性があります。複雑になり、大規模なプロジェクトが複数のプログラマーによって共同開発される場合、自分のデータが他の人のデータを上書きしないようにするにはどうすればよいかという問題に遭遇します。全員がページ上で同じ WebStorage オブジェクトを使用するため、全員が使用したキーを記録することはできません。現時点では、データアクセスオブジェクトパターンを使用して問題を解決できます。

はじめに

HTML5 は、クライアント側でデータを保存するための 2 つの新しい方法、localStorage と sessionStorage を提供します。これらは、Web Storage API によって提供される 2 つのストレージメカニズムであるのに対し、後者はストレージに限定されるという点です。現在のウィンドウに保存されているデータは、現在のセッションの終了時に削除されます。 localStorage と sessionStorage の具体的な内容についてはここでは紹介しません。実際の開発での合理的な使い方を中心に説明します。

データアクセスオブジェクトパターン (DAO)

データアクセスオブジェクトパターンは、データソースのアクセスとストレージをカプセル化し、格納されたデータの管理と操作を担当するデータアクセスオブジェクトクラスを提供し、データストレージ形式を標準化します。バックエンド DAO 層。

WebStorage はデータへのアクセスに Key-Value メソッドを使用し、文字列のみを保存できるため (保存時に任意の型が文字列に変換され、読み取り時に型変換が必要になります)、キーの形式を変更できます。モジュール名 + キー、開発者 + キーなど。値にプレフィックスを追加してデータを説明することもできます。たとえば、データのライフサイクルを管理するためにデータの有効期限のタイムスタンプを追加することもできます。特定の形式のプロジェクトチームは、主に管理を容易にし、競合を防止するために、データアクセスオブジェクトの定義を開始できます。

以下では、localStorage を例として、データアクセスオブジェクトクラスの定義と使用法を紹介します。

コード例

DAOクラスの基本構造

データアクセスオブジェクトクラスの基本構造は次のとおりです。キーと値の競合を避けるためにキー値に接頭辞を追加し、データ有効期限のタイムスタンプと区切り文字を追加します。取得する値その値に達した場合に有効期限が切れているかどうかを判定するため、保存データのライフサイクルをより柔軟に管理できます。ここでは、データアクセスプロセスの特定の結果の取得と、必要に応じた関連操作の実行を容易にするために、コールバックメソッドも使用されます。

/**
 * LocalStorage数据访问类
 * @param {string} prefix Key前缀
 * @param {string} timeSplit 时间戳与存储数据之间的分割符
 */
var Dao = function (prefix, timeSplit) {
  this.prefix = prefix;
  this.timeSplit = timeSplit || '|-|';
}
// LocalStorage数据访问类原型方法
Dao.prototype = {
  // 操作状态
  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) {
    // 默认为成功状态
    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) {
      // 发生溢出
      status = this.status.OVERFLOW;
    }
    // 执行回调并传入参数
    callback && callback.call(this, status, key, value);
  }

ログイン後にコピー

データを取得

/**
  * 获取数据
  * @param key 数据字段标识
  * @param callback 回调函数
  */
  get: function (key, callback) {
    var key = this.getKey(key),
      status = this.status.SUCCESS,  // 获取数据状态
      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);
      }
    }

    // 执行回调
    callback && callback.call(this, status, value);
    // 返回结果值
    return value;
  }

ログイン後にコピー

データを削除

/**
  * 删除数据
  * @param key 数据字段标识
  * @param callback 回调函数
  */
  remove: function (key, callback) {
    // 设置默认状态为失败
    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) {
        // 数据删除失败，不采取操作
      }
    }
    // 执行回调并传入参数，删除成功则传入被删除的数据值
    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); });

ログイン後にコピー

最後に書きました

実際、データアクセスオブジェクトモードは、次のようなサーバー側のデータベース操作に適しています。データベースの追加、削除、変更、クエリ操作をカプセル化することで、フロントエンドストレージの管理が容易になり、DAO が提供するデータベースの操作を心配する必要がなくなります。便利で統一されたインターフェイスを備えているため、チーム開発中に他の人の作業に影響を与えることを心配する必要がありません。