4

jQuery Mobile を使用して Web アプリを作成しました。現在は 9 ページで、非常に扱いにくくなっています。jQuery Mobile は、すべての「ページ」を同じページにバンドルして、ネイティブ アプリの応答性をシミュレートします。

各ページを個別の iFrame として実装することを考えました。最初のページにはすべての iFrame/ページが含まれ、それぞれがプリロードされます。ビューポートに適切なページを表示することで、JQM のようにページ遷移が発生します。データは、iFrame メッセージングを介してマスター ページと子ページの間で受け渡されます。これは、次の理由から有利であると考えています。

(1) 追加のフレームワークは必要ありません。

(2) Web アプリは 15 ページ/iFrame を超えて拡張されません。と

(3) Web アプリは、モバイル ブラウザーではなく、ネイティブ アプリ コンテナー (つまり、PhoneGap) を介してアクセスされます。

また、フレームワークも検討しています。SOなどに関する調査から、Backbone と Spine は、大規模な JavaScript プロジェクトを構築するための 2 つの優れたオプションであるように思われます。

彼らが特に JQM プロジェクトをどれだけうまく管理しているかはあまり明確ではありません。

私たちは次の 3 つのことを探しています。

1)大規模なJQMプロジェクトを構築するためのオプションとフレームワークは何ですか(理想的または最悪の場合、MVC、モノリシックファイルに対する改善)?

2) JQM で Backbone、Spine、またはその他の JS フレームワークを使用したことがある場合は、好きな点/嫌いな点を共有してください。

3) 独自の機能を構築することを意味するという事実以外に、私たちの iFrame アーキテクチャに明らかな問題はありますか?

4

3 に答える 3

3

特に軽量で簡単なフレームワークが多数存在する場合、iFrame の使用は最適ではないようです。

JqueryMobile には独自のルーターがあります。私はそれが好きではありませんでした-ハッシュタグを使用すると、必要なハッシュを持つページがDOMにある必要があります。もちろん、ページを動的にロードすることは可能ですが、とにかく新しいページを作成したり、ページ コンテナーに追加したりする必要があります。このようなページの操作方法は私には適しておらず、DOM をオーバーロードします。

また、JQM を使用すると、Jquery テンプレートを使用することができます。これらは、渡されたデータを使用して後で解析できるページまたは別の HTML コードを保存できます。これらのテンプレートと解析メカニズムは、非常にシンプルで使いやすいように思えました。ただし、複素数のデータを解析する必要がある場合は適していません。また、パーシャルはサポートされていません (ASP.NET MVC のように)。つまり、ヘッダーとフッターを 1 つのファイルだけに保存​​して、ページごとにパーシャルとして読み込むことはできません。各ページに複製する必要があります。

このフレームワークの残りの機能は素晴らしいです。多くのコントロール、テーマ設定など。UI 作成のリーダーであるように思われます - 疑いの余地はありません。唯一気に入らなかったのは、JQM ページ遷移です。

次にバックボーンについて。MVC パターンを使用してアプリを作成するための強力で簡単なフレームワークです。実際、実際の MVC を作成できる JS フレームワークはありません。しかし、基本は真実です。モデル、ビュー、およびコントローラー (ルーター)。新しいルートの簡単な作成、優れたドキュメント、および GitHub の多数のサンプル。ビューとモデルを操作する強力なメカニズム - サイトにはすべての機能が表示されます。

Backbone + JQM の使用を提案します。ただし、この場合、これらのフレームワーク間の競合を避けるために、ルーターの 1 つを無効にする必要があります。一人だけ残ればいい。

ページングについて。使用可能なすべてのページを DOM に格納する必要はありません。content 要素を含む JQM ページを 1 つだけ作成し、動的に更新できます。HTML をテンプレートに保存し、サービスからデータを取得し、テンプレートを解析し、コンテンツ要素を更新します。バックボーンには依存関係があります - アンダースコア。このため、一見、Backbone を使用したくなかったのです。しかし、アンダースコアは多くの便利な機能を備えた強力なフレームワークです。そしてそのうちの 1 つは、テンプレートです。解析のための強力な解析メカニズム - ループ、js 関数、テンプレート内の変数の作成などをサポートします。パーシャルもサポートしませんが、常に新しいページを作成する必要がないため、必要ありません。

アプリのページ数が少ないとき、すべての js ファイル (フレームワーク、ヘルパー、サービス呼び出し元、ビュー、モデルなど) を読み込み、アンダースコア テンプレートを HTML ページに保存しました。しかし、そのようなコードをサポートすることは恐ろしいことです。HTMLページが巨大化。RequireJS フレームワークはこの問題を解決できます。JS ファイルだけでなく、テキスト テンプレート (テキスト プラグインを使用) も読み込むことができます。この場合のすべてのコードはモジュラーになります。多くのサンプルで十分に文書化されているため、どのように機能するかを確認するのに問題はありません。ところで、Backbone の最新バージョンは公式には AMD をサポートしていません。ただし、RequireJS を使用してロードすることは可能です。

また、コンテンツのスクロールについても考えてください。それについては多くは書きません。iScroll フレームワークを見てください。

したがって、PhoneGap + バックボーン + JQM + RequireJS = 成功 :)

于 2012-04-10T20:11:17.623 に答える
0

15ページは私にはそれほど大きくないようです。別のフレームワークを導入しても、その規模のサイトにとって物事が簡単になるとは本当に思いません。

私はあなたと同じフラストレーションを感じましたが、すべてを 1 つの巨大なファイルに入れる代わりに、ajax ページの読み込みを使用して動的にページを読み込みました。

衝突を避けるために、ページ名の前に識別子を付けるように注意しています。それほど問題にはなっていません。

をすべてのファイルにコピー ペーストする必要があるのは少し面倒ですが (これにより、テストがはるかに簡単になり、サイトへの複数のエントリ ポイントが可能になります)、我慢できました。

欠点はありますが、ページを HTML ファイルに分割すると、特にページに JavaScript をインライン化する場合に、「操作性」が向上します。

于 2012-04-11T05:43:29.933 に答える
0

Sencha Touchを使用して、すべてを置き換えます。

于 2012-04-10T20:22:23.443 に答える