工厂模式的应用 - 创建类模式 - [: '编程的套路 - JavaScript设计模式' |cut:tmp.cut_limit :]

参考示例 - ES5

<form id="create">
    <div>
        姓名：
        <input type="text" name="name">
    </div>
    <div>
        专业：
        <select name="type">
            <option value="文科">文科</option>
            <option value="理科">理科</option>
            <option value="体育">体育</option>
        </select>
    </div>
    <div>
        <button type="submit">创建用户</button>
    </div>
</form>

<script>
  init();

  /**
   * 初始化
   * */
  function init() {
    // 获取表单元素，等着绑事件
    var form = document.getElementById('create');

    // 给表单绑提交事件
    form.addEventListener('submit', function (e) {
      e.preventDefault();

      // 获取姓名和专业
      var name = document.querySelector('[name=name]').value;
      var type = document.querySelector('[name=type]').value;

      // 造学生
      var student = factory(name, type);

      // 重置表单
      form.reset();

      console.log('student:', student);
    });
  }

  function Student(name, subjects) {
    this.name = name;
    // ...

    // 如果是文科生：['政治', '历史', '地理']
    // 如果是理科生：['数学', '物理', '化学']
    this.subjects = subjects;
  }

  /**
   * 创建学生
   * @param {string} name 姓名
   * @param {string} type 文科还是理科
   * @return {Student}
   */
  function factory(name, type) {

    switch (type) {
      case '文科':
        return new Student(name, ['政治', '历史', '地理'])
        break;
      case '理科':
        return new Student(name, ['数学', '物理', '化学'])
        break;
      case '体育':
        return new Student(name, ['长跑', '...'])
        break;
      default:
        throw '没有这个专业，别瞎填';
    }
  }
</script>

ES6语法转换

参考示例 - ES6

<form id="create">
    <div>
        姓名：
        <input type="text" name="name">
    </div>
    <div>
        专业：
        <select name="type">
            <option value="文科">文科</option>
            <option value="理科">理科</option>
            <option value="体育">体育</option>
        </select>
    </div>
    <div>
        <button type="submit">创建用户</button>
    </div>
</form>

<script>
  init();

  /**
   * 初始化
   * */
  function init() {
    const form = document.getElementById('create');

    form.addEventListener('submit', e => {
      e.preventDefault();

      const name = document.querySelector('[name=name]').value;
      const type = document.querySelector('[name=type]').value;

      const student = factory(name, type);
      form.reset();

      console.log('student:', student);
    });
  }

  class Student {
    constructor(name, subjects) {
      this.name = name;
      // ...

      // 如果是文科生：['政治', '历史', '地理']
      // 如果是理科生：['数学', '物理', '化学']
      this.subjects = subjects;
    }
  }

  /**
   * 创建学生
   * @param {string} name 姓名
   * @param {string} type 文科还是理科
   * @return {Student}
   */
  function factory(name, type) {

    switch (type) {
      case '文科':
        return new Student(name, ['政治', '历史', '地理'])
        break;
      case '理科':
        return new Student(name, ['数学', '物理', '化学'])
        break;
      case '体育':
        return new Student(name, ['长跑', '...'])
        break;
      default:
        throw '没有这个专业，别瞎填';
    }
  }
</script>