|
34 | 34 | * [ページ・コントローラ](#ページコントローラ) |
35 | 35 | * [その他](#その他) |
36 | 36 | * [モジュール・パターン](#モジュールパターン) |
37 | | - * [データ・マッパ](#データマッパ) |
| 37 | + * [データ・マッパ](#データマッパ) |
| 38 | + * [外部サービスとしてのオブザーバパターン](#外部サービスとしてのオブザーバパターン) |
38 | 39 | * [References](#references) |
39 | 40 |
|
40 | 41 | <!--endtoc--> |
|
45 | 46 | このドキュメントは読者にデザインやアーキテクチャのパターンに親しんでもらおうとして書かれているものではありませんので、オブジェクト指向やデザイン・パターン、アーキテクチャ・パターンについての基本的な理解をしておくことをおすすめします。 |
46 | 47 | このドキュメントの目的は、AngularJSやAngularJSのシングル・ページ・アプリケーションにどれだけ様々なソフトウェア・デザインやアーキテクチャのパターンが採用されているかを述べることです。 |
47 | 48 |
|
| 49 | +## Translations |
| 50 | + |
| 51 | +- [Main](https://mgechev.github.io/angularjs-in-patterns/) |
| 52 | +- [Russian Translation](http://habrahabr.ru/post/250149/) |
| 53 | + |
48 | 54 | ## はじめに |
49 | 55 |
|
50 | 56 | このドキュメントはAngularJSの概要を簡単に見ていくところから始まります。「AngularJSの概要」ではAngularJSの主なコンポーネントとして、ディレクティブ、フィルタ、コントローラ、サービス、スコープを見ていきます。2番目のセクションでは、フレームワークの内部で利用されているそれぞれのデザインとアーキテクチャのパターンを解説していきます。いくつかのコンポーネントで利用されているパターンがあった場合は、言及していきます。 |
@@ -822,6 +828,8 @@ function ExampleCtrl($scope) { |
822 | 828 |
|
823 | 829 | JavaScriptコミュニティではこのパターンはパブリッシュ/サブスクライブとして知られています。 |
824 | 830 |
|
| 831 | +ベストプラクティスの一例は [Observer Pattern as an External Service](#observer-pattern-as-an-external-service) を確認して下さい。 |
| 832 | + |
825 | 833 | #### チェーン・オブ・レスポンシビリティ |
826 | 834 |
|
827 | 835 | >チェーン・オブ・レスポンシビリティ・パターンはコマンド・オブジェクトと続く一連の処理オブジェクトからなるデザイン・パターンです。それぞれの処理オブジェクトは処理が可能なコマンド・オブジェクトを規定するロジックを持っています。残りの部分は次の処理オブジェクトに連鎖的に渡されます。新しい処理オブジェクトを連鎖の末尾に追加するメカニズムも存在しています。 |
@@ -1086,6 +1094,65 @@ function MainCtrl($scope, User) { |
1086 | 1094 | </div> |
1087 | 1095 | ``` |
1088 | 1096 |
|
| 1097 | +### 外部サービスとしてのオブザーバパターン |
| 1098 | +
|
| 1099 | +##### 概要 |
| 1100 | +
|
| 1101 | +下記の例は[こちら](https://github.com/greglbd/angular-observer-pattern)から持ってきたものです。これはオブザーバパターンを実装したサービスを生成するファクトリです。 正しく使われた場合、`$scope.$watch` より効率的で、$emitや$broadcastよりもスコープやオブジェクトに限定して使えるControllerAsメソッドとよく協調して機能します。 |
| 1102 | +
|
| 1103 | +##### コントローラの例 |
| 1104 | +
|
| 1105 | +イベントのアタッチ、通知、デタッチの例を示します。 |
| 1106 | +
|
| 1107 | +```javascript |
| 1108 | +angular.module('app.controllers') |
| 1109 | + .controller('ObserverExample', ObserverExample); |
| 1110 | +ObserverExample.$inject= ['ObserverService', '$timeout']; |
| 1111 | + |
| 1112 | +function ObserverExample(ObserverService, $timeout) { |
| 1113 | + var vm = this; |
| 1114 | + var id = 'vm1'; |
| 1115 | + |
| 1116 | + ObserverService.attach(callbackFunction, 'let_me_know', id) |
| 1117 | + |
| 1118 | + function callbackFunction(params){ |
| 1119 | + console.log('now i know'); |
| 1120 | + ObserverService.detachByEvent('let_me_know') |
| 1121 | + } |
| 1122 | + |
| 1123 | + $timeout(function(){ |
| 1124 | + ObserverService.notify('let_me_know'); |
| 1125 | + }, 5000); |
| 1126 | +} |
| 1127 | +``` |
| 1128 | +
|
| 1129 | +イベントを削除する別の方法 |
| 1130 | +
|
| 1131 | +```javascript |
| 1132 | +angular.module('app.controllers') |
| 1133 | + .controller('ObserverExample', ObserverExample); |
| 1134 | +ObserverExample.$inject= ['ObserverService', '$timeout', '$scope']; |
| 1135 | + |
| 1136 | +function ObserverExample(ObserverService, $timeout, $scope) { |
| 1137 | + var vm = this; |
| 1138 | + var id = 'vm1'; |
| 1139 | + ObserverService.attach(callbackFunction, 'let_me_know', id) |
| 1140 | + |
| 1141 | + function callbackFunction(params){ |
| 1142 | + console.log('now i know'); |
| 1143 | + } |
| 1144 | + |
| 1145 | + $timeout(function(){ |
| 1146 | + ObserverService.notify('let_me_know'); |
| 1147 | + }, 5000); |
| 1148 | + |
| 1149 | + // コントローラが破棄された時にリスナーを外します |
| 1150 | + $scope.$on('$destroy', function handler() { |
| 1151 | + ObserverService.detachByEvent('let_me_know') |
| 1152 | + }); |
| 1153 | +} |
| 1154 | +``` |
| 1155 | +
|
1089 | 1156 | ## References |
1090 | 1157 |
|
1091 | 1158 | 1. [Wikipedia](https://en.wikipedia.org/wiki). The source of all brief descriptions of the design patterns is wikipedia. |
|
0 commit comments