Neutrino-完全な継承とイベントを備えた小さなjsフレームワーク

フロントエンドが小さいプロジェクトでは、バックボーン、エンバー、ノックアウトなどの重いフレームワークを使用することが常に賢明とは限りません。 それにもかかわらず、モデル、継承、およびそれらの間の高品質の相互作用を使用する必要性は残っています。 上記のすべてを行うNeutrinoフレームワークに注目してください。そのサイズは100行のコードを超えません。



フレームワークのフィードバックを歓迎します。

継承とイベントを含む簡単なデモは、 ここで見ることができます 。

クラス作成

クラスを作成するには、 _neutrino.Rootオブジェクトの ' extend 'メソッドを呼び出します。 引数として、メソッドと将来のクラスの静的要素を含むオブジェクトを渡します。

var Model = _n.Root.extend({ //methods and static members });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

extendメソッドは、クラスのコンストラクターを返します。

クラスインスタンスの作成

クラスのインスタンスを作成するには、 新しいキーワードでコンストラクターを呼び出し、引数を1つだけ渡します。 この引数は、必要なすべてのデータを含むオブジェクトでなければなりません。 オブジェクトの内容は、新しく作成されたオブジェクトのデータフィールドに書き込まれます。

 var model = new Model({ id: 1 }); alert(model.data.id); //1
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルト値

データオブジェクトの任意のプロパティに対して、デフォルト値を設定できます。

 var Model = _n.Root.extend({ defaults: { id: "default id" } }); var model = new Model(); alert(model.data.id); //"default 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(); //alert(1 + 2); new Child(); //alert(10 + 2 + 3);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

親メソッドの呼び出し

メソッド内では、最も近い親メソッドを呼び出す2つの方法があります。 現在のメソッドが呼び出されたのと同じパラメーターで親メソッドを呼び出す必要がある場合は、 this._superCall（）;を使用できます。

 ... someMethod: function(a, b, c) { return this._superCall(); //call closest parent method with a,b,c parameters } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

親メソッドを他のパラメーターで呼び出す必要がある場合、最も近い親メソッドへの直接リンクを使用する必要があります-this._superMethod;

 ... someMethod: function(a, b, c) { return this._superMethod(a + 1, b + 1, c + 1); //call closest parent method with changed parameters } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、 this.superCall（）; これはthis._superMethod.apply（this、arguments）の略記です。

イベント

イベントは、モデルの相互作用を整理するための優れた方法です... Neutrinoのモデルは、イベントを生成し、他のモデルのイベントをサブスクライブできます。

イベント生成

モデルでイベントを生成するには、そのfireEventメソッドを呼び出す必要があります。 イベント名eventNameと（オプションで）追加情報を含む情報オブジェクトという2つのパラメーターを渡す必要があります。

  model.fireEvent("item-added", { item: item //some additional information });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

独自のイベントの処理

モデルがイベントを生成すると、独自のonOwnEventメソッドが最初に呼び出され 、 eventNameおよびinfoパラメーターを受け取ります。

  /* Model class initialization*/ ... onOwnEvent: function(eventName, info) { switch(eventName) { case "item-added": //increase items counter //render info.item break; } } ... model.fireEvent("item-added", { item: item });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベント購読

モデルイベントにサブスクライブするには、そのサブスクライブメソッドを呼び出して、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"); //info in handlers will be set to undefined
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モデルメソッドを使用したイベント処理

通常、あるモデルのイベントを他のモデルのメソッドを使用して処理することが必要になります。 このコンテキストと、場合によってはサブスクリプション時に関連するその他のデータを保持するには、もちろんクロージャーを使用できます。

 /* class initialization stuff */ ... 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); //your method onItemEvent will be called with arguments 1, 2, 3, 4. });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

bind（）を使用して、最初に目的のコンテキスト（通常はこれ）を指定し、次に任意の数の追加パラメーター（a、b）を指定します。 パラメータ（c、d）を使用してバインディングの結果関数を呼び出すと、最終的には、パラメータ（a、b、c、d）を使用してメソッドが呼び出されます。



フレームワークのフィードバックを歓迎します。