javascript - JavaScript での HTML の生成と HTML ファイルの読み込み

Question

現在、完全に JS 駆動の Web サイトを作成しています。HTML ページはまったく使用しません (インデックス ページを除く)。すべてのクエリは JSON を返し、JavaScript 内で HTML を生成して DOM に挿入します。レイアウト構造を持つ HTML ファイルを作成し、このファイルを DOM にロードし、JSON からの新しいデータで要素を変更する代わりに、これを行うことの欠点はありますか?

編集: 私のページはすべて AJAX 呼び出しで読み込まれます。しかし、私は次のような構造を持っています:

<nav></nav>
<div id="content"></div>
<footer></footer>

基本的に、要素を変更することはありませんnav。index.htmlfooterファイルをロードするときに一度だけロードされます。次に、ページをクリックするたびにサーバーにAJAX呼び出しを送信し、JSONでデータを返し、jQueryでHTMLコードを生成してこのように挿入します$('#content').html(content);

個別の HTML ファイルを作成し、たとえば、$('#someID').html(newContent)すべての要素を JSON データで変更するために使用すると、さらに多くのコードが使用され、このファイルをロードするためにサーバーへの要求が 1 つ必要になるため、ブラウザーで生成するだけでよいと考えました。

EDIT2: SEO はあまり重要ではありません。私の Web サイトにはログインが必要なので、index.html ファイルにすべてのメタ タグを作成します。

Answer 1

In general, it's a nice way of doing things. I assume that you're updating the page with AJAX each time (although you didn't say that).

There are some things to look out for. If you always have the same URL, then your users can't come back to the same page. And they can't send links to their friends. To deal with this, you can use history.pushState() to update the URL without reloading the page.

Also, if you're sending more than one request per page and you don't have an HTML structure waiting for them, you may get them back in a different order each time. It's not a problem, just something to be aware of.

Returning HTML from the AJAX is a bad idea. It means that when you want to change the layout of the page, you need to edit all of your files. If you're returning JSON, it's much easier to make changes in one place.

Answer 2

間違いなく重要なこと：

データを JSON として送信する新しいシステムと、それを HTML としてページに挿入するために必要な JS のコードを開発するには、どのくらいの時間がかかりますか?

HTML を返すだけでどれくらい時間がかかりますか? また、既存のサーバー側コードの一部を再利用できるとしたら、どのくらいの期間使用できますか?

そして、ページのサーバー側のインターレクションがどの程度かを確認してください...

純粋な HTML を作成する利点もいくつかあります。

1) シンプルなマークアップであり、多くの場合、JSON と同じか、実際にはよりコンパクトです。

2）エラーが発生しにくいため、取得できるのはマークアップだけで、コードはありません。

3）ほとんどの場合、クライアント側でコードを個別に記述する必要がないため、プログラミングが高速になります。

4) HTML はコンテンツであり、JavaScript は動作です。説得力のある理由がまったくないため、両方を混在させています。

javascriptまたは他のスクリプト言語で..コードの残りの部分で問題が発生した場合は機能しません

また、純粋な html ページでデバッグする方が簡単です

私の意見...必要に応じてscriptiongコードを使用してください..htmlで実行できるコードの残りの部分...サーバーに移動してデータを取得し、再度表示するというトリップタイムを節約できます。

コーディング中は、ポイント 4 を念頭に置いてください。

Answer 3

If you cared about SEO you'd want the HTML there at page load, which is closer to your second strategy than your first.

Update May 2014: Google claims to be getting better at executing Javascript: http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html Still unclear what works and what does not.

Further updates probably belong here: Do Google or other search engines execute JavaScript?

Answer 4

以下の3つの方法が考えられると思います。

• JSON のみをクライアントに送信し、テンプレート (すなわち handlerbar.js) に従ってレンダリングする

• サーバー側からページを作成すると、通常はレンダリングが高速になり、ページをキャッシュすることもできます。

• または、これを組み合わせて、サーバーから部分的なビューを生成し、それらをクライアントに送信します。たとえば、クライアントにハンドルバー テンプレートがあり、JSON からデータを適用するが、サーバーには同じテンプレートしかないようなものです。サーバー側でレンダリングし、最終的な形式でクライアントに送信すると、クライアントでは部分ビューを置き換えることができます。

また、アプリケーションのユースケースによって決定されるいくつかの考慮事項は、SEO をターゲットにしている場合は、ColBeseder のアドバイスを考慮する必要があるということです。モバイル ユーザーをターゲットにしている場合は、JSON のみの応答を使用することをお勧めします。これは次のとおりです。より軽量なレスポンス。

編集：

あなたがシングルページアプリケーションを作成していると言ったことによると、これが正しければ、おそらく JSON または AngularJS のような部分ビューのいずれかを使用できます。ただし、サーバー側のロジックが JSON 応答のみを処理するように記述されている場合は、おそらくhandlerbar.js、underscore、またはjquery templatesなどのクライアントでテンプレート エンジンを使用する方が適切であり、HTML の再利用可能な部分を定義して適用できます。 JSON からのデータです。