クラスAsarua {
//オブジェクトがインスタンス化されたパラメータを渡します
コンストラクタ（オプション）{
。この$データ= options.data。
// DOMを搭載しなさい
このエル= document.querySelector（options.el）を$。
この$メソッド=のoptions.methods。
この$オプション=オプション。
//すべてのサブスクライバを格納するコンテナを定義します
this.observable = {};
this.initObservable（）;
this.addObservable（）;
this.observe（）;
}
//コンテナを初期化します
initObservable（）{
{（私はこれにしましょう。$データ）について
this.observable [I] = [];
}
}
//サブスクリプションを追加
addObservable（）{
//以下のすべての現在のレベルのサブノードを取得します。
constのノード=この$ el.children。
中には、いくつかの奇妙な事を横断することがある場合は、//、forループを使用します。
{（; iがnodes.lengthを<I ++は、I = 0せて）のために
//モデルのカスタム属性があるか否かを判断します
IF（ノード[i]が.hasAttribute（ "モデル"））{
//要素モデルのプロパティの存在を取得します。
CONSTノード=ノード[i]は、
//そのプロパティのサブスクリプションがあり、この要素モデルの値を取得します。
CONSTプロップ= node.getAttribute（「モデル」）。
//リフレッシュ方法つつに添加しており、観察者のインスタンスを容器に加え、初期化後に容器内にこのプロパティを発見
this.observable [支柱] .push（新しいウォッチャー（ノード、 "値"、この、プロプ））。
入力イベントは、この発生した場合。変更で、この属性$データの値、トリガインターセプタながら、インターセプタを更新するためにupdateメソッドを呼び出す//、リスニングを開始
node.addEventListener（ "入力"、（）=> {
。この$データ[小道具] = node.value。
}）
}。
IF（ノード[i]が.hasAttribute（ "テキスト"））{
CONSTノード=ノード[i]は、
CONSTプロップ= node.getAttribute（「テキスト」）。
this.observable [支柱] .push（新しいウォッチャー（ノード "のinnerText"、この、プロップ））。
}。
IF（ノード[i]が.hasAttribute（ "-HTML"））{
CONSTノード=ノード[i]は、
CONSTプロップ= node.getAttribute（ "-HTML"）。
this.observable [支柱] .push（新しいウォッチャー（ノード、 "innerHTMLの"、この、プロップ））。
}。
そこ@click場合は範囲がこれを指すようにしながら、//、そして、クリックされたときに呼び出さ$メソッドに。メソッド、現在の要素のためにこれをイベントリスナーを追加します。$データ、それはこれを渡すことができるように。$データへのアクセスをプロパティ
もし（ノード[i]が.hasAttribute（ "@クリックしてください"））{
CONSTノード=ノード[i]は、
constの小道具= node.getAttribute（ "@クリック"）;
node.addEventListener（ "クリック"、（）=> {
。この$方法[小道具]は.call（この$データ。）;
}）
}。
}
}
観察する（） {
constの_this =この;
//ループコンテナは、各インターセプタに属性を追加します
{（私はこれにしましょう。$データ）について
_valueを聞かせて=この$データ[i]と。
//それが設定されている場合、直接、戻り値は、最初に新しい値に古い値に置き換えられます、異なる場合、かどうかを以前と同じと判断した場合は、$データに。各プロパティを、これを傍受し、更新方法は、リアルタイムの更新と呼ばれています
Object.defineProperty（この。$データ、I、{
取得する（） {
_valueを返します。
}、
集合（V）{
もし（_value！== V）{
_value = V;
_this.observable [I] .forEach（V => v.update（））
}
}
}）
}
}
}
クラスウォッチャー{
// 4つのパラメータはプロパティをリスニング、例えば上記クラスの属性を更新するために、現在の要素を更新するために、受信しました
ビルダー（何を、およそ、年、ATTR）{
this.elは=。
this.prop =小道具。
this.anyはどんな=。
this.attr = ATTR。
this.update（）;
}
現在の要素の現在の値が属性の属性データの現在の値となるように//更新関数は、呼び出されます
更新（）{
this.el [this.prop] = this.any $データ[this.attr]。
}
}
//まず、結果のインスタンス化のすべてのプロパティは、各データ・オプションは、サブスクリプションの俳優を作成しています。
//次の属性は、データが存在する場合、それは属性値に加算されるカスタムバインディング双方向があるか否かを判断します
//対応する加入者のコンテナ。結合したDOMをながら、その特性が変更されると、呼び出されたときに変更された値、ならびに現在のプロパティ値の現在の値を同期させる方法及びDOM内のデータを直接DOMを変更できるようにするために渡されます値。
あなたが変更のデータの値にDOMの値を変更した場合、//そして、動向を観察し、イベントリスナーを追加します
//データ内のすべてのプロパティのためのインターセプタを追加し、それが設定されている場合、着信データ値が値に設定された後、データの現在値の値は、返された場合、すべてのサブスクリプションの現在のプロパティのコンテナと呼ばれますアップデートの方法は、
//すべてこの値のデータDOMを使用するために割り当てられた変更後のデータの値は、そのプロパティを変更します
二段階に話すそう多くの事
最初のステップは、入力された値は、加入者の固有の値に変更を加え
2.現在のすべての加入者がインターセプタを変更するには、プロパティの値の変化後の値そのものを追加します。