JSデザインパターン：
デザインパターンを学ぼう：
1.どのようなデザインパターン：特定の問題、簡潔で最適化された処理方式について
市場で使用される2、デザインパターン：単一の実施の形態では、組み合わせモード、ビューアモード、アダプタモード、プロキシモード、工場モード、建設モード
シングルトンを共有し、今日3、及び組み合わせモードオブザーバモード
シングルモードの例：コンストラクタオブジェクトは、一生に一度のインスタンスであるしましょう
単純なアプリケーションのシングルトンパターン： ポップアップ警告（）比較的醜い、非常に貧弱なユーザーエクスペリエンスは、多くのサイトがポップアップ層として、自分自身のdivボックスを書き込むために使用して、独自のプロセスを記述します、一つは、単にウェブサイトを開くことができません一度、あなたはポップアップdiv要素を作成していないたびに、それがシングルトンでない場合は、単にテキストを変更し、divの前に毎回の良いポップをアップ作成することで、毎回、新しいdiv要素を作成することです、シングルトンパターンであれば、すべてのdivの新しい利用のすべての最初は、単にテキストを変更します
Singletonパターンコード：
人=（関数（）{ました
//コンストラクタ実際のボディ
機能Abcの（）{
this.name = 'ジャック
}
Abc.prototype.sayHi =関数（）{}
VARインスタンス= NULL
復帰機能（）{
リターン！インスタンス？（インスタンス=新しいAbcの（））：インスタンス
}
}）（）
だっP1 =新しい人（）
VaRのP2 =新しい人（）
console.log（P1）//は、人のインスタンスであるターゲットであります
console.log（P2）//は、人のインスタンスであるターゲットであります
console.log（P1 === P2）//真
コンバインモード：、一緒にいくつかのコンストラクタと同じ方法を開始するためのマスタースイッチを準備するために、マスタースイッチを開始し、その後、コンストラクタは開始しているために
組み合わせモードとして実装：、インスタンスベアラすべてのコンストラクタの配列を必要とする方法を必要とするアレイにコンテンツを追加する方法を必要とする、アレイのすべての内容を開始することができます
例：ミ：あなたが家を取得すると、あなたがドアを開け、すべてが家を始め、照明、空調のテレビは、カーテンを開け蹴りました...
//起動モードのコンストラクタ
クラスライト{
コンストラクタ（）{}
//このメソッドはコンストラクタを開始します
初期化（） {
console.log（「ライト」）
this.a（）
this.b（）
this.c（）
}
（）{}
B（）{}
C（）{}
}
// 2番目のコンストラクタ
クラステレビ{
コンストラクタ（）{}
初期化（） {
console.log（ 'テレビオープン'）
}
}
クラス航空{
コンストラクタ（）{}
初期化（） {
console.log（「エアコン付きのオープン」）
}
}
//コードの組み合わせパターン
クラス作曲{
コンストラクタ（）{
//各実施例を実施するためのアレイ
this.composeArr = []
}
配列の内部に//追加コンテンツ
{（インスタンス）を追加
this.composeArr.push（インスタンス）
}
//各呼び出しの内部配列の内容
初期化（） {
console.log（「マスタースイッチが起動します」）
this.composeArr.forEach（項目=> item.init（））
}
}
// cがマスタースイッチであります
）C =新しい作曲（でした
//各実行方法は、マスタースイッチにコンテンツを追加することです追加
c.add（新しいライト（））
c.add（新しいテレビ（））
c.add（新しいエア（））
//私は、マスタースイッチを起動した場合
それぞれが同時に開始していると思われるに//コンストラクタ
c.init（）
console.log（C）
Observerパターン：また、パブリッシュ/サブスクライブ・モデルとして知られています
今日、私は2つの角度からObserverパターンを分析します
（1）観測角：
+私たちが子供の頃に教師をヘッドとして
先生、シニアディレクター、ディーンは、一般的な能力は両親と呼ばれていてください
彼らは私たちをスパイされている、と我々は、彼らが違ったと思うことを行うと、彼らはトリガースキルに戻りました
変更がオブザーバを発生した後だったので、彼らはすぐに自分のスキルをトリガ、オブザーバーです
+ オブザーバーです
学生は、自分のステータスを学ぶべきです
自分のステータスは、携帯電話を再生するために変更したら、
すぐに通知があなたを見て、あなたを見ているだろう、それはスキルがトリガされます
+ 目的：
視聴者がデータに変更があった場合に限り、ビューアを見ているましょう
何かをするビューアをしてみましょう
コード：
// 2つのコンストラクタがあります。
//まず、観察
クラスの学生{
コンストラクタ（）{
//学生自身の状態は、彼らが学ばなければなりません
this.state = '学習'
//配列を準備
//学生によって時に押収され、アレイの内部に配置されます
//学ぶために時間からの電話を再生する状態に一度将来的には、すべての教師は、トリガーのスキル内で[]させてください
this.observers = []
}
//メソッド
// 1.の方法は、状態を変化させることができます
SETSTATE（値）{
//自分のステータスを変更することができます
this.state =値
//状態変化と、人々があなたを見て通知する必要があります
this.notify（）
}
// 2.あなた自身の状態を取得します
getStateを（）{
リターンthis.state
}
// 3. [追加ウォッチング
// APPEND同級生はthis.observersに内部の人々を見て
{（観察）を取り付けます
this.observers.push（オブザーバー）
}
各個々の内部// 4.通知this.observersアレイ、状態が変化します
{通知（）
this.observers.forEach（項目=> item.qingjiazhang（this.state））
}
}
//第二に、オブザーバー
クラスオブザーバー{
//コンストラクタは、コンストラクタ本体ES5 =>コンストラクタに相当します
コンストラクタ（名前）{
//私のクラスの先生やグレード取締役または学部長をマークするためにそれを使用します
this.name =名前
}
//この方法は、これらの教師がスキルをトリガすることができるということです
qingjiazhang（状態）{
console.log（ `I $ {this.name}、あなたの$ {状態}ので、私はあなたの両親を聞いてみたいです！`）
}
}
VaRの暁明=新しい学生（）//は、観察者であります
VaRのbanzhuren =新しいオブザーバー（ 'クラス'）//ビューア
//視聴するvar jiaowuzhuren =新しいオブザーバー（ 'ディーン'）
VaRのnianjizhuren =新しいオブザーバー（ 'グレードのディレクター'）//ビューア
//教師は暁明を見てみましょう
xiaoming.attach（banzhuren）
//ディーンは暁明を見てみましょう
xiaoming.attach（jiaowuzhuren）
//シニアディレクター暁明を見てみよう
xiaoming.attach（nianjizhuren）
//暁明の状態変化がxiaoming.notifyを（トリガするとき）
//このxiaoming.observersマイルの内部には、各オブジェクトの両親を呼び出すためにあなたのスキルを配置します
xiaoming.setState（「モバイル遊ぶ」）//オブジェクトが道を呼び出し、この - 誰が誰の目の前に>ポイント
（2）角度をパブリッシュ/サブスクライブ
3つの状態に分け：購読、退会、出版
必要なコンテンツをパブリッシュ/サブスクライブ：メッセージ・ボックスを用意=>メソッドサブスクリプション（メッセージボックスに追加コンテンツ）=> {
サブスクリプションをキャンセルするには：サブスクリプションは、メッセージボックスメソッド内から削除されました
メソッドのイベントを公開：ハンドラを対応するボックス内のニュースが実行されます
}
例：私は本を購入する場合
=>私は本屋がない場合、買いに本屋に行ってきました
=>私はあなたが私を呼び出す必要があり、何かや店員を言うだろう - >イベントにサブスクライブ
=>私は、電話など、実用的なのを待っている家にいました
店員イベントによって発行> - =>本屋にブックたら、あなたは私を呼び出します。
時間=>より長い期間の中央値は、私の友人は私にこの本にこれを与えました
退会イベント> - =>私は私に電話を与える必要はありませんあなたはこの本に来て、店員に告げました
=>私が作った、そしてあなたは私に言う必要はありません
コード：
私が最初に準備ができて、使用する古いですので、//は、いくつかのイベントハンドラを用意します
関数handlerA（E）{にconsole.log（ 'IイベントハンドラhandlerA'、E）}
関数handlerB（E）{にconsole.log（ 'IイベントハンドラhandlerB'、E）}
関数handlerC（E）{にconsole.log（ 'IイベントハンドラhandlerC'、E）}
関数handlerD（E）{にconsole.log（ 'IイベントハンドラhandlerD'、E）}
関数handlerE（E）{にconsole.log（ 'IイベントハンドラhandlerE'、E）}
クラスオブザーバー{
コンストラクタ（）{
//メッセージボックスを準備
this.message = {}
}
//サブスクリプション方式
上の（タイプ、FN）{
IF（！this.message [タイプ]）{
this.message [タイプ] = []
}
this.message [タイプ] .push（FN）
}
//退会する方法
オフ（タイプ、FN）{
（もし！this.message [タイプ]）リターン
//一般的な方法の配列
this.message [タイプ] = this.message .filter [タイプ]（項目=>アイテム！== FN）
}
//メソッドが公開します
EMIT（タイプ、...のarg）{
（もし！this.message [タイプ]）リターン
// A、B、Cは、コンテンツの配信後のすべてのデータは、イベントハンドラ内で使用されます
//引数=>引数
//にconsole.log（引数）
//独自のイベントオブジェクトを組み立てます
VARイベント= {
タイプ：タイプ、
//パラメータ
データ：怒り
}
あなたは、イベントオブジェクトを持って与えるとき//各イベントハンドラを呼び出します
this.message [タイプ] .forEach（項目=>アイテム（イベント））
}
}
//将来的に使用された場合
oがあります=新しいオブザーバー（）
//イベントをサブスクライブ
（ 'クリック'、handlerA）o.on
o.on（ 'クリック'、handlerB）
o.emit（ 'クリック'、 'Hello Worldの'、100、真、{名： 'ジャック'}）
キーワード：デザインモード、シングルモードで、組み合わせモード、オブザーバーパターン