Mvc с View на стороне клиента.

Тема в разделе "Web 2.0, AJAX, Ruby, RSS технологии", создана пользователем okneigres, 29 мар 2008.

Статус темы:
Закрыта.
  1. okneigres

    okneigres Гость

    Занимаясь разработкой сайтов, в один прекрасный момент я понял, что мне кажется несправедливой система "формирование веб-страницы по шаблону на стороне сервера", которая порождает кучу всяких удобных и неудобных темплейтных движков, загружая при этом сервер, и забирая многие человеко-часы разработчиков 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-ку:

    http://server/request
    --------------------------------------------------------------------------------------
    <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] (он так и сделан:)), там можно узнавать новейшую инфомациею по этой теме.

    Кстати, если кто интересуется, сейчас есть работа для фрилансеров на такой способ вёрстки. Кто заинтересован в работе, пишите в личку.
     
  2. Andrew Stephanoff

    Andrew Stephanoff Гость

    а почему бы не применять XSLT? как бы это логичнее..
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей