Как структурировать HTML для повторного использования и обслуживания кода?

У меня ограниченный фон в кодировании собственных приложений с использованием таких языков, как C++, C и Java, но теперь я пытаюсь попасть в веб-разработку. Хотя большинство из них довольно просты и чисты, у меня есть несколько проблем с пониманием того, как я могу создавать веб-сайты и веб-приложения, которые хорошо используют существующий код, где это применимо. Насколько я понимаю, при использовании таких вещей, как JavaScript, CSS и PHP, вы можете просто импортировать скрипты из других файлов для использования в любом html-файле, что очень полезно. Но Мне трудно понять, как это можно сделать с помощью HTML, возможно ли это?

, скажем, у меня есть одностраничный веб-сайт с "заголовком" и кучей уникального контента ниже (например, логотип stackoverflow, кнопки и меню в верхней части этой страницы). Но теперь я хочу расширить свой сайт и добавить 3 новые страницы, которые имеют аналогичный макет и имеют точно такую же "панель заголовка" вверху. Один из способов добиться этого - просто скопировать который содержит эту часть кода и вставляет ее в page2.HTML-код, страница3.html и page4.html; уникальный код для каждой страницы будет отдельным, и он будет работать нормально. Проблема, которую я имею с этим подходом, заключается в том, что это действительно больно изменять содержимое "заголовка", не проходя через несколько страниц HTML, и вероятность создания странных несоответствий в дизайне/контенте становится высокой. Я предполагаю, что "stackoverflow.com/questions/ask" а "stackoverflow.com/tags" не содержит дубликат, копирование и вставку кода для элементов в верхней части страницы, но я не уверен, как этого достичь из-за моего ограниченного опыта HTML..

Итак, есть ли способ "включить" или "импортировать" HTML-код для повторного использования чистого кода на нескольких страницах? Эта функциональность встроена в HTML или мне нужно глубже в такие вещи, как JavaScript и PHP, чтобы создавать хорошо структурированные веб-сайты? Я искал ответ на этот вопрос, и несколько человек предложили iframes, но затем почти сразу предложил против их использования в современном веб-дизайне.. Что может быть хорошим подходом?

16
code-reuse design html html5 maintenance

6 ответов

возможность включения фрагментов кода теперь доступна, но ей не хватает правильного поддержка браузеров. Она называется html-шаблоны. В дальнейшем это позволит вам создавать собственные html-шаблоны, чтобы избежать дублирования кода. Но пока.... не родной HTML, а только другие технологии (PHP-based, Javascript-based, Ruby-based и what-not-based).

7

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

теперь я бы использовал jQuery, плагин javascript для загрузки всех данных HTML из заголовка.html в заголовок div. Код JQuery для него будет выглядеть примерно так, извините, что это было некоторое время и не имеет доступа к инструментам прямо сейчас.

$(document).ready(function(){
   $('#header').load("header.html");
});

для PHP вы можете написать файл функций и: include "functions.php"; PHP также поддерживает ООП, и вы можете сделать многоразовые классы и методы внутри него.

6

Если вы используете Dreamweaver, то у него есть система шаблонов для HTML без необходимости использования определенных языков на стороне сервера.

в противном случае это звучит как (и чтобы сохранить его простым без использования CMS или полной системы шаблонов, такой как Smarty), вы хотите использовать PHP для включения фиксированных блоков в свой код, например, широкий верхний и Нижний колонтитулы сайта.

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

<?php  include "header.php"; ?>

надеюсь, это поможет в качестве отправной точки:)

5

для повторного использования кода вам придется использовать PHP или JavaScript-фреймворк.

Я бы рекомендовал позже, в частности http://angularjs.org/ что является удивительным. Он предназначен для создания веб-приложений, используя представления (и другие компоненты), вы можете повторно использовать свой код.

Это стоит проверить, и с вашим фоном у вас не должно быть никаких проблем.

Ура.

4

Я бы рекомендовал "google" для "лучших практик HTML" и попробовать некоторые результаты, такие как: http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

2

есть много способов сделать это. Поместите код CSS и Java-скрипта в центральные файлы, на которые вы ссылаетесь в своих HTML-файлах, это хорошее начало.

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

недавно я начал использовать Jekyll (http://jekyllrb.com/), в основном вы создаете шаблоны для страниц, с заголовком, навигацией и дизайном в центральных файлах.

сами страницы содержат только контент и Jekyll генерирует домашнюю страницу из него.

Энди

0