スマホサイトのランドスケープ対応(画面横向き対応)をする時間がなくてアイデアで乗り切った話

前回

スマートだと思っていたらスマートじゃなかった

# 追記 全然スマートじゃなかったのでもっとスマートにしました https://qiita.com/angeart/items/29979f67d7a511bbec0e # Ja

やりたいこと

javascriptでMVVMのObservableのような通知を送る実装を書きたい

継承を利用してもっとスマートに

前回は利用クラスのconstructorの中でObservableクラスに包みましたが
よくよく考えたらinstanceofが利用出来ないですし、別物のクラスとして実体化してしまうのでスマートじゃないです
なので継承で利用できるようにしました。

実装

var $ = require('jquery');
class Observable {
  constructor() {
    return new Proxy(this, {
      set: function(obj, prop, value) {
        if (obj[prop] === value) return;
        obj[prop] = value;
        $(obj).trigger("onchanged", {
          prop: prop
        });
      }
    });
  }
}

class Test extends Observable {
  constructor() {
    super();
    $(this).on("onchanged", function(e, data) {
      console.log("changed : " + this[data.prop]);
    });
  }
}

var tester = new Test();

tester.hoge = "hoge";
tester.hoge = "hoge";
tester.hoge = "fuga";

if (tester instanceof Test) {
  console.log("ok");
}

イベントの設定にjQueryを用いています

実行結果

changed : hoge
changed : fuga
ok

repl.it

Powerful and simple online compiler, IDE, interpreter, and REPL. Write, run, save, and sha

関連記事