web-dev-qa-db-ja.com

JavaScriptを使用したJSONからのHTMLの生成とハードコーディング

バックストーリー

私は新しい開発者で、このプロジェクトに着手したばかりです。可能な限り動的にページをコピーできるようにコードを貼り付けないようにし、誰かがやって来て機能を追加したいときにあちこちで、20の異なる場所にコードを追加する必要はありません。これまでのところ順調に進んでいますが、やりすぎているように感じたり、別の解決策があるのではないかと感じています。

現在の問題

私は地図Webアプリ（GIS）の凡例を作成する任務を負っています。

私の見方では、2つのオプションがあります。

  1. 各凡例エントリを表す一連のHTML要素をハードコード化すると、各エントリの画像、ラベル、説明がすべてハードコード化されます。

  2. これらすべてを読みやすいJSONオブジェクトに入れ、オブジェクトを反復処理し、JavaScriptを使用して各HTML要素を生成します。このようにして、要素ごとに有効化、無効化、スワップアウト、フラグなどを設定できます。

補足

私は以前にこの問題に遭遇したことは間違いないと思います。また、このプロジェクト全体で多くの同様の設計上の問題に遭遇しています。乱雑になり始めています。動的に生成されるさまざまなパーツがたくさんありますが、ここに到着する前のコードはすべてハードコードされています。

designjavascripthtml
3
qbolt

各凡例エントリを表す一連のHTML要素をハードコード化すると、各エントリの画像、ラベル、説明がすべてハードコード化されます。

これはうまくいきます...何かを変更する必要があるまで。結局のところ、dynamicサイトで作業していると言っていました。

これらすべてを読みやすいJSONオブジェクトに入れ、オブジェクトを反復処理し、JavaScriptを使用して各HTML要素を生成します。このようにして、要素ごとに有効化、無効化、スワップアウト、フラグなどを設定できます。

これは良いですが、正しくありません。あなたが探しているのは、HTMLのtemplateです。実際のデータを省略して単純なHTMLフラグメントを作成すると、Webエンジンは凡例のエントリを取り、そのデータをテンプレート内のどこに置くかを決めます。使用するフレームワークとテクノロジーによっては、HTMLに静的フレームワークがあり、フレームワークに置き換えられるだけの場合があります。

JSONの問題は、おそらくtoo動的であることです。静的テンプレートを使用すると、レイアウトを簡単に確認して変更でき、変更するドキュメントが多数ではなく1つになります。

7
user22815

ご指摘のとおり、HTMLソリューションは実装が高速ですが、あまり柔軟性がありません。これは、概念実証、または（ほとんど）変更されない（設計上）静的ページに適しています。柔軟なソリューションを開発した場合、コンテンツ自体以外はほとんど変更を加えずに、将来的に他のマップに再利用できる可能性があります。これが決して変わらないものでない限り、JSON/JavaScriptソリューションに進んでください。

更新：

juhistについて のように、サーバー側で凡例を生成することもできますが、使用しているサーバー側のテクノロジーについては何も言われていないため、そのような適切な入力を行うのは難しいと感じました提案。 JavaScriptとJSONを使用してマップの凡例をレンダリングしてもパフォーマンスに重大な問題が発生するとは思われませんが、その場合は、サーバーでHTMLを生成する（使用しているバックエンドスタックを使用して）のが良いでしょう。 。

1
FrustratedWithFormsDesigner

他の答えには同意しません。サーバー側ではできるだけ多く、クライアント側ではできるだけ少なくすべきです。 HTMLを「ハードコーディング」するということは、サーバー側の言語を使用せずに、サーバーが提供する静的ファイルを使用していることを意味します。やめろ！代わりに、テンプレートエンジンをサポートする適切なサーバー側言語を使用してください。 JavaとFreeMarkerをテンプレートエンジンとして使用することをお勧めします。また、データベースが必要です; PostgreSQLをお勧めしますが、MySQLは以前のような完全な災害ではありません。人々はあなたが「フレームワーク」を必要とすると言っています;私は同意しませんフレームワークなしでまともなウェブアプリケーションを書くことは完全に可能です.

これで、サーバー側の環境を設定すると、データベースのデータからページを生成できることがわかります。クライアントはそれを「ハードコードされたHTML」として認識しますが、実際には、データベースのデータから生成される動的なページです。

最新のユーザーインターフェイスを開発する必要がある場合は、JavaScriptが必要であることがわかります。サーバーへの往復が必要であると想定して、サーバー側でできる限りのことを行います。したがって、サーバーはJSONオブジェクトでHTMLフラグメントを返すことができ、クライアントはそれらを要素の.innerHTMLに割り当てることができます。

1
juhist

データソースからback-endでHTMLを自動生成しないのはなぜですか？これは、ハードコードされたHTMLまたはブラウザーでHTMLを生成することとは異なるソリューションです。

0
Brian Agnew