ブレイクスルーjavascript

読み始めた。
初めの章のvalidateのやつを自分なりにリファクタリング。

class AppModel {
  constructor() {
    this.val = "";
    this.validateList = {
      required: true,
      maxlength: 8,
      minlength: 4
    };
  }

  validate(input) {
    if (this.val === input) return;
    this.val = input;
    this.errors = [];
    for (let [key, value] of Object.entries(this.validateList)) {
      if (value && !this[key](value)) this.errors.push(key);
    }
  }

  //validateでboolen型を返すだけ
  required() {
    return this.val !== "";
  }

  maxlength(num) {
    return num >= this.val.length;
  }

  minlength(num) {
    return num <= this.val.length;
  }
}

class AppView {
  constructor(el) {
    this.$el = $(el);
    this.$list = this.$el.next().children();
    this.model = new AppModel();
    this.$el.on("keyup", (e) => {
      this.onKeyup(e);
    });
    //ドルを付けるとjQuert [0]を付けるとDOMになる
    // this.el = this.$el[0];
    // this.list = this.$list[0];
  }

  //キーボードが押されたらvalidateを実行
  onKeyup(e) {
    var inputValue = e.currentTarget.value;
    this.model.validate(inputValue);
    this.model.errors.length ? this.onInvalid() : this.onValid();
  }

  //$listはエラーのプロンプトが入ってる
  //まず、全部非表示にして、エラーのものだけ表示する
  onValid() {
    this.$el.removeClass("error");
    this.$list.hide();
  }

  onInvalid() {
    this.$el.addClass("error");
    this.$list.hide();
    this.model.errors.forEach(val => {
      this.$list.filter(`[data-error="${val}"]`).show();
    });
  }
}

document.querySelectorAll("input").forEach(input => {
  new AppView(input);
});