Dobre praktyki pisania HTML w Javascript

Zastanawiałem się nad tym, czy ludzie mają silne opinie na temat najlepszego sposobu generowania HTML w locie, szczególnie z aplikacjami bazującymi na Ajax.

Czy wystarczy utworzyć kod HTML za pomocą skryptów po stronie serwera, a następnie wysłać go na stronę, czy może po prostu zwrócić ciąg JSON i pozwolić Javascript wykonać zadanie.

Moim zdaniem pierwszy sposób zbytnio wiąże warstwę Prezentacji z logiką i utrudnia zmianę i utrzymanie koszmaru. Na drugi sposób, chociaż jest moją preferowaną metodą, również staje się koszmarem do utrzymania, gdy złożoność projektu rośnie.

Myślałem o użyciu systemu szablonów Javascript jako kolejnej warstwy, aby Kod był bardziej wytrzymały i mniej sztywny. Ma ktoś dobry pomysł na lekki i naprawdę dobry system szablonów JS?

Author: Justin Johnson, 2010-01-22
Source

5 answers

Http://ejohn.org/blog/javascript-micro-templating / jest diabelsko genialny hack do tego. Efekt końcowy jest bardzo czysty.

 14
Author: Jaanus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-22 19:00:25

Ja też wolę odpowiedź JSON z logiką tworzenia HTML po stronie klienta.

Niestety, większość rzeczywistych skryptów HTML po stronie klienta jest zepsuta, zawiera wiele błędów wtrysku HTML, które mogą łatwo stać się lukami w zabezpieczeniach między stronami. Uważam, że ponieważ rozmawiasz z własnym serwerem, a nie bezpośrednio z wrogim użytkownikiem, jesteś w jakiś sposób "bezpieczny" i możesz uciec bez poprawnie napisów interpolujących je do HTML. Co jest oczywiście nonsens.

Zawsze widzę takie rzeczy jak: 

$('#mydiv').append('<em>Deleted '+response.title+'!</em>');

Lub: 

mydiv.innerHTML= '<p>Renamed to '+response.name+'</p>;

Lub rzeczywiście Hack Mikrotemplacji Resig, gdzie domyślnie nie ma ucieczki HTML. Chodźcie ludzie! Dopiero zaczęliśmy czyścić spuściznę zepsutych skryptów PHP obsługujących XSS po stronie serwera, teraz chcesz wprowadzić zupełnie nową gamę exploitów XSS po stronie klienta?

Westchnienie. To przynęta sznurków. Myślimy, że je rozumiemy i możemy je trzymać razem. Ale ciągi są zdradzieckie, z ukrytymi kontekstami i wymykającymi się wymogom. Jeśli musisz wygenerować HTML po stronie klienta, będziesz potrzebował takiej funkcji: 
function h(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
}

mydiv.innerHTML= '<p>Renamed to '+h(response.name)+'</p>;
Ale osobiście wolę metody DOM. Podobnie jak w przypadku parametryzacji dla SQL, użycie metod DOM usuwa ciągi znaków z równania, mówiąc surowe ciągi bezpośrednio do komponentów, które będą je konsumować. OK, problem z DOM jest taki, że jest raczej gadatliwy: 
var p= document.createElement('p');
p.appendChild(document.createTextNode('Renamed to '+response.name))
mydiv.appendChild(p);

Ale zawsze można zdefiniować funkcje pomocnicze do redukcji tego, np.:

mydiv.appendChild(makeElement('p', {}, 'Renamed to'+response.name));

(nowy element tworzenia rzeczy w jQuery 1.4 używa podobnego stylu.)

 8
Author: bobince,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-22 00:55:26

+1 rok temu uruchomiliśmy nową aplikację internetową i potrzebowaliśmy sposobu renderowania HTML z danych JSON w przeglądarce.
chcieliśmy, aby była tak szybka jak transformacja XML/XSLT.

Naszą odpowiedzią na to był silnik szablonów JS PURE .

W przeciwieństwie do większości szablonów js, utrzymuje HTML nietknięty (żadnych dziwnych tagów) i z wyjątkiem kilku notacji, nie przynosi nowego języka do nauki, tylko JS i HTML.

Sposób w jaki go używam:

  • Zbuduj statyczny HTML bezpośrednio na stronie
  • następnie dodaj logikę js krok po kroku, a HTML staje się stopniowo żywy
    • HTML i JS mogą mieć bezpieczne oddzielne życie programistyczne i mogą być podzielone między pracę projektanta i programisty JS [14]}
 3
Author: Mic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-22 01:59:32

Mieliśmy system, w którym wiele danych było przekazywanych jako JSON z serwera, a następnie przetwarzanych przez silnik szablonów javascript po stronie klienta. W.Net 4.0 (może nawet 3.5 sp1, nie jestem pewien) można to zrobić za pomocą szablonów Client.

Wolałbym przekazać JSON niż wysłać html. Zawsze dobrze jest trzymać dane i widok osobno.

 1
Author: Punit Vora,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-22 00:35:19

Jeśli chcesz zachować Framework MVC, powinieneś pozwolić frameworkowi szablonów na tworzenie szablonów. AJAX powinien wykonywać tylko żądanie serwera, które wykonuje wszystkie DB i logikę biznesową, a następnie zwraca adres URL do szablonu, który powinien być załadowany.

 0
Author: davidosomething,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-22 00:31:11