7

JQuery を使用して RESTful API への AJAX 呼び出しを行い、ページにデータを入力する静的 Web サイトを作成しています。

サイトは正しく (そして迅速に) 機能し、すべて問題ありません。

サイトを拡張してページを追加すると、すべてのページで特定の領域が重複していることに気付きました。

たとえば、各ページは共通のheader要素を共有しています。

<header>...Some non-trivial content...</header>

各ページでこの定義を繰り返すのではなく、このセクションを一度定義して各ドキュメントに含めることができる何らかのメカニズムがあります。

ページは静的に提供する必要がありますが、標準のコンプライアント ブラウザー機能はすべて利用できることに注意してください。

これを行う良い方法はありますか?それは何ですか?クライアント側コードのこの側面についてDRY 原則を放棄する必要がありますか?

4

7 に答える 7

7

これを達成する方法は確かにいくつかあります。ページのコンテンツを別のページに含めることを可能にするサーバー側言語のいくつかの機能を使用してそれを行うことができます。または、サーバー側テクノロジーがない場合は、そのコードを独自の html ドキュメントに単純に配置することもできます。 AJAXを使用してコンテンツをロードします。

jQuery では、次のようになります。

$('#header').load('header.html');

ただし、コンテンツがすべてのページで静的でない場合は、このヘッダーのレンダリングを担当する JS モジュールをいつでも定義できます。モジュールでは、 Mustache、Handlebarsなどのクライアント側のテンプレート エンジンを使用できます。ただし、これらのいずれも使用する必要はありません。

簡単な例を次に示します。

デモ

//in somefile.js, please note that you should namespace your modules
var Header = {
    //default config
    config: {
        el: '#header',
        title: 'Some title'
    },

    init: function (config) {
        var cfg = this.config = $.extend({}, this.config, config);

        $(cfg.el).html('<h1>' + cfg.title + '</h1>');
    }
};

$(function () {
    Object.create(Header).init({
        title: 'Some other title'
    });

    Object.create(Header).init({
        el: '#header1',
        title: 'Yeah'
    });
});
于 2013-08-30T14:05:27.177 に答える
3

jQuery の ajax を使用してヘッダー ファイルをロードできます。各ファイルで、次のように html をロードできます。

$('#header').load('header.html');
于 2013-08-30T13:47:41.937 に答える
2

既に AJAX 呼び出しを使用してサイトにデータを入力しているため、共通領域に対して同じことを行うことができます。

これらの領域の HTML を別のファイルに保存し、AJAX を使用してページにロードするだけです。また、そのファイルのヘッダーを使用してキャッシュをCache-Control操作できるため、ページが読み込まれるたびにサーバーからコンテンツ全体をリロードする必要がありません。

于 2013-08-30T13:42:45.010 に答える
0

控えめな場合は次のようになります。

main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <include>reusablePiece</include>
  </head>
  <body>
    <reusablePiece/>
  </body>
</html>

reusablePiece.xml

<header>...Some non-trivial content...</header>
于 2013-09-06T02:49:23.663 に答える
-2

非常に単純なのは、jQuery .clone()関数です。

より複雑なコンテンツがある場合は、本格的な JS テンプレート エンジンであるHandlebars.jsを検討することをお勧めします。

于 2013-08-30T13:42:56.590 に答える