将数据归纳成对象 - 背背山中学花名册 - 原型模式实战 - [: '编程的套路 - 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>
    </thead>
    <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    </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 User {
  /**
   * @param {string} name 名称
   * @param {string} gender 性别
   * @param {number} score 文化分
   * @param {number} quality 平时分
   */
  constructor(name, gender, score = 100, quality = 100) {
    this.name = name;
    this.gender = gender;
    this.score = score;
    this.quality = quality;
  }
}

class UserList {
  /**
   * @param {Array} list 用户列表
   */
  constructor(list = []) {
    this.list = list;
    this.normalize();
  }

  /**
   * 常规化
   *
   * 将this.list中不是User实例的对象转换成User实例
   */
  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);
  }
}

let userList = new UserList([
  {
    name: '赵可爽',
    gender: '男',
  },
  {
    name: '刘备备',
    gender: '女',
  },
]);

let whh = new User('王花花', '男', 20, 100);

userList.add(whh);
userList.add({
  name: '李拴蛋',
  gender: '女',
});

console.log(userList.list);