knockout.jsとは何ですか?
ノックアウトは優れたJavaScriptライブラリで、クリーンできちんとした基礎となるデータモデルを使用して、優れた表示および編集機能を備えたユーザーインターフェイスリッチテキストを作成するのに役立ちます。ローカルUIコンテンツを自動的に更新する必要がある場合(たとえば、ユーザーの動作の変更や外部データソースの変更に応じて)、KOは簡単に実装でき、非常に簡単にメンテナンスできます。
1。メインカテゴリ関係図
ii。クラスの責任
2.1。観察可能(通常の監視オブジェクトクラス)
観察可能な内部実装(その他は関数です):
1.最初にObservableという名前のFNを宣言します(これはクラスと言えます)
2. KOユニークな最新バリュープロパティを追加して、パラメーターで渡された値を保存します
3.ネイティブの__Proto__属性がサポートされている場合、HaSownPropertyを使用して、属性が継承するために存在するかどうかを判断し、__Proto__コードを判断します(UTILSクラスで)
var cansetPrototype =({__proto__:[]} instanceof array);
4. ko.subscribebableのfn属性のinitメソッドは、観察可能を初期化します(主にサブスクリプションを追加し、関連属性を公開)
5.観測可能は、観察可能なfn関連属性とメソッドを継承します(観察可能なfnには、値が変更され、値が変更された後に実行戦略が含まれます)
// ObservablesVarのプロトタイプを定義するObservableFn = {'equalityComparer':valuesareprimitiveandequal、peek:function(){return this [overvablelatestvalue]; }、value -hasmutated:function(){this ['notifysubscribers'](this [overvablelatestvalue]); }、valueWillMutate:function(){this ['notifysubscribers'](this [overvablelatestvalue]、 'beforechange'); }};6.観察可能な方法の実装を返します(着信パラメーターが設定されている場合、パラメーターがない場合、取得しています)
7.このクラスは、hasprototype(指定されたインスタンスにこのプロパティがあるかどうかを判断するため)も提供します。
2.2。 ObservableArray(配列監視オブジェクトクラス)
1.最初にko.observableメソッドを実行して、オブジェクトを監視可能なクラス(名前付き結果)にします。
2.次に、ko.observablearrayのfnオブジェクトを展開します(ko.observablearrayのfnは、削除、プッシュなどのアレイ関連操作方法を書き直します。)
3.拡張メソッドを拡張します(extends(trackArraychanages、詳細については2.5を参照)
4。拡張結果オブジェクトを返します。
ko.observablearray = function(initialValues){initialValues = initialValues || []; if(typeof initialValues!= 'object' ||!( 'length' in initialValues))新しいエラー(「観測可能な配列を初期化するときに渡された引数は、アレイ、またはnull、または未定義である必要があります。 result.extend({'trackArrayChanges':true});};2.3。購読(オブジェクトクラスを購読)
1。購読と公開のための機能モジュールは、観察可能および観察可能なベースクラスです。
2。ここには、オブジェクトの変更の監視をサブスクライブするために使用されるサブクリブルメソッドがあります。開発のために、この継承ポイントを使用して入力できます。
サブスクライブ:function(callback、callbacktarget、event){var self = this; event = event || DefaultEvent; var BoundCallback = callbackTarget? callback.bind(callbacktarget):callback; var subscription = new ko.subscription(self、boundcallback、function(){ko.utils.arrayremoveitem(self._subscriptions [event]、subscription); if(self.aftersubscriptionRemove)self.aftersubsremove(eave); (self.beforesubscriptionAdd)self.beforesubscriptionAdd(event); if(!self._subscriptions [event])self._subscriptions [event] = []; self._subscriptions [event] .push(subscription); return subscription;}3.ExtendEnd:このメソッドは、Extendsメソッド(ObservableArray.Changetracking Extensionクラスなど)によって追加された拡張機能クラスを追加するために使用されます。
4.監視オブジェクトが登録された直後に、拡張機能の拡張方法が実行されます。渡されるパラメーターは、ターゲット(現在のオブジェクト)とオプション(拡張機能が呼び出されたときに渡されるパラメーター)です。
5.ExtendEndは、拡張機能をインストールする方法であり、拡張機能内のコードをすぐに実行します。
2.4。拡張(拡張監視オブジェクトクラス)
1.KOのデフォルト拡張コレクション
2。拡張機能をインストールするApplyExtendersメソッドを提供します
function applyextenders(requestedextenders){var target = this; if(requestedextenders){ko.utils.objectforeach(requestedextenders、function(key、value){var extenderhandler = ko.extenders [key]; if(typeof extenderhandler == 'function'){ターゲット=ターゲット;ターゲット;2.5。 observablearray.changetracking(拡張監視オブジェクトの特定の実装)
1.この拡張機能は主に配列の変更の監視を実装し、アレイの違いを計算し、関連するサブスクリプションイベントをトリガーします
2. cachediffforknownoperation:違いの比較のための配列のキャッシュ操作
3. beforesubscriptionAddおよびaftersubscriptionRemove関連のサブスクリプション(まだ完全には理解されていません)。
上記は、編集者が紹介したノックアウトソースコード分析の詳細な分析です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!