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

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

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

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


html code-reuse maintenance
person MrKatSwordfish    schedule 21.01.2014    source источник

Ответы (6)


arrow_upward
7
arrow_downward

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

person skip405    schedule 21.01.2014
comment
Понятно, спасибо. Мне интересно, что браузеры еще не поддерживают такое поведение! Я изучу эти другие методы, основанные на сценариях, похоже, люди дали мне здесь много полезной информации для начала. Еще раз спасибо! - person MrKatSwordfish; 21.01.2014

arrow_upward
6
arrow_downward

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

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

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

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

person Madmenyo    schedule 21.01.2014

arrow_upward
5
arrow_downward

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

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

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

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

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

person flauntster    schedule 21.01.2014

arrow_upward
4
arrow_downward

Чтобы повторно использовать код, вам нужно использовать PHP или JavaScript-фреймворк.

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

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

Ваше здоровье.

person Ricard    schedule 21.01.2014

arrow_upward
2
arrow_downward

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

person Ramesh    schedule 21.01.2014
comment
Спасибо за ссылку, я только что проверил и, кажется, есть несколько хороших советов. Кажется, что на самом деле это не касается повторного использования HTML-кода, но похоже, что для этого мне нужно использовать язык сценариев. - person MrKatSwordfish; 21.01.2014
comment
Да только что пересмотрел этот ответ. Обновление ответа: попробуйте использовать HandleBars ИЛИ директивы / компоненты, если вы используете angular. Многие фреймворки сейчас рекомендуют компонентный подход. так что следуйте рекомендациям предпочитаемого вами фреймворка. Если вы используете простой старый html, у grunt / gulp есть пакеты для поддержки html, как в PHP. - person Ramesh; 09.11.2016

arrow_upward
0
arrow_downward

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

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

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

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

Энди

person DA.    schedule 21.01.2014