Занимаясь разработкой сайтов, в один прекрасный момент я понял, что мне кажется несправедливой система "формирование веб-страницы по шаблону на стороне сервера", которая порождает кучу всяких удобных и неудобных темплейтных движков, загружая при этом сервер, и забирая многие человеко-часы разработчиков CMS-ок.
В этом есть большое логическое недоразумение. Логика http подразумевает, что сервер хранит данные(Model) и обрабатывает запросы к ним (Controller). А клиент - получает данные и использует (представляет) их как хочет (View по логике должен быть здесь... Это недоразумение отчасти решает CSS,но далеко не полностью - при вёрстке не обойтись одним CSS без правок HTML-кода).
Вот что если javascript будет решать, какой для контента загрузить шаблон? Это было бы логично. Я попробовал javascript-темплейтинг, но быстро понял что дело глухо - для управления всем этим приходилось генерировать огромное количество javscript-кода, с которым самому трудно управляться, а уж отдать кому-то на поддержку просто нереально. Был и ещё один серьёзный минус - случайно допущенная ошибка в коде рушила весь сайт (он переставал отображаться).
Работать с таким кодом было неудобно ещё и потому, что настранице генерировались несколько элементов с повторяющимся контентом и постоянно приходилось придумывать какие-нибудь оригинальные id, чтобы их не путать.
К тому же, например, когда вставляешь с помощью innerHTML код, содержащий тег script, получается фига - скрипт не срабатывает. Но эта мысль натолкнула меня на одну идею! Если вставлять кусок html с помощью document.write , то всё отрабатывает как надо. Тогда, подумал я, нужно подгружать в head javascript-код, который формирует переменную, содержащую шаблон, а затем уже внутри body вызвать document.write с этим шаблоном.
Это решение оказалось немногим получше. Но всё равно оставалась проблема поддержки этой массы javascript-кода.
Но вот как-то недавно мне в голову пришла одна интересная мысль - использовать iframe, растянутый на всё окно. В него можно загрузить настоящий html-шаблон, а на месте подстановок использовать document.write() и функции javascript для форматирования. И оказалось, что эта технология имеет много плюсов, как и по сравнению с моими экспериментами, так и по сравнению с теми возможностями, которые могут предоставить серверные шаблонизаторы.
Вёрстка "фрейм-шаблоном"
От сервера мы получаем такую html-ку:
--------------------------------------------------------------------------------------
<html>
<head>
<script src='/view/_loader.js'></script>
</head>
<body>
<div id="content_piece_1">Первый кусочек запрошенного контента</div>
<div id="content_piece_2">Второй кусочек запрошенного контента (возможно со <a href="http://kuda-to/">ссылкой</a></div>
<div id="content_piece_3">Третий кусочек запрошенного контента
<ul>
<li>ну например
<li>со списком <img src='i_izobrazheniem.jpg'></li>
</ul
</div>
--------------------------------------------------------------------------------------
Ничего лишнего, как видим. Всё строго по делу - контент. В ней срабатывает _loader.js , который прячет контент (чтобы неформатированный контент не выскакивал при загрузке страницы), создаёт iframe размером со всю страницу и подгружает в него js-шаблон:
/view/_loader.js
--------------------------------------------------------------------------------------
В этом есть большое логическое недоразумение. Логика http подразумевает, что сервер хранит данные(Model) и обрабатывает запросы к ним (Controller). А клиент - получает данные и использует (представляет) их как хочет (View по логике должен быть здесь... Это недоразумение отчасти решает CSS,но далеко не полностью - при вёрстке не обойтись одним CSS без правок HTML-кода).
Вот что если javascript будет решать, какой для контента загрузить шаблон? Это было бы логично. Я попробовал javascript-темплейтинг, но быстро понял что дело глухо - для управления всем этим приходилось генерировать огромное количество javscript-кода, с которым самому трудно управляться, а уж отдать кому-то на поддержку просто нереально. Был и ещё один серьёзный минус - случайно допущенная ошибка в коде рушила весь сайт (он переставал отображаться).
Работать с таким кодом было неудобно ещё и потому, что настранице генерировались несколько элементов с повторяющимся контентом и постоянно приходилось придумывать какие-нибудь оригинальные id, чтобы их не путать.
К тому же, например, когда вставляешь с помощью innerHTML код, содержащий тег script, получается фига - скрипт не срабатывает. Но эта мысль натолкнула меня на одну идею! Если вставлять кусок html с помощью document.write , то всё отрабатывает как надо. Тогда, подумал я, нужно подгружать в head javascript-код, который формирует переменную, содержащую шаблон, а затем уже внутри body вызвать document.write с этим шаблоном.
Это решение оказалось немногим получше. Но всё равно оставалась проблема поддержки этой массы javascript-кода.
Но вот как-то недавно мне в голову пришла одна интересная мысль - использовать iframe, растянутый на всё окно. В него можно загрузить настоящий html-шаблон, а на месте подстановок использовать document.write() и функции javascript для форматирования. И оказалось, что эта технология имеет много плюсов, как и по сравнению с моими экспериментами, так и по сравнению с теми возможностями, которые могут предоставить серверные шаблонизаторы.
Вёрстка "фрейм-шаблоном"
От сервера мы получаем такую html-ку:
Ссылка скрыта от гостей
--------------------------------------------------------------------------------------
<html>
<head>
<script src='/view/_loader.js'></script>
</head>
<body>
<div id="content_piece_1">Первый кусочек запрошенного контента</div>
<div id="content_piece_2">Второй кусочек запрошенного контента (возможно со <a href="http://kuda-to/">ссылкой</a></div>
<div id="content_piece_3">Третий кусочек запрошенного контента
<ul>
<li>ну например
<li>со списком <img src='i_izobrazheniem.jpg'></li>
</ul
</div>
--------------------------------------------------------------------------------------
Ничего лишнего, как видим. Всё строго по делу - контент. В ней срабатывает _loader.js , который прячет контент (чтобы неформатированный контент не выскакивал при загрузке страницы), создаёт iframe размером со всю страницу и подгружает в него js-шаблон:
/view/_loader.js
--------------------------------------------------------------------------------------
JavaScript:
//прячем
document.write('<style>html, body {overflow:hidden;margin:0;} body * {display:none;}</style>')
// создаём View - фрейм, в котором будет происходить отображение
var $view;
// определяем высоту экрана и устанавливаем её для iframe, кроссбраузерно
Function hFrame(){
if(window.innerHeight)
$view.style.height = window.innerHeight + 'px';
else if(document.documentElement.clientHeight)
$view.style.height = document.documentElement.clientHeight + 'px';
else if(document.body.clientHeight)
$view.style.height = document.body.clientHeight + 'px';
}
window.onload = function(){
$view = document.createElement('iframe')
//делаем чтобы iframe не было видно
$view.style.cssText = 'position:absolute;top:0px;left:0px;width:100%;background:white;display:block;padding:0;'
$view.src = '/view/design.html'
$view.setAttribute('frameborder','no')
$view.setAttribute('scrolling','yes')
document.body.appendChild($view)
hFrame(); // устанавливаем размер экрана
window.onresize= hFrame(); // надо будет повторить это после ресайза страницы
}
------------------------------------------------------------------------------------------
Дальше идёт дизайн (он может быть свёрстан каким угодно способом - таблицами, div-ами ):
/view/design.html
-------------------------------------------------------------------------------------------------------
<html>
<head>
// наш внешний вид должен быть совершенным
<script src="naprimer_prototype.js"></script>
<script src="effects.js"></script>
// определим переменную data для обмена данными
<script>
Var data = window.parent.document;
</script>
<body> <!-- и сама свёрстанная страница -->
<div id=header>….header...</div>
<div id=content>
<div id=area_1>
<!-- быстро, просто и со вкусом вставляем кусочек контента -->
<script>document.write(data.getElementById('content_piece_1').innerHTML)</script>
</div>
<div id=area_2>
<script>document.write(data.getElementById('content_piece_2').innerHTML)</script>
</div>
<div id=area_3>
<script>document.write(data.getElementById('content_piece_3').innerHTML)</script>
</div>
</div>
<div id=footer>…footer….</div>
</body>
--------------------------------------------------------------------------------------
Подход очень простой, очень гибкий (средства javascript дают обширные возможности). Такой код легко поддерживать. И возможности по управлению внешним видом сайта ничем не ограничены. (нужно просто подгрузить other_design.html в фрейм и всё работает).
В общем... хочется эту мысль как-то развить дальше. Я сделал сайт [url="client-side-templating.com/"]http://client-side-templating.com/[/url] (он так и сделан:)), там можно узнавать новейшую инфомациею по этой теме.
Кстати, если кто интересуется, сейчас есть работа для фрилансеров на такой способ вёрстки. Кто заинтересован в работе, пишите в личку.