私は PHP から JavaScript に移行しましたが、これはサーバー側でも使用したいと考えています。どちらの方法でもユーザーに JavaScript を要求するので、JavaScript を多用します。私はオブジェクト指向の方法で使用したいのですが。
MVC を考慮すると、モデルはクライアント側とサーバー側の両方で使用されます。ビューはクライアント側でのみ使用されます。インターフェースは、メインのサイドメニュー、メインのコンテンツ、およびいくつかのウィジェットの複数の部分に分割されています。例として、既に行った部分を取り上げます。メニューは、複数のエントリを持つ 3 つのカテゴリに分割されています。各エントリは、アクション (コンテンツの切り替えなど) が添付されたリンクです。
// menuview:
var self = new View();
var generalMenu = new MenuCategory('generalmenu')
.addEntry(new MenuEntry('overview', new Action()))
.addEntry(new MenuEntry('buildings'))
.addEntry(new MenuEntry('resources'))
// [..more categories..]
self.toData = function() {
return {
id: this.id,
cat: [generalMenu.toData(), infosMenu.toData(), userMenu.toData()]
};
};
現時点では、View はテンプレート パーサー用のデータを作成するための toData() メソッドを備えた複合体です (自作、単純ですが反復をサポートしています)。そして、アクションは作成後に添付されます。フレームワークとして jQuery を使用します。
self.show = function(callback) {
$tpl(this.tpl).parse(this.toData()).lang('main').toHTML(function(html) {
var el = $(html);
el.find('a').click(function (e) {
MenuEntry.actionHandler.execAction(e.target.id);
return false;
});
el.appendTo('#'+self.target);
callback && callback();
});
return this;
};
リンクの反復処理を避けるために、actionhandler を宣言しました。
私はこのソリューションに満足していません。柔軟性が十分ではありません。ビューを実際の複合体のように扱いたいのですが、多くの奇妙な依存関係はありません。また、一部を変更すると、ビュー全体を再解析する必要があります。この例では、実行中にメニューは変更されませんが、インターフェイスの他の部分は変更されるため、これは明らかではありません。
さて、最終的に私の質問にたどり着きます: より良い解決策はありますか? DOM 参照がビュー全体に広がっているように、各メニューエントリには独自の参照と直接アタッチされたアクションがありますか? テンプレートを使用しなくなった場合、どのような柔軟性が失われますか?