[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]

参考示例

<form id="create">
    <div>
        姓名：
        <input type="text" name="name" autofocus>
    </div>
    <div>
        性别：
        <input type="radio" name="gender" value="女" checked>女
        <input type="radio" name="gender" value="男">男
    </div>
    <div>
        头发长度：
        <input type="number" name="hairLength">
    </div>
    <button type="submit">创建学生</button>
</form>

<script>
  // <form>元素；为了给它绑定提交事件
  var createForm = document.getElementById('create');

  // 一切都从此开始
  init();

  /**
   * 初始化（启动）
   */
  function init() {

    // 绑定表单提交事件
    createForm.addEventListener('submit', function (e) {
      // 防止默认跳转
      e.preventDefault();

      // 拿到管理员输入的姓名、性别、头发长度
      var name = document.querySelector('[name=name]').value;
      var gender = document.querySelector('[name=gender]:checked').value
      var hairLength = document.querySelector('[name=hairLength]').value;

      try {
        // 开始使用builder
        var builder = new StudentBuilder();
        // 分别为其设置属性
        builder.setName(name);
        builder.setGender(gender);
        builder.setHairLength(hairLength);

        // 获取构建好的实例（学生）
        var student = builder.build();
      } catch (e) { // 如果有错误信息，就捕获它，并且弹出错误信息
        alert(e);
      }

      console.log(student);
    });
  }

  function Student() {
  }

  function StudentBuilder() {
    this.student = new Student();
  }

  StudentBuilder.prototype.setName = function (name) {
    this.student.name = name;
  }

  StudentBuilder.prototype.setGender = function (gender) {
    if (gender != '男' && gender != '女')
      throw '好玩不';

    this.student.gender = gender;
  }

  StudentBuilder.prototype.setHairLength = function (hairLength) {
    if (
      (this.student.gender == '男' && hairLength > 1) ||
      (this.student.gender == '女' && hairLength > 25)
    ) throw '回去剪头';

    this.student.hairLength = hairLength;
  }

  StudentBuilder.prototype.build = function () {
    return this.student;
  }
</script>
[: currentTime | date:'mm:ss' :] [: timeLeft | date:'mm:ss' :]

参考示例 - ES6

<form id="create">
    <div>
        姓名：
        <input type="text" name="name" autofocus>
    </div>
    <div>
        性别：
        <input type="radio" name="gender" value="女" checked>女
        <input type="radio" name="gender" value="男">男
    </div>
    <div>
        头发长度：
        <input type="number" name="hairLength">
    </div>
    <button type="submit">创建学生</button>
</form>

<script>
  // <form>元素；为了给它绑定提交事件
  const createForm = document.getElementById('create');

  // 一切都从此开始
  init();

  /**
   * 初始化（启动）
   */
  function init() {

    // 绑定表单提交事件
    createForm.addEventListener('submit', (e) => {
      // 防止默认跳转
      e.preventDefault();

      // 拿到管理员输入的姓名、性别、头发长度
      const name = document.querySelector('[name=name]').value;
      const gender = document.querySelector('[name=gender]:checked').value
      const hairLength = document.querySelector('[name=hairLength]').value;
      let student;

      try {
        // 开始使用builder
        const builder = new StudentBuilder();
        // 分别为其设置属性
        builder.setName(name);
        builder.setGender(gender);
        builder.setHairLength(hairLength);

        // 获取构建好的实例（学生）
        student = builder.build();
      } catch (e) { // 如果有错误信息，就捕获它，并且弹出错误信息
        alert(e);
      }

      console.log(student);
    });
  }

  class Student {
  }

  class StudentBuilder {
    constructor() {
      this.student = new Student();
    }

    setName(name) {
      this.student.name = name;
    }

    setGender(gender) {
      if (gender != '男' && gender != '女')
        throw '好玩不';

      this.student.gender = gender;
    }

    setHairLength(hairLength) {
      if (
        (this.student.gender == '男' && hairLength > 1) ||
        (this.student.gender == '女' && hairLength > 25)
      ) throw '回去剪头';

      this.student.hairLength = hairLength;
    }

    build() {
      return this.student;
    }
  }

</script>
登录后评论