jQueryでやるView Component

わざわざ語るようなことではないかもしれないが、あんまりそういうの話題になかったのでメモ程度に。

受託なんかで気軽にライブラリを増やせない環境で、View Componentとして振る舞いや状態を切り出したいような場合に

class SomeViewComponent {
  constructor($target) {
    this.$target = $target;
  }

  setValue(str) {
    this.$target.text(str);
  }

  setState(disabled) {
    if (disabled) {
      this.$target.addClass("is-disable");
    } else {
      this.$target.removeClass("is-disable");
    }
  }

  onClick() {
    return new Promise(resolve => {
      this.$target.on("click", ev => resolve(ev));
    });
  }
}

みたいな、必要なDOMインスタンスを食わせて外から値や状態を指定するようなclassを作るようにしている。

使う側は

class SomeHandler {
  constructor(component) {
    this.component = component;
    this.component.onClick().then(ev => this.onComponentClick(ev));
  }

  onComponentClick(ev) {
    console.log("clicked");
  }

  request() {
    fetch("/path/to/json")
      .then(res => res.json())
      .then(data => this.registerData(data));
  }

  registerData(data) {
    // JSONで { "record": "hoge" } みたいなのがくるとして
    this.component.setValue(data.record);
    this.component.setState(data.record === "");
  }
}

みたいな感じ。

jQueryでもView Componentとして定義して責務を上手く扱いましょうという話でした。

---

※ちなみにjQueryじゃなくても良いです