测试文章 09 - 设计模式在前端开发中的应用

1
class Singleton {
2
  static instance = null;
3

4
  static getInstance() {
5
    if (!Singleton.instance) {
6
      Singleton.instance = new Singleton();
7
    }
8
    return Singleton.instance;
9
  }
10
}
11

12
// 使用
13
const instance1 = Singleton.getInstance();
14
const instance2 = Singleton.getInstance();
15
console.log(instance1 === instance2); // true

1
class EventEmitter {
2
  constructor() {
3
    this.events = {};
4
  }
5

6
  on(event, callback) {
7
    if (!this.events[event]) {
8
      this.events[event] = [];
9
    }
10
    this.events[event].push(callback);
11
  }
12

13
  emit(event, data) {
14
    if (this.events[event]) {
15
      this.events[event].forEach(callback => callback(data));
16
    }
17
  }
18

19
  off(event, callback) {
20
    if (this.events[event]) {
21
      this.events[event] = this.events[event].filter(cb => cb !== callback);
22
    }
23
  }
24
}

1
class ComponentFactory {
2
  static create(type, props) {
3
    switch (type) {
4
      case 'button':
5
        return new Button(props);
6
      case 'input':
7
        return new Input(props);
8
      case 'select':
9
        return new Select(props);
10
      default:
11
        throw new Error(`Unknown component type: ${type}`);
12
    }
13
  }
14
}

1
const validationStrategies = {
2
  required: (value) => value !== '' || '此字段必填',
3
  email: (value) => /\S+@\S+\.\S+/.test(value) || '邮箱格式不正确',
4
  minLength: (value, length) => value.length >= length || `最少${length}个字符`,
5
};
6

7
function validate(value, rules) {
8
  for (const rule of rules) {
9
    const [strategy, ...args] = rule.split(':');
10
    const result = validationStrategies[strategy](value, ...args);
11
    if (result !== true) return result;
12
  }
13
  return true;
14
}