Javascript パターンの例 オブザーバーのパターン_JavaScript スキル

WBOY
リリース: 2016-05-16 18:43:35
オリジナル
949 人が閲覧しました

これらの記事を書いている素晴らしい人はたくさんいますが、その例のほとんどは .NET です。今日は JS の使用例を示したいと思います。興味のある友人は、まず、李輝君兄弟のデザインパターンの章のオブザーバーセクションなど、素晴らしい人々について知ることができます
http://www.cnblogs.com/Terrylee/archive/2006/ 10 /23/Observer_Pattern.html
このパターンについての私自身の理解を話させてください。中心的な考え方は次のとおりです。観測される各オブジェクトはオブジェクト データの変化に応じて変化し、観測されるオブジェクトは次のとおりです。同じ変更動作を制約する場合、この制約は、観察対象物によって観察者に提供される統一インターフェイスです。観察者はデータを変更する動作を開発します。

JS は弱い型指定のスクリプトであり、インターフェイスの制約がある .NET とは異なり、多くの点に同意する必要があります。これ以上は説明せずに、例を直接見てみましょう:
オブザーバー インスタンス

コードをコピーします コードは次のとおりです:

var ObserverObj = { /**//*依存オブジェクト*/
名 : "Max",
姓: "Gan",
ID: 1
}
var ObserverManager = { /**//*オブザーバー*/
オブザーバー:[], /** //*観測オブジェクトセット*/
AddObserver: function(item){/**//*観測オブジェクトを追加*/
this.Observers.push(item);
},
Change: function( obj){ /**//*オブジェクトの動作を変更する*/
for(var item in obj){
ObserverObj[item] = obj[item]
}//データ依存オブジェクトのデータを変更します
for(var i = 0,len = this.Observers.length; i
var item = this.Observers[i]; //オブジェクトの後変更、観測オブジェクトの変更 Display の動作は統一インターフェイスです。
}
}
}
var Header = function(){ /**//*観測オブジェクトのヘッダー*/
this。 Display = function(){
alert(ObserverObj.FirstName);
}
}
var Content = function(){ /**//*オブジェクトの内容を観察する*/
this.Display = function (){
alert (ObserverObj.LastName);
}
}
var Foot = function(){ /**//*観察対象物 足*/
this.Display = function(){
alert(ObserverObj. Id);
}
}

上記の例では、Binding メソッド (AddObserver) のみが提供されています。皆さんちょっと考えてみれば分かりますよ。実際、これらのコードの最終的な目的は、オブザーバーのデータが変更されると、他のオブジェクトもデータの変更に応じて応答することです。 OK、ではバインドしましょう。

コードをコピー コードは次のとおりです:
/***バインドオブザーバーアクション***/
ObserverManager.AddObserver(new Header());
ObserverManager.AddObserver(new Foot());結局毛糸使うの? (愚かな質問です...笑) 例を見てください。
使い方



コードをコピーします
コードは次のとおりです。次のように: 名を変更 姓を変更< ;/a>


サンプル全体を添付します。興味のある友人はダウンロードして見てください。

JavaScript Observer Mode.rar
人がどこまで行けるかは、誰と一緒に旅行するかによって決まります
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート