将视图归纳成对象 - 实现表格对象 - 背背山中学花名册 - 原型模式实战 - [: '编程的套路 - JavaScript设计模式' |cut:tmp.cut_limit :]

<main>
  <h2>添加用户</h2>
  <form>
    <label>
      姓名
      <input type="text" name="name">
    </label>
    <label>
      性别
      <input type="text" name="gender">
    </label>
    <label>
      文化分
      <input type="text" name="score">
    </label>
    <label>
      平时分
      <input type="text" name="quality">
    </label>
    <button type="submit">提交</button>
  </form>

  <h2>背背山中学花名册</h2>
  <table>
    <thead>
    <th>姓名</th>
    <th>性别</th>
    <th>文化分</th>
    <th>平时分</th>
    <th>操作</th>
    </thead>
    <tbody>
    </tbody>
  </table>
</main>

:root {
  font-family: sans-serif;
  color: #444;
  font-size: 15px;
}

body {
  margin: 0;
}

input, button {
  padding: .6rem;
  border: 1px solid rgba(0, 0, 0, .1);
  outline: 0;
  font-size: .8rem;
}

input:focus,
button:focus {
  outline: 2px solid #cfa8ff;
}

form label,
form input {
  display: block;
  width: 100%;
  margin: .3rem 0;
}

form label {
  margin-bottom: 1rem;
}

main {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

button[type=submit] {
  width: 100%;
  color: #fff;
  background: #7326d1;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table > * {
  text-align: left;
}

table th,
table td {
  padding: .6rem;
}

table thead {
  border-bottom: 3px solid rgba(0, 0, 0, .1);
}

table td {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

table tr:last-of-type td {
  border: 0;
}

tbody tr:hover {
  background: #f4ebff;
}

/*视图部分开始*/
class UserForm {
  /**
   * @param {string} selector 表单选择器
   * @param {Function} onSubmit 表单提交时的回调函数
   */
  constructor(selector, onSubmit) {
    this.el = document.querySelector(selector);
    this.onSubmit = onSubmit;
    this.bindEvents();
  }

  /**
   * 绑定必要事件
   */
  bindEvents() {
    // 绑定表单提交事件
    this.el.addEventListener('submit', e => {
      e.preventDefault();
      // 初始化数据
      let data = {};
      let el = this.el;

      // 从每个input中拿数据
      data.name = el.querySelector('[name=name]').value;
      data.gender = el.querySelector('[name=gender]').value;
      data.score = el.querySelector('[name=score]').value;
      data.quality = el.querySelector('[name=quality]').value;

      // 触发回调函数并回传拿到的数据
      this.onSubmit(data);

      // 重置表单
      el.reset();
    });
  }
}

/**
 * 表格组件
 */
class UserTable {
  /**
   * @param {UserList} list
   * @param {string} selector
   */
  constructor(list, selector) {
    this.$list = list;
    this.el = document.querySelector(selector);
    this.render();
  }

  /**
   * 渲染表格
   */
  render() {
    // 清除前一次渲染的内容
    this.el.innerHTML = '';

    // 循环每条用户数据
    this.$list.all().forEach((user, id) => {
      // 每条用户对应一个UserRow实例
      new UserRow(user, this.el, () => {
        // 当tr被删除，就删除其对应的数据
        this.$list.remove(id);
      });
    });
  }
}

/**
 * （表格）行组件
 */
class UserRow {
  /**
   *
   * @param {User} user 对应的用户数据
   * @param {HTMLTableElement} parent 所属table
   * @param {Function} onRemove 删除时执行的回调函数
   * @param {string} selector 选择器
   */
  constructor(user, parent, onRemove, selector) {
    this.$user = user;
    this.elParent = parent;
    this.onRemove = onRemove;
    this.el = selector ?
      document.querySelector(selector) :
      document.createElement('tr');
    this.render();
  }

  /**
   * 渲染行
   */
  render() {
    let user = this.$user;
    // 通过数据写入元素内容
    this.el.innerHTML = `
      <td>${user.name}</td>
      <td>${user.gender}</td>
      <td>${user.score}</td>
      <td>${user.quality}</td>
      <td><button class="remove">删除</button></td>
      `;
    // 将自己添加在所属表格中
    this.elParent.appendChild(this.el);
    // 绑定删除事件
    this.listenRemove();
  }

  /**
   * 绑定删除事件
   */
  listenRemove() {
    // 当tr中的.remove元素被点击时
    this
      .el
      .querySelector('.remove')
      .addEventListener('click', () => {
        // 删除自己
        this.el.remove();
        // 如果有回调函数
        if (this.onRemove instanceof Function)
        // 就执行回调函数
          this.onRemove();
      });
  }
}

/*视图部分结束*/

/*数据部分开始*/
class User {
  constructor(name, gender, score = 100, quality = 100) {
    this.name = name;
    this.gender = gender;
    this.score = score;
    this.quality = quality;
  }
}

class UserList {
  constructor(list = []) {
    this.list = list;
    this.normalize();
  }

  normalize() {
    this.list.forEach((user, i) => {
      if (user instanceof User)
        return;

      this.list[i] = new User(user.name, user.gender, user.score, user.quality);
    });
  }

  /**
   * 添加用户
   * @param {User} user
   */
  add(user) {
    this.list.push(user);
    this.normalize();
  }

  /**
   * 删除一个用户
   * @param {number} id
   */
  remove(id) {
    this.list.splice(id, 1);
  }

  all() {
    return this.list;
  }
}

/*数据部分结束*/

let userList = new UserList([
  {
    name: 'whh',
    gender: '男',
    score: 20,
    quality: 20,
  },
  {
    name: 'lsd',
    gender: '女',
    score: 30,
    quality: 30,
  },
]);

let table = new UserTable(userList, 'table');

new UserForm('form', data => {
  userList.add(data);
  table.render();
});