本文共 5151 字，大约阅读时间需要 17 分钟。

前端设计模式是一个软件开发人员在解决复杂业务逻辑问题时常用的解决方案。它通过提前定义好软件的结构和行为模式，帮助开发者在复杂系统中保持代码的可读性和可维护性。

前端设计模式的基本准则

软件设计模式的核心在于提高代码的可维护性和复用性。以下是前端开发中常用的几种基本原则：

前端设计模式的种类

设计模式可以分为三大类，根据解决的问题不同，选择合适的模式：

前端设计模式的应用实例

1. 单例模式

单例模式确保一个类只有一个实例，适用于全局唯一的资源管理。

class MessageBox {
  show() {
    console.log("show");
  }
  hide() {}
  static getInstance() {
    if (!MessageBox.instance) {
      MessageBox.instance = new MessageBox();
    }
    return MessageBox.instance;
  }
}
let box3 = MessageBox.getInstance();
let box4 = MessageBox.getInstance();
console.log(box3 === box4); // true

2. 工厂模式

工厂模式通过一个统一的接口创建对象，减少对具体实现的依赖。

const storageMap = new Map();
function createStorageModel(key, storage = localStorage) {
  if (storageMap.has(key)) {
    return storageMap.get(key);
  }
  const model = {
    key,
    set(val) {
      storage.setItem(this.key, JSON.stringify(val));
    },
    get() {
      let val = storage.getItem(this.key);
      return val && JSON.parse(val);
    },
    remove() {
      storage.removeItem(this.key);
    },
  };
  storageMap.set(key, model);
  return model;
}
const themeModel = createStorageModel('local_theme', localStorage);
const utmSourceModel = createStorageModel('utm_source', sessionStorage);

3. 策略模式

策略模式通过不同的算法处理不同情况，避免复杂的if...else判断。

class Schema {
  constructor(descriptor) {
    this.descriptor = descriptor;
  }
  handleRule(val, rule) {
    const { key, params, message } = rule;
    const ruleMap = {
      required() {
        return !val;
      },
      max() {
        return val > params;
      },
      validator() {
        return params(val);
      },
    };
    const handler = ruleMap[key];
    if (handler && handler(val)) {
      throw message;
    }
  }
  validate(data) {
    return new Promise((resolve, reject) => {
      let errors = [];
      for (let key of Object.keys(data)) {
        const ruleList = this.descriptor[key];
        if (!Array.isArray(ruleList) || !ruleList.length) continue;
        const val = data[key];
        for (let rule of ruleList) {
          try {
            this.handleRule(val, rule);
          } catch (e) {
            errors.push(e.toString());
          }
        }
      }
      if (errors.length) {
        reject(errors.join(','));
      } else {
        resolve();
      }
    });
  }
}
const descriptor = {
  nickname: [
    { key: "required", message: "请填写昵称" },
    { key: "max", params: 6, message: "昵称最多6位字符" },
  ],
  phone: [
    { key: "required", message: "请填写电话号码" },
    { key: "validator", params(val) {
        return !/^1\d{10}$/.test(val);
      }, message: "请填写正确的电话号码", },
  ],
};
const validator = new Schema(descriptor);
const params = { nickname: "", phone: "123000" };
validator.validate(params).then(() => {
  console.log("success");
}).catch((e) => {
  console.log(e);
});

4. 状态模式

状态模式通过不同的状态切换来改变行为。

class RollingLoad {
  constructor() {
    this._currentState = 'init';
    this.states = {
      init: { failed: 'error', complete: 'normal' },
      normal: { rolling: 'loading' },
      loading: { complete: 'normal', failed: 'error' },
    };
    this.actions = {
      init() {
        console.log('初始化加载，大loading');
      },
      normal() {
        console.log('加载成功，正常展示');
      },
      error() {
        console.log('加载失败');
      },
      loading() {
        console.log('滚动加载');
      },
    };
  }
  change(state) {
    let to = this.states[this._currentState][state];
    if (to) {
      this._currentState = to;
      this.go();
      return true;
    }
    return false;
  }
  go() {
    this.actions[this._currentState]();
    return this;
  }
}
const rollingLoad = new RollingLoad();
rollingLoad.go();
rollingLoad.change('complete');
rollingLoad.change('loading');

5. 发布-订阅模式

发布-订阅模式允许多个对象监听同一个事件，适用于异步编程。

login.addEventListener('loginSucc', function(data) {
  header.setAvatar(data.avatar);
});
login.addEventListener('loginSucc', function(data) {
  nav.setAvatar(data.avatar);
});

6. 迭代器模式

迭代器模式提供一种方式来访问聚合对象的元素。

const platformList = [
  { name: 'app', validator: isApp },
  { name: 'wx', validator: isWx },
  { name: 'tiktok', validator: isTiktok },
  { name: 'bili', validator: isBili },
  { name: 'kwai', validator: isKwai },
];
function getPageType() {
  const ua = navigator.userAgent;
  for (let { name, validator } of platformList) {
    if (validator(ua)) {
      return name;
    }
  }
}

通过以上设计模式，前端开发者可以更高效地解决问题，提升代码的可读性和可维护性。