Элементы повторного использования HTML

Я пишу статический веб-сайт, который использует JQuery, чтобы сделать некоторые вызовы AJAX API RESTful и заполнить страницу данными.Элементы повторного использования HTML

Сайт функционирует правильно (и быстро), все хорошо.

Поскольку я расширяю сайт и добавляю дополнительные страницы, я замечаю, что я дублирую некоторые регионы на каждой странице.

Например, каждая страница имеет общий элемент header.

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

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

Помните, что страницы должны обслуживаться статически, но могут использоваться любые стандартные функции браузера сообщений.

Есть ли хороший способ сделать это, и что это такое, или я должен отказаться от DRY principles для этого аспекта моего клиентского кода?

источник

2013-08-30 Jodrell

Любые ограничения на размещение заголовка в php и включение его в страницы? –

Используются любые двигатели просмотра? Или просто прямой HTML? – tymeJV

Взгляните на это: http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – Alvaro

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

В JQuery это может выглядеть следующим образом:

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

Однако, если содержание isin't статичным для всех страниц, вы всегда можете определить модуль JS, который будет нести ответственность, чтобы сделать этот заголовок. Вы можете использовать механизм шаблонирования на стороне клиента, например Mustache, Handlebars и т. Д. Однако вам не нужно использовать какие-либо из них.

Вот простой пример:

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

источник

2013-08-30 14:05:27 plalx

Если вы используете прямой HTML, вы можете сделать это с помощью команды SSI include или создать страницу шаблона и включить ее в jQuery. Обе эти ссылки могут помочь вам

Include another HTML file in a HTML file и http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

источник

2013-08-30 13:42:23 imbask

. Включение SSI потребует динамической обработки на сервере. – Jodrell

Поскольку вы уже используете AJAX вызовов, чтобы заполнить ваш сайт с данными, вы могли бы сделать то же самое для общих областей.

Просто храните HTML-код для этих регионов в отдельном файле и загружайте его на страницу с помощью AJAX. Кроме того, вы можете работать с кешированием с помощью заголовков Cache-Control в этом файле, чтобы вы не перезагружали весь контент с сервера при каждой загрузке страницы.

источник

2013-08-30 13:42:45 dcro

-2

Очень простая функция jQuery .clone().

Если у вас более сложный контент, я рекомендую посмотреть на Handlebars.js, который является полноценным JS-шаблоном.

источник

2013-08-30 13:42:56

Как вы должны «клонировать()' элементы между страницами? – Johan

Я не вижу, как это должно работать, когда новая страница будет запрошена. –

Вы можете использовать ajax jQuery для загрузки файла заголовка. В каждом файле вы можете загрузить HTML следующим образом:

 

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

источник

2013-08-30 13:47:41

Как я уже говорил в комментарии, это то, как я это делаю:

main.html

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Main page</title> 
     <sript src="http://code.jquery.com/jquery-latest.js"></script> 
     <script> 
      $(function(){ 
        $('#commonsection').load('reusablefile.htm'); 

        // which is eqvivalent to: 
        // 
        // $.ajax({ 
        //  url: 'reusablefile.htm', 
        //  dataType: 'html', 
        //  success: function(data){ 
        //   $('#commonsection').html(data); 
        //  } 
        // }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="commonsection"></div> 
    </body> 
</html>

reusablefile .html:

<script> 
    (function($){ //separate scope to keep everything "private" for each module 
     //do additional javascript if required 
    })(jQuery); 
</script> 
<p>...Some non-trivial content...</p>

источник

2013-08-30 13:56:01 Johan

Он выглядит в modest:

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>

reusablePi ece.xml

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

источник

2013-09-06 02:49:23 GoalBased

Элементы повторного использования HTML

ответ

Смежные вопросы