100

複雑な単一ページの JS Web アプリケーションをクライアント側でどのように構成する必要がありますか? 具体的には、モデル オブジェクト、UI コンポーネント、コントローラー、およびサーバーの永続性を処理するオブジェクトに関して、アプリケーションをきれいに構造化する方法に興味があります。

最初は MVC が適しているように思えました。しかし、さまざまな深さでネストされた UI コンポーネント (それぞれがモデル データに作用/反応する独自の方法を持ち、それぞれが直接処理する場合としない場合があるイベントを生成する) では、MVC をきれいに適用できるようには見えません。（しかし、そうでない場合は修正してください。）

--

(この質問により、ajax の使用に関する 2 つの提案が得られました。これは、最も単純な 1 ページのアプリ以外には明らかに必要です。)

4

14 に答える 14

35

PureMVC/JSの MVC アーキテクチャは、最も洗練された IMO です。そこから多くのことを学びました。また、Nicholas Zakas によるScalable JavaScript Application Architectureも、クライアント側のアーキテクチャ オプションの調査に役立ちました。

その他の 2 つのヒント

  1. ビュー、フォーカス、および入力管理は、単一ページ Web アプリで特に注意が必要な領域であることがわかりました
  2. また、JS ライブラリを抽象化して、使用するものを変更したり、必要に応じて組み合わせたりするためにドアを開いたままにしておくことも役立つことがわかりました。
于 2010-06-16T14:18:42.500 に答える
13

Dean が共有する Nicholas Zakas のプレゼンテーションは、出発点として非常に適しています。私もしばらくの間、同じ質問に答えるのに苦労していました。いくつかの大規模な Javascript 製品を作成した後、誰かがそれを必要とする場合に備えて、学習内容をリファレンス アーキテクチャとして共有することを考えました。見て：

http://boilerplatejs.org/

次のような一般的な Javascript 開発の問題に対処します。

  • ソリューションの構造化
  • 複雑なモジュール階層の作成
  • 自己完結型の UI コンポーネント
  • イベントベースのモジュール間通信
  • ルーティング、履歴、ブックマーク
  • 単体テスト
  • ローカリゼーション
  • ドキュメント生成

等

于 2012-08-15T14:51:18.787 に答える
11

私がアプリを構築する方法:

  • ExtJS フレームワーク、シングル ページ アプリ、個別の JS ファイルで定義されたすべてのコンポーネント、オンデマンドでロード
  • すべてのコンポーネントは、専用の Web サービス (場合によっては複数) に接続し、データを ExtJS ストアまたは専用のデータ構造にフェッチします。
  • レンダリングには標準の ExtJS コンポーネントが使用されるため、ストアをグリッドにバインドしたり、レコードからフォームをロードしたりできます...

JavaScript フレームワークを選択し、そのベスト プラクティスに従うだけです。私のお気に入りは ExtJS と GWT ですが、YMMV です。

これについて独自のソリューションを展開しないでください。最新の JavaScript フレームワークが行うことを複製するために必要な労力は、あまりにも膨大です。すべてをゼロから構築するよりも、既存のものを適応させる方が常に高速です。

于 2010-06-16T13:12:47.917 に答える
11 
Question - What makes an application complex ?

回答 - 質問自体での「複雑」という言葉の使用。したがって、一般的な傾向として、最初から複雑なソリューションを探す傾向があります。 

Question - What does the word complex means ?

回答 - 不明または部分的に理解されているもの。例 : 重力の理論は、今日でも私にとっては複雑ですが、1655 年にそれを発見したアイザック ニュートン卿にとってはそうではありません。

Question - What tools can I use to deal with complexity ?

答え - 理解と単純さ。

Question - But I understand my application . Its still complex ?

答え - よく考えてください。理解と複雑さは共存しません。巨大で巨大なアプリケーションを理解しているなら、それは小さくて単純なユニットの統合に他ならないことに同意するでしょう。

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

答え - なぜなら、

-> SPA は、アプリケーション開発で行っている多くのことを一からやり直さなければならない、新しく発明されたある種のコア テクノロジーではありません。

-> Web アプリケーションのパフォーマンス、可用性、スケーラビリティ、保守性を向上させる必要性から生まれた概念です。

-> これはかなり新しく特定された設計パターンであるため、設計パターンとしての SPA を理解することは、SPA のアーキテクチャに関する十分な情報に基づいた意思決定を行う上で大いに役立ちます。

-> ルート レベルでは複雑な SPA はありません。アプリケーションのニーズと SPA パターンを理解した後でも、以前とほとんど同じ方法でいくつかの変更と再配置を行ってアプリケーションを作成していることに気付くからです。開発アプローチで。

Question - What about the use of Frameworks ?

回答 - フレームワークは、一般的に識別される一般的なパターンのボイラー プレート コード/ソリューションであるため、アプリケーション開発から x% (アプリケーションに基づく変数) の負荷を取り除くことができますが、特に負荷の高いおよび成長するアプリケーション。アプリケーションの構造とフローを完全に制御できるのは常に良いケースですが、最も重要なのはそのコードです。アプリケーション コードには灰色または黒色の領域があってはなりません。

Question - Can you suggest one of the many approaches to SPA architecture ?

回答 - アプリケーションの性質に基づいて独自のフレームワークを考えてください。アプリケーション コンポーネントを分類します。派生フレームワークに近い既存のフレームワークを探します。見つかった場合はそれを使用し、見つからない場合は独自のフレームワークを使用することをお勧めします。フレームワークを作成することは、前もってかなりの労力を要しますが、長期的にはより良い結果をもたらします。私の SPA フレームワークのいくつかの基本的なコンポーネントは次のとおりです。

  • データ ソース : モデル / モデルのコレクション

  • データを表示するためのマークアップ : テンプレート

  • アプリケーションとの相互作用: イベント

  • 状態のキャプチャとナビゲーション: ルーティング

  • ユーティリティ、ウィジェット、プラグイン : ライブラリ

これが何らかの形で役に立ったかどうか教えてください.SPAアーキテクチャで頑張ってください!!

于 2013-08-28T21:53:24.067 に答える
4

最善の方法は、他のフレームワークの使用例を確認することです。

TodoMVCは、多くの SPA フレームワークを紹介しています。

于 2012-09-18T17:52:27.327 に答える
1

JavaScript MVC フレームワークhttp://javascriptmvc.com/を使用できます

于 2010-06-16T06:53:04.763 に答える
1

私が現在取り組んでいる Web アプリケーションは JQuery を使用しており、大規模な単一ページの Web アプリケーションにはお勧めしません。ほとんどのフレームワーク (Dojo、yahoo、google など) はライブラリで名前空間を使用しますが、JQuery はそうではなく、これは重大な欠点です。

小規模な Web サイトを作成する場合は JQuery で問題ありませんが、大規模なサイトを構築する場合は、利用可能なすべての Javascript フレームワークを調べて、どれが最もニーズに合っているかを判断することをお勧めします。

そして、MVC パターンを javascript/html に適用することをお勧めします。おそらく、javascript のオブジェクト モデルのほとんどは、サーバーから ajax を介して実際に返す json として実行でき、javascirpt は json を使用して html をレンダリングします。

本 Ajax in action を読むことをお勧めします。この本では、知っておく必要のあるほとんどのことをカバーしています。

于 2010-06-17T02:08:21.017 に答える
1

私はSamm.jsをいくつかの1ページアプリケーションで使用しており、大きな成功を収めています

于 2011-06-18T03:46:42.410 に答える
0

または、https://github.com/flosse/scaleAppをご覧ください。

于 2011-02-13T13:19:05.913 に答える
0

私はjQuery MVCを使います

于 2010-06-16T05:27:35.740 に答える
0

http://bennadel.com/projects/cormvc-jquery-framework.htmをチェックしてください。Ben は非常に頭が良く、彼のブログを掘り下げると、CorMVC がどのようにまとめられているか、またその理由についてのすばらしい記事がいくつかあります。

于 2010-06-16T05:33:31.607 に答える
0

代替：ItsNatを見てください

JavaScript で考えますが、Java で同じ DOM API を使用してサーバーで同じようにコーディングします。UI とデータが一緒であるため、サーバーではカスタム クライアント/ブリッジを使用せずにアプリケーションを管理する方がはるかに簡単です。

于 2011-01-06T09:01:44.203 に答える
0

NikaFrameworkを使用すると、単一ページのアプリケーションを作成できます。また、 HTML、 CSS ( SASS )、 JavaScriptを別々のファイルに記述し、最終的にそれらを 1 つの出力ファイルにまとめることもできます。

于 2013-01-05T21:17:10.800 に答える