Archive

Archive for October, 2006

JavaScript Template Engine

October 27th, 2006 No comments
JavaScript Template Engine to biblioteka która przychodzi z pomocą wszystkim tym, którzy renderowali kod HTML w skrypcie JavaScript. Aplikacje WWW stają się coraz bardziej skomplikowane. Przyjazny dla internauty WEB 2.0 wymaga wiele od programisty. Po latach niełaski JavaScript wraca do gry. Pomimo błędnych implementacji jest to jedyny język programowania, który może realizować To – czego od stron internetowych oczekuje internauta. Wykonywany w przeglądarce internetowej program interfejsu staje się coraz barziej skomplikowany. Pisanie zaawansowanego kodu JavaScript wymaga zastosowania wzorców projektowych, między innymi takich jak MVC. Z punktu widzenia MVC prezentowana biblioteka JavaScript Template Engine odpowiada za warstwę widoku. Kod HTML może zostać wstrzyknięty do strony internetowej przy użyciu funkcji DOM, np.:
var name = 'Antek';
var html = '<div class="foo">Hello' + name + '!</div>';
document.getElementById('container).innerHTML = html;
Wszystko jest w porządku, do czasu aż wstrzykiwany kod HTML jest prosty. Jednak zaawansowany kod HTML osadzony wewnątrz kodu JavaScript jest mało czytelny. W językach programowania wykonywanych po stronie serwera problem ten rozwiązano poprzez wydelegowanie zadania związanego z renderowaniem kodu HTML do warsty widoku (wzorzec projektowy MVC). Warstwa widoku programowana jest zwykle w specjalnym języku, np.: Smarty, JSP, JSF. Aby wyrenderować wartstę widoku w JavaScript możemy użyć kilku technik.
  • łączenie stringów – fuj!
  • operacje na obiektach DOM: var d = document.createElement('div'); d.appendChild( document.createTextNode('Hello ' + name) ); – wadą tego rozwiązanie jest to, że trzeba się sporo napisać żeby osiągnąć porządany efekt. Dodatkowo kod ten nie jest czytelny dla starrej daty webmastera
  • Transformata XSLT – bardzo obiecujące i bardzo skomplikowane
JavaScript Template Engine przypomina system szablonów Smarty. W kodzie szablonu możemy używać zmiennych, predefiniowanych funkcji, instrukcji warunkowych i pętli. Możemy także uczyć szablon wykonywania nowych funkcji. Możemy też wykonywać operacje matematyczne używając notacji polskiej. Możliwe jest nawet pisanie własnych programów. Koniec nawijania! Przykład:
<div id="template">Hello {name}</div>
<script language="JavaScript">
var name = 'Antek';
var t = new Template();
t.assign( new TemplateVar( 'name', name ) );
var el = document.getElementById( 'template' );
el.innerHTML = t.fetch( el.innerHTML );
</script>
Jak łatwo się domyślić, po wykonanie kody element “template” będzie zawierał tekst: “Hello Antek”. Zapraszam na stronę projektu: http://code.google.com/p/jstemplate/
Categories: JavaScript Tags: