フロントエンドが小さいプロジェクトでは、バックボーン、エンバー、ノックアウトなどの重いフレームワークを使用することが常に賢明とは限りません。 それにもかかわらず、モデル、継承、およびそれらの間の高品質の相互作用を使用する必要性は残っています。 上記のすべてを行う
Neutrinoフレームワークに注目してください。そのサイズは100行のコードを超えません。
フレームワークのフィードバックを歓迎します。
継承とイベントを含む簡単なデモは、
ここで見ることができ
ます 。
クラス作成
クラスを作成するには、
_neutrino.Rootオブジェクトの '
extend 'メソッドを
呼び出します。 引数として、メソッドと将来のクラスの静的要素を含むオブジェクトを渡します。
var Model = _n.Root.extend({
extendメソッドは、クラスのコンストラクターを返します。
クラスインスタンスの作成
クラスのインスタンスを作成するには、
新しいキーワードでコンストラクターを呼び出し、引数を1つだけ渡します。 この引数は、必要なすべてのデータを含むオブジェクトでなければなりません。 オブジェクトの内容は、新しく作成されたオブジェクトの
データフィールドに書き込まれます。
var model = new Model({ id: 1 }); alert(model.data.id);
デフォルト値
データオブジェクトの任意のプロパティに対して、デフォルト値を設定できます。
var Model = _n.Root.extend({ defaults: { id: "default id" } }); var model = new Model(); alert(model.data.id);
コンストラクター
任意のクラスに擬似コンストラクタを指定できます。 疑似コンストラクター関数は、
constructと呼ば
れます。 その振る舞いは通常のコンストラクターと完全に同等です-オブジェクトの作成時に呼び出され、
new演算子の結果として返される値を返すことができます。 擬似コンストラクタコードでは、
this._superCall();を使用して親メソッドを呼び出す必要があります
。 var Model = _n.Root.extend({ construct: function() { this._superCall(); alert("Hello world"); } });
継承
ニュートリノは完全な継承をサポートしています:
- 基本クラスのextendメソッドを使用して、子クラスを作成できます。
- クラスのコンストラクターには、親クラスのコンストラクターを直接指すスーパークラスプロパティが含まれます。
- どのメソッドからでも、最も近い利用可能な親メソッドを簡単に呼び出すことができます。
- デフォルトフィールドは、すべての親データとともに自動的に点滅します。
簡単な例を見てみましょう:
var Parent = _n.Root.extend({ defaults: { a: 1, b: 2 }, construct: function() { this._superCall(); alert(this.getSum()); }, getSum: function() { return this.data.a + this.data.b; } }); var Child = Parent.extend({ defaults: { a: 10, c: 3 }, getSum: function() { return this.superCall() + this.data.c; } }); new Parent();
親メソッドの呼び出し
メソッド内では、最も近い親メソッドを呼び出す2つの方法があります。 現在のメソッドが呼び出されたのと同じパラメーターで親メソッドを呼び出す必要がある場合は、
this._superCall();を使用できます
。 ... someMethod: function(a, b, c) { return this._superCall();
親メソッドを他のパラメーターで呼び出す必要がある場合、最も近い親メソッドへの直接リンクを使用する必要があります
-this._superMethod; ... someMethod: function(a, b, c) { return this._superMethod(a + 1, b + 1, c + 1);
実際、
this.superCall(); これは
this._superMethod.apply(this、arguments)の略記です。
イベント
イベントは、モデルの相互作用を整理するための優れた方法です... Neutrinoのモデルは、イベントを生成し、他のモデルのイベントをサブスクライブできます。
イベント生成
モデルでイベントを生成するには、その
fireEventメソッドを呼び出す必要があります。 イベント名
eventNameと(オプションで)追加情報を含む
情報オブジェクトという2つのパラメーターを渡す必要があります。
model.fireEvent("item-added", { item: item
独自のイベントの処理
モデルがイベントを生成すると、独自の
onOwnEventメソッドが
最初に呼び出され 、
eventNameおよび
infoパラメーターを受け取ります。
... onOwnEvent: function(eventName, info) { switch(eventName) { case "item-added":
イベント購読
モデルイベントにサブスクライブするには、その
サブスクライブメソッドを呼び出して、2つのパラメーターを渡す必要があります-ハンドラー関数とサブスクライブするイベントの名前です。 イベントの名前を指定しない場合(またはイベントの名前としてアスタリスク
*を渡す場合)、ハンドラーは、イベントが生成されるときに呼び出されます。そうでない場合は、サブスクライブしたイベントが生成されるときにのみ呼び出されます。
当然、コールバックは呼び出されたときに
eventNameおよび
infoパラメーターを受け取ります。
function commonHandler(eventName, info) { switch(eventName) { case "e1": alert("e1 fired"); break; } } function specificHandler(eventName, info) { alert("e1 fired"); } model.subscribe(commonHandler); model.subscribe(specificHandler, "e1"); model.fireEvent("e1");
モデルメソッドを使用したイベント処理
通常、あるモデルのイベントを他のモデルのメソッドを使用して処理することが必要になります。
このコンテキストと、場合によってはサブスクリプション時に関連するその他のデータを保持するには、もちろんクロージャーを使用できます。
... processItem: function(item) { var self = this; item.subscribe(function(eventName, info) { self.onItemEvent(eventName, info, item); }); }, onItemEvent: function(item, eventName, info) { ... }
ただし、
Neutrinoはこれを簡単に行う方法を提供します。
item.subscribe(this.onItemEvent.bind(this, item));
関数bind()はNeutrinoの各モデルメソッドにアタッチされ、正しい
thisコンテキストと追加のパラメーターを使用してメソッドを呼び出します。
簡単な例は、理解を明確にするのに役立ちます。
var binding = this.onItemEvent.bind(this, 1, 2)); setTimeout(function() { binding(3, 4);
bind()を使用して、最初に目的のコンテキスト(通常はこれ)を指定し、次に任意の数の追加パラメーター(a、b)を指定します。 パラメータ(c、d)を使用してバインディングの結果関数を呼び出すと、最終的には、パラメータ(a、b、c、d)を使用してメソッドが呼び出されます。
フレームワークのフィードバックを歓迎します。