Повторное использование HTML-кода только с использованием технологий на стороне клиента

Question

Мне поручено создание веб-сайта с использованием только технологий на стороне клиента, таких как HTML, CSS и JavaScript. Мы не можем использовать какие-либо серверные технологии, потому что инструктор слишком ленив, чтобы что-то установить, и не позволит нам выполнить развертывание с использованием чего-либо, такого как Heroku. Есть ли способ, которым я могу сделать это? В частности, я хочу создать партиалы для этой навигации и нижнего колонтитула без необходимости копировать и вставлять их в каждый отдельный файл.

Answer 1

Я знаю два разных подхода:

1. Использование Ajax

Вы можете использовать ajax для этого - возможно, с помощью библиотеки JavaScript или фреймворка.

JQuery-х load может делать такие вещи, как $('#header').load('header-partial.html');

Если вы создаете что-то более сложное с большим количеством представлений и т. Д.... я бы подумал об использовании JavaScript-фреймворка MV*, такого как Backbone.js или AngularJS.

Посмотрите на начальный проект AngularJS на GitHub для примера

2. Использование сценария сборки

Если ваш сайт достаточно прост, и все, что вы хотите сделать, это включить верхний и нижний колонтитулы на каждой странице, вы должны рассмотреть возможность сделать это как этап сборки в процессе развертывания. IE компилирует ваш HTML с частями локально, и загружает полные страницы, с кодом верхнего / нижнего колонтитула на каждой HTML-странице.

Этот подход имеет то преимущество, что не ломает ваш сайт, если js отключен.

Например, посмотрите скрипт сборки Ant html5boilerplate