Reuse elements of HTML

Question

I'm writing a static web site that uses JQuery to make some AJAX calls to a RESTful API and populate the page with data.

The site functions correctly (and quickly), everything is good.

As I extend the site and add additional pages, I'm noticing that I'm duplicating certain regions on every page.

For instance, each page shares a common header element.

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

Rather than repeat this definition on each page is there some mechanism, by which, I can define this section once and include it in each document.

Remember that the pages must be served statically but any standard complaint browser functionality can be utilised.

Is there a good way to do this, and what is it or, will I have to abandon DRY principles for this aspect of my client side code?

Answer 1

There's definitely some ways to achieve this. You could either do it using some features of your server-side language that allows to include the content of a page in another page, or if you do not have any server-side technology, you could simply put that code in it's own html document and load it's content using AJAX.

In jQuery it could look like:

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

However, if the content isin't static for all pages, you could always define a JS module that would be responsible to render this header. You module could make use of a client-side templating engine, like Mustache, Handlebars, etc. However you do not have to use any of these.

Here's a simple example:

DEMO

//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'
    });
});