著者：ナイフの兄（朱）
序文：MVVMモード略しモデルビューのviewmodelモードである、単/双方向データは、結合を達成するようにDOMイベントのうち複合体からフロントエンド開発者、プロセス容易データとUIとの間の結合。本論文では、VUE双方向のデータバインディング、コアコードの解析やアイデアは、ライブラリのデザインをMVVMを開始します。
1、照合、分析のための需要
要件：
-
データUIたら、更新データは、変化に対応します
- 対応するデータを変更するには、トリガ・イベントを変更するためのUIのUI
分析：
-
指定されたUIをリフレッシュするためのDOMノードによって得られたさわやかな機能命令。
-
ブリッジの実装は、アソシエイトに必要なリフレッシュ機能やデータをみましょう。
-
ブリッジングの方法によるデータリフレッシュ関数呼び出し後に変更されたデータの変更を監視します。
- UIの変更は、DOMイベント固有のデータの対応する変化をトリガします。
2、アイデアの実現
-
オブザーバを達成するために、データを再定義し、聞くために、データに変更データゲッターの各プロパティのセッターを高めます。
-
コンパイル、走査テンプレートテンプレート、各ノードは、DOMの抽出指示情報を得ます。
-
指令は指令に対応した指示情報は、インスタンスをインスタンス化されることで、指令機能の異なる種類が異なるリフレッシュ更新を持って、実現しています。
- 更新機能のディレクティブプロパティを持つリスナー関数は、データ変更が後にビューを更新達成するために、1人の観察者にいずれかを実行するように、ウォッチャーを実現します。
図3に示すように、モジュール分割
MVVMは現在、オブザーバーとして分類され、コンパイル、ディレクティブ、4つのモジュールをウォッチャています。
図4に示すように、データ監視モジュールオブザーバ
ES5仕様object.definePropertyの方法を介してデータを達成するためにリッスンします。
5、アイデアの実現
次の属性が設定されていると再帰的にトラバースデータは、すべてのデータは、すべての属性の傍受を達成するための方法を取得し、結合されます。
注：オブジェクトは、属性構築された配列を含むことができ、配列は、内部データを変更するには、プッシュ、ポップ、スプライスなどがあります。
このアプローチでは、プロトタイプチェーンの配列を変更するプロトタイプチェーン内にカスタムプッシュの層を追加し、ポップすることです、傍受を行うためのスプライス方法、私たち自身のコールバック関数と内部のこれらの方法で、その後、プッシュネイティブ、ポップ、スプライスを呼び出します他の方法。
export function defineProperty(obj, prop, val) {
if (prop == '__observe__') {
return;
}
val = val || obj[prop];
var dep = new Dep();
obj.__observe__ = dep;
var childDep = addObserve(val);
Object.defineProperty(obj, prop, {
get: function() {
var target = Dep.target;
if (target) {
dep.addSub(target);
if (childDep) {
childDep.addSub(target);
}
}
return val;
},
set: function(newVal) {
if(newVal!=val){
val = newVal;
dep.notify();
}
}
});
}6、コンパイルされたモジュールコンパイラ
アイデアの実現：
-
ドムは、それが文書フラグメントのFRAGに格納され、再びステンシルテンプレートを通過します
- FRAGを横断する、属性を介して情報ノード属性取得し、正規表現を介して濾過指示情報は、属性情報を、ひいては文書ノードと要素ノードを取得します
var complieTemplate = function (nodes, model) {
if ((nodes.nodeType == 1 || nodes.nodeType == 11) && !isScript(nodes)) {
paserNode(model, nodes);
if (nodes.hasChildNodes()) {
nodes.childNodes.forEach(node=> {
complieTemplate(node, model);
})
}
}
};7、コマンドモジュールディレクティブ
指示情報など：V-テキスト、V-ため、Vモデルなどが挙げられます。
機能アップデート手順を初期化し、リフレッシュするために必要な各行動指令情報が異なる場合がありますので、我々はそれが別のモジュールを抽象化しません。もちろん、このような公共の財産、インスタンス化された統一ウォッチャー、アンバインドとして、また共通があります。
関連する更新機能命令は、次のように単純なVTEXT命令として、特定の更新機能のUIをレンダリングする方法を定義するには：
vt.update = function (textContent) {
this.el.textContent = textContent;
};9、図の構造。
）
図9に示すように、データのサブスクリプションモジュールウォッチャー
ウォッチャー機能は、ディレクティブの仲間とオブザーバモジュールを可能にすることです。2つのことを行うための初期化時間：
-
更新機能モジュールパラメータは、ディレクティブを通過し、そして独自のupdate属性を格納する場合。
- getValue呼び出し、さらに観察者に定義された関数のゲッター特性をトリガする前に、対象データの特定のプロパティ値を取得するようになっています。
関数で定義されているDEPのDefineProperty変数はゲッターがDepend.targetの存在によって決定され、この場合、放出されない閉鎖状態DEP変数の参照セッターとゲッター機能を有しているので、加入者によって発行ウォッチャーを取得します誰が保管しDEP。それぞれの時にトリガdep.notify（）DEP変数のユニークな属性データ、加入者はウォッチャ全ての情報の記録は、プロパティの変更と、setter関数を呼び出している、すべての加入ウォッチャーに通知し、その後、すべてを実行しますリフレッシュ機能、最後に更新され、指定UIに関連付けられた属性。
コードのウォッチャ初期化部：
Depend.target = this;
this.value = this.getValue();
Depend.target = null;observer.jsコードは、属性定義：
export function defineProperty(obj, prop, val) {
if (prop == '__observe__') {
return;
}
val = val || obj[prop];
var dep = new Dep();
obj.__observe__ = dep;
var childDep = addObserve(val);
Object.defineProperty(obj, prop, {
get: function() {
var target = Dep.target;
if (target) {
dep.addSub(target);
if (childDep) {
childDep.addSub(target);
}
}
return val;
},
set: function(newVal) {
if(newVal!=val){
val = newVal;
dep.notify();
}
}
});
}10、フローチャート
11、要約
温首相の基本的な需要MVVMライブラリソート、分割、および結合双方向の全体的な機能を実現するために達成するために、スプリット・モジュールを達成するための一つ一つが、当然のことながら、現在市場に出回っているMVVMライブラリ関数はこれを停止しません、これはただの個人的な見解に名前を付けることですコアコード。問題は、アイデアと実現にある場合、また、私を修正してください、お読みいただきありがとうございました！
オリジナルコード：https://github.com/laughing-pic-zhu/mvvm
アクセスすることができますより多くの学生が勉強したいいくつかの蘭のコミュニティを〜、と私たちは学ぶために一緒に議論することができます