数据访问对象模式——前端数据的灵活管理者

2023-09-17 19:22:45

在前端开发中，处理各种类型的数据来源是一项复杂的任务。从表单输入到Cookie数据，再到浏览器的本地存储，每一种数据形式都需要特定的处理方式。数据访问对象（DAO）模式提供了一种优雅的解决方案，通过将数据访问逻辑与业务逻辑分离，提升了应用程序的可维护性和可移植性。

什么是 DAO 模式？

DAO（Data Access Object）模式定义了一个接口，用于抽象底层数据存储机制，如数据库、API或文件系统。它封装了数据访问操作，如获取、设置、更新和删除，从而提供了一个统一的界面来访问和管理数据。

DAO 模式的优点

解耦

DAO模式将数据访问逻辑与业务逻辑分离，使得应用程序更容易修改和维护。

可重用

DAO类可以被多个应用程序共享，提高了代码的重用性。

可维护

通过封装数据访问操作，DAO模式使应用程序代码更易于阅读和理解。

在前端开发中应用 DAO 模式

表单数据管理

在表单提交时，通常需要对数据进行验证和处理。使用DAO模式可以简化这一过程。

示例代码

class FormDataDAO {
  constructor() {
    this.storage = window.localStorage;
  }

  get(key) {
    return this.storage.getItem(key);
  }

  set(key, value) {
    this.storage.setItem(key, value);
  }

  remove(key) {
    this.storage.removeItem(key);
  }

  clear() {
    this.storage.clear();
  }

  validate(formData) {
    // 实现数据验证逻辑
    return true; // 假设验证总是成功
  }
}

const formDataDAO = new FormDataDAO();
formDataDAO.set('name', 'John Doe');
formDataDAO.set('age', 30);

if (formDataDAO.validate({ name: 'John Doe', age: 30 })) {
  console.log('Form data is valid.');
} else {
  console.log('Form data is invalid.');
}

Cookie 数据管理

管理Cookie数据需要设置、读取和删除值。使用DAO模式可以使这些操作更加简洁。

示例代码

class CookieDAO {
  constructor() {
    this.baseURL = window.location.origin;
  }

  get(key) {
    const cookieName = `${this.baseURL}/$${key}`;
    return this._getCookieValue(cookieName);
  }

  set(key, value) {
    const cookieName = `${this.baseURL}/$${key}`;
    this._setCookieValue(cookieName, value);
  }

  remove(key) {
    const cookieName = `${this.baseURL}/$${key}`;
    this._removeCookieValue(cookieName);
  }

  clear() {
    const cookies = document.cookie.split(';').map(cookie => cookie.trim());
    cookies.forEach(cookie => {
      const [name, value] = cookie.split('=');
      if (name.startsWith(`${this.baseURL}/`)) {
        this._removeCookieValue(name);
      }
    });
  }

  _getCookieValue(cookieName) {
    const cookieString = this.storage.getItem(cookieName);
    return cookieString ? decodeURIComponent(cookieString.split('=')[1]) : null;
  }

  _setCookieValue(cookieName, value) {
    const expires = new Date().toUTCString();
    this.storage.setItem(cookieName, `${value}; expires=${expires}`);
  }

  _removeCookieValue(cookieName) {
    this.storage.removeItem(cookieName);
  }
}

const cookieDAO = new CookieDAO();
cookieDAO.set('user', 'john_doe');
console.log(cookieDAO.get('user')); // "john_doe"

cookieDAO.remove('user');
console.log(cookieDAO.get('user')); // null

本地存储数据管理

浏览器本地存储（如localStorage和sessionStorage）提供了在客户端存储数据的能力。使用DAO模式可以更方便地管理这些数据。

示例代码

class LocalStorageDAO {
  constructor() {
    this.storage = window.localStorage;
  }

  get(key) {
    return this.storage.getItem(key);
  }

  set(key, value) {
    this.storage.setItem(key, value);
  }

  remove(key) {
    this.storage.removeItem(key);
  }

  clear() {
    this.storage.clear();
  }
}

const localStorageDAO = new LocalStorageDAO();
localStorageDAO.set('username', 'john_doe');
console.log(localStorageDAO.get('username')); // "john_doe"

localStorageDAO.remove('username');
console.log(localStorageDAO.get('username')); // null