Detaillierte Erläuterung des JS-Datenzugriffsobjektmusters

Dieser Artikel enthält hauptsächlich eine Beispielerklärung des Datenzugriffsobjektmusters des JS-Entwurfsmusters. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Problem

Die meisten Websites speichern einige Daten (z. B. Benutzertoken) im Frontend, um Werte zwischen Seiten zu übertragen. Es können viele Daten gespeichert werden, die Datenverwaltung wird kompliziert und ein großes Projekt wird von mehreren Programmierern gemeinsam entwickelt. Zu diesem Zeitpunkt werden Sie auf ein Problem stoßen: Wie stellen Sie sicher, dass Ihre eigenen Daten andere Daten nicht überschreiben? Menschen? Da jeder dasselbe WebStorage-Objekt auf einer Seite verwendet, können Sie die von allen verwendeten Schlüssel nicht aufzeichnen. Zu diesem Zeitpunkt können Sie das Datenzugriffsobjektmuster verwenden, um das Problem zu lösen.

Einführung

HTML5 bietet zwei neue Methoden zum Speichern von Daten auf dem Client: localStorage und sessionStorage. Dabei handelt es sich um zwei Speichermechanismen, die von der Web Storage API bereitgestellt werden. Der Unterschied besteht darin, dass ersteres ein permanenter Speicher ist , wobei die Datenübertragung auf das aktuelle Fenster beschränkt ist und die darin gespeicherten Daten gelöscht werden, wenn die aktuelle Sitzung endet. Die spezifischen Inhalte von localStorage und sessionStorage werden hier nicht vorgestellt. Wir werden hauptsächlich diskutieren, wie sie in der tatsächlichen Entwicklung sinnvoll eingesetzt werden können.

Data Access Object Pattern (DAO)

Das Data Access Object Pattern kapselt den Zugriff und die Speicherung von Datenquellen und stellt eine Datenzugriffsobjektklasse bereit, die für die Verwaltung und den Betrieb der gespeicherten Daten verantwortlich ist Datenspeicherformat, ähnlich der DAO-Schicht im Hintergrund.

Da WebStorage den Schlüsselwert für den Zugriff auf Daten verwendet und nur Zeichenfolgen speichern kann (jeder Typ wird beim Speichern in eine Zeichenfolge konvertiert und beim Lesen ist eine Typkonvertierung erforderlich), können wir das Format des Schlüssels standardisieren B. Modulname + Schlüssel, Entwickler + Schlüssel usw. Sie können dem Wert auch ein Präfix hinzufügen, um die Daten zu beschreiben, z. B. einen Zeitstempel des Datenablaufdatums hinzufügen, um den Lebenszyklus der Daten zu verwalten. Das spezifische Formatprojektteam kann es selbst definieren, hauptsächlich um die Verwaltung zu erleichtern und Konflikte zu vermeiden. Nachdem sie sich auf die Spezifikationen geeinigt haben, können sie mit der Definition von Datenzugriffsobjekten beginnen.

Im Folgenden wird localStorage als Beispiel verwendet, um die Definition und Verwendung von Datenzugriffsobjektklassen vorzustellen.

Codebeispiel

Grundstruktur der DAO-Klasse

Die Grundstruktur der Datenzugriffsobjektklasse ist wie folgt: Wir fügen dem Schlüsselwert ein Präfix hinzu, um den Schlüsselwert zu vermeiden Konflikt, und fügen Sie dem Wert den Zeitstempel und das Trennzeichen für den Datenablauf hinzu und bestimmen Sie dann, ob er abgelaufen ist, wenn Sie den Wert erhalten. Dies ermöglicht eine flexiblere Verwaltung des Lebenszyklus der gespeicherten Daten. Hier wird auch eine Rückrufmethode verwendet, um das Erhalten spezifischer Ergebnisse des Datenzugriffsprozesses und das Durchführen zugehöriger Vorgänge bei Bedarf zu erleichtern.

/**
 * 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) {
    ...
  }
}

Daten hinzufügen (ändern)

/**
  * 添加（修改）数据
  * @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);
  }

Daten abrufen

/**
  * 获取数据
  * @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;
  }

Daten löschen

/**
  * 删除数据
  * @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));
  }

Nutzung

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); });

Am Ende geschrieben

Tatsächlich eignet sich der Datenzugriffsobjektmodus besser für serverseitige Datenbankoperationen, z. B. den Betrieb von MongoDB in NodeJS, indem er das Hinzufügen, Löschen, Ändern und Abfragen kapselt Durch den Betrieb der Datenbank können wir unsere Front-End-Speicherverwaltung vereinfachen, wir müssen uns nicht um den Betrieb der Datenbank kümmern. DAO hat uns eine praktische und einheitliche Schnittstelle zur Verfügung gestellt, sodass wir uns keine Sorgen machen müssen, dass dies andere Personen beeinträchtigt Daten während der Teamentwicklung.

Verwandte Empfehlungen:

PHP-Designmuster DAO (Data Access Object Pattern)

Yii Learning Summary Data Access Object ( DAO), yiidao_PHP-Tutorial

Javascript-objektorientierte Analyse von zwei Möglichkeiten, auf Objekteigenschaften zuzugreifen_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JS-Datenzugriffsobjektmusters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!