2

テキストフィールドのテキストが編集されたら(保存が必要であると示すため)文字色を変更するコードを次のように書きました。

let textinput = document.getElementById("textinput");
textinput.oldValue = textinput.value;
textinput.isChanged = false;
Object.defineProperty(textinput, "changed", {
  set: function(changed) {
    this.isChanged = changed;
    this.style.color = (changed ? "#c88" : null);
  }
});

textinput.addEventListener("input", function(anEvent) {
  let textinput = anEvent.target;
  let changed = (textinput.value != textinput.oldValue);
  textinput.changed = changed;
});
#textinput {
  color: #000;
}
<html>
  <body>
    <input id="textinput" type="text" value="Initial Text" />
  </body>
</html>

これは期待通り動作します。入力中のテキストが初期テキストと異なれば文字色は薄い赤色になります。

ただ、コードの記述は次のように改善したいです。


追加のプロパティは役割をネーミングしたプロパティの子にしたい

現在、

let textinput = document.getElementById("textinput");
textinput.oldValue = textinput.value;
textinput.isChanged = false;
...

とあるように、元のオブジェクトに直接新しいプロパティを追加しています。これらは編集状態のために加えたので、次のようにeditingというプロパティの子にまとめたいです。

let textinput = document.getElementById("textinput");
textinput.editing = {
  oldValue: textinput.value,
  isChanged: false
};
...

ここで、セッタchangedの処理に問題が出ます。

Object.defineProperty(textinput.editing, "changed", {
  set: function(changed) {
    this.isChanged = changed;
    // this.style.color = (changed ? "#c88" : null);
  }
});

セッタ関数の内部でthistextinput.editingを指すようになったため、textinput.styleにアクセスできなくなりました。 このセッタ関数内からtextinput.styleにアクセスする方法はありませんか?

1 件の回答 1

2

いくつか思いつくものを挙げます。

Option.1: 親要素を参照するプロパティを定義する

DOMオブジェクトにあるparentElementプロパティのように、「親」となるオブジェクトを循環参照するプロパティは特別珍しくありません。これを用いると次のように書けます。

textinput.editing = {
   // 親を参照、プロパティ名は適当なものを
   __parent: textinput,
   // params
   oldValue: textinput.value,
   isChanged: false,
};
Object.defineProperty(textinput.editing, "changed", {
    set: function(changed) {
        this.isChanged = changed;
        this.__parent.style.color = (changed ? "#c88" : null);
    }
});

Option.2: setter functionのthisを束縛する

ご存知の通りJSにおけるthisは指すものが文脈によって異なりますが、Function.prototype.bindによりthisを適当なオブジェクトに固定した函数を生成できます。これを用いてthistextinputに束縛すると、最初のものに近い形で実装できるでしょう。

textinput.editing = {
    oldValue: textinput.value,
    isChanged: false
};
Object.defineProperty(textinput.editing, "changed", {
    set: function(changed) {
        console.assert(this === textinput); // test
        this.editing.isChanged = changed;
        this.style.color = (changed ? "#c88" : null);
    }.bind(textinput) // <-- setterとして定義されるFunctionのthisは*常に*textinput
});

【参考】DOMオブジェクトを内包してしまう

この問題は、ターゲットとなるオブジェクトをあちこちから参照するためにコードが散逸してしまうことが根本にあります。私であれば、これをまとめるため、たとえばエディタ用のクラスを用意して

const Editor = function (hostElement) {
    this.host = hostElement;
    this.host.addEventListener(...);
};
Object.defineProperty(Editor.prototype, 'changed', {
    set: function (value) {
        this.isChanged = value;
        // update view
        this.host.style.color = changed ? this.config.changedColor : null;
    },
});

// init
const editor1 = new Editor(textinput);

このように対象となるDOMオブジェクトを内包する形で実装すると思います(経験則でこうするとだいたい楽になる)。

そのほか、この種のトラブルは言語機能というより設計に関するものと思われますので、著名なデザインパターンや有名なライブラリのオブジェクトモデルの設計が参考になるかもしれません。

1
  • 今のコードに最適なのはOption.2の.bind()です! Option.1は役割で分類したネーミングの子にただの親の参照が入ってしまうのがなんとなく邪魔かな、と。参考も助かります
    – user26045
    Commented 2018年1月28日 7:51

この質問に回答するには、ログインする必要があります。