Durandalを使用してアプリケーションを構築していますが、ビューモデル間でいくつかの機能を共有する必要があります。
構築する画面が5つあり、アクティブ化関数で異なるapiエンドポイントを呼び出すことを除いて、すべて実質的に同じ画面ですが、それ以外の場合、ビューとビューモデルは同じになります。
コードの再利用を促進するためにこれを正しく構造化するために従うべきパターンはありますか?
Durandalを使用してアプリケーションを構築していますが、ビューモデル間でいくつかの機能を共有する必要があります。
構築する画面が5つあり、アクティブ化関数で異なるapiエンドポイントを呼び出すことを除いて、すべて実質的に同じ画面ですが、それ以外の場合、ビューとビューモデルは同じになります。
コードの再利用を促進するためにこれを正しく構造化するために従うべきパターンはありますか?
ビューとビューモデルが異なるAPIアクションを呼び出すことを除いて同一である場合、ルートの一部としてパラメーターを取り込むだけではどうでしょうか。次に、アクティブ化関数で、パラメーターをオンに切り替えることができます。[ http:// site / page / subtype]のように、URLが関連するようにルート値を指定できます。ここで、サブタイプはパラメーターです(数値を使用する代わりに)
継承に関しては、必要な機能によっては、JavaScriptの継承を行う方法がたくさんあるため、少し混乱する可能性があります。base2やPrototypeなどのライブラリによって提供されるフル機能の継承モデルがいくつかあります。 John Resigには、私がうまく使用した継承モデルもあります。
一般的に、JSの継承に関しては、より単純なソリューションに固執することを好みます。継承機能のほぼ完全なセットが必要な場合は、それらのライブラリを検討することをお勧めします。基本クラスから一連のプロパティと関数にアクセスすることだけを本当に気にしている場合は、ビューモデルを関数として定義し、関数のプロトタイプを目的の基本クラスに置き換えるだけでうまくいく可能性があります。継承に関する適切な情報については、Mozillaの開発者向けドキュメントを参照してください。
サンプルは次のとおりです。
//viewModelBase
define(function (require) {
"use strict";
function _ctor() {
var baseProperty = "Hello from base";
function baseFunction() {
console.log("Hello from base function");
}
//exports
this.baseProperty = baseProperty;
this.baseFunction = baseFunction;
};
//return an instance of the view model (singleton)
return new _ctor();
});
//view model that inherits from viewModelBase
define(function (require) {
"use strict";
function _ctor() {
var property1 = "my property value";
function activate() {
//add start up logic here, and return true, false, or a promise()
return true;
}
//exports
this.activate = activate;
this.property1 = property1;
};
//set the "base"
var _base = require("viewModelBase");
_ctor.prototype = _base;
_ctor.prototype.constructor = _ctor;
//return an instance of the view model (singleton)
return new _ctor();
});
この例はすべて、事実上シングルトンになることを覚えておいてください(つまり、必要な回数に関係なく、同じインスタンスしか取得できません)。
一時的な(シングルトンではない)場合は、_ctorを返します。次に、required()した後、新しいインスタンスをインスタンス化する必要があります。
もう1つの注意点として、一般に、関数はコンストラクター関数自体ではなく、プロトタイプで定義する必要があります。理由の詳細については、このリンクを参照してください。この例ではインスタンスが1つしかないため、これは重要なポイントです。したがって、関数はコンストラクター内にあり、読みやすさを向上させ、プライベート変数と関数にアクセスする機能も備えています。