Kiedy JavaScript powinien generować HTML?

34

Staram się generować jak najmniej kodu HTML z JavaScript, jak to możliwe. Zamiast tego wolę manipulować istniejącym znacznikiem, kiedy tylko mogę, i generować HTML tylko wtedy, gdy potrzebuję dynamicznie wstawiać element, który nie jest dobrym kandydatem do korzystania z Ajax. Uważam, że znacznie ułatwia to utrzymanie kodu i szybkie wprowadzanie zmian, ponieważ znaczniki są łatwiejsze do odczytania i śledzenia. Moja ogólna zasada brzmi: HTML to struktura dokumentu, CSS to prezentacja, JavaScript to zachowanie.

Widziałem jednak dużo kodu JS, który generuje kopie HTML, w tym całe formularze i modalne okna dialogowe o dużej zawartości. Zasadniczo, która metoda jest uważana za najlepszą praktykę? W jakich okolicznościach JavaScript powinien być używany do generowania HTML, a kiedy nie?

VirtuosiMedia
źródło
2
Jak myślisz, dlaczego znaczniki są łatwiejsze do odczytania i śledzenia przez Ajax?
psr
3
Zwykle używam Ajax na jeden z dwóch sposobów: ładuję całe wstępnie renderowane fragmenty HTML na stronę lub tablicę JSON, którą analizuję, a następnie wstawiam dane do istniejących elementów. Bardzo rzadko dynamicznie generuję HTML z danych Ajax i wstawiam go na stronę. Ponieważ treść Ajax jest zwykle wstępnie renderowana jako HTML, łatwiej jest ją czytać niż próbować śledzić tworzenie elementów dynamicznych w JavaScript. Mogę szybko na to spojrzeć i zobaczyć strukturę i treść.
VirtuosiMedia
2
Fantastycznie cierniste pytanie ...
Mark Canlas
2
@VirtuosiMedia - Ale czy wstępnie renderowane fragmenty HTML nie mają takich samych problemów podczas renderowania po stronie serwera, jak podczas renderowania za pomocą javascript? Nie próbuję się spierać, naprawdę nie rozumiem, o co ci chodzi.
psr
1
@psr Ogólnie nie. Kiedy używasz frameworka JS lub nawet waniliowego JavaScript, generujesz swój HTML za pomocą szeregu wywołań metod i funkcji. Jeśli zrobimy to z dużą liczbą elementów, może być bardzo trudno zobaczyć, jaka jest faktyczna struktura dokumentu. W przeciwieństwie do tego generowane po stronie serwera HTML zazwyczaj będą utrzymywać czystą strukturę i po prostu będą kodować dane serwera w szablonie HTML zamiast generować same elementy. Więc jeśli chcesz zmienić zachowanie JS, musisz prześledzić metody generujące elementy, aby zobaczyć hierarchię.
VirtuosiMedia

Odpowiedzi:

19

Ilekroć napotkałem ciężkie generowanie HTML w javascript, było to prawie wyłącznie w samodzielnej wtyczce interfejsu użytkownika. Ma to sens, ponieważ pozwala na zamknięcie całej wtyczki w jednym pliku .js (+ a .css w celu dostosowania stylów), dzięki czemu jest łatwo wielokrotnego użytku, dystrybuowalne i niezależne od frameworku używanego w aplikacji.

Jeśli więc piszesz samodzielną wtyczkę javascript lub ogólny składnik interfejsu użytkownika, którego chcesz używać w różnych aplikacjach, takie podejście ma swoje zalety. W przeciwnym razie myślę, że jest to zarówno czystsze, łatwiejsze do napisania, jak i łatwiejsze w utrzymaniu, gdy trzymasz generowanie HTML z dala od javascript i po stronie serwera.

scrwtp
źródło
29

Myślę, że problem polega na tym, że porównujesz czysto napisane szablony po stronie serwera do źle napisanego generowania HTML po stronie klienta ad-hoc. Oczywiście dokładnie napisany kod jest łatwiejszy do odczytania, utrzymania i śledzenia.

Nazywasz kod po stronie klienta „kopcami HTML”, ale oczywiście jest to ten sam HTML, niezależnie od tego, gdzie jest generowany. „Kopiec” jest tak naprawdę dużą bryłą kodu.

Istnieje wiele bibliotek szablonów po stronie klienta. Działają podobnie jak po stronie serwera. Jeśli chodzi o to, co wolisz, kompromis wydajności jest skomplikowany, ale JSON jest zwykle bardziej kompaktowy niż HTML, a staje się, że posiadanie szablonu na kliencie może wyeliminować niektóre wywołania serwera. Z drugiej strony klient może mieć wyłączoną obsługę JS lub być zbyt wolny, aby był praktyczny, więc zależy to również od odbiorców docelowych. Ogólnie uważam, że podejścia są dość porównywalne, a największym czynnikiem są możliwości przeglądarki docelowej grupy odbiorców.

Zależy to jednak dokładnie od tego, co robisz, od tego, czy wolisz JS od środowiska serwerowego, jakie preferujesz rozwiązanie szablonowe itp.

psr
źródło
15

Istnieje tendencja do używania szablonów po stronie klienta, w skrajnym przypadku serwer miałby zapewniać tylko interfejs API RESTful, na przykład w formacie JSON, jednocześnie wykonując wszystkie renderowanie po stronie klienta. Zaletą tego podejścia jest to, że kod JS i szablony są zasobami statycznymi, które można buforować, proxy i dystrybuować za pośrednictwem CDN. Nie można tego zrobić, jeśli masz dynamiczny HTML wygenerowany po stronie serwera. Ponadto zwracanie tylko danych z RESTful API w lekkim formacie zużywa znacznie mniej zasobów po stronie serwera, co przyspiesza reakcję. Jest również lżejszy, co oznacza mniej transferu sieci, co ponownie przyspiesza. W ten sposób możesz mieć bardzo responsywną aplikację o niskim opóźnieniu, nawet na wolnych połączeniach, takich jak 3G. Dlatego takie podejście jest popularne w przypadku stron i aplikacji mobilnych.

Istnieje wiele bibliotek wykonawczych szablony JS, jeden z popularnych należą Czysta , Wąsy i dust.js . Później jest używany przez LinkedIn, opisali zalety w swoim artykule „Pozostawienie stron JSP w pyle: przeniesienie LinkedIn do szablonów po stronie klienta dust.js” .

vartec
źródło
Tworzę moją pierwszą aplikację internetową (jak się teraz nazywa, mam java / c ++). I wydaje mi się naturalne, że generuję dużo HTML z JS, gdy użytkownik przechodzi proces, w którym potrzebuje kilku różnych składników interfejsu użytkownika, a ja nigdy nie przeładowuję strony
Emile Vrijdags
2

Zaletą generowania kodu HTML na kliencie jest to, że odciążasz renderowanie do każdego klienta, który na ogół nie pracuje i czeka na odpowiedź. Uwolnienie większej liczby zasobów serwera w celu dostarczania tylko danych JSON i treści statycznych (HTML, JS i CSS).

Tworzymy aplikację internetową, która generuje wyłącznie HTML przy pomocy Javascript. 87% trafień na serwer to dane JSON, zawartość statyczna jest zazwyczaj ładowana raz, a następnie z pamięci podręcznej przeglądarki.

Ale nie możesz go użyć - przynajmniej nie łatwo - jeśli potrzebujesz SEO. Lub jeśli kierujesz reklamy na populację, która ma wyłączoną obsługę Javascript, ale nie jestem pewien, czy ta funkcja jest nadal aktualna w przypadku YouTube, Twittera, Facebooka, Gmaila ... naturalnie zmuszając ludzi do jej włączenia.

Mikrofon
źródło
0

Jeśli chodzi o dynamiczne ładowanie strony, należy zdać sobie sprawę, że za wszystkimi „JQuery AJAX Cloud!” magia, dzieją się tylko dwie możliwe rzeczy:

  1. Kod elementu jest wstrzykiwany do div (zły) lub
  2. Treść ładowana jest w ramce iframe (lepiej, ale to nie to samo ...)

Jeśli chodzi o oryginalne pytanie, tworzę treść HTML tylko za pomocą Javascript, gdy tworzę aplikację internetową, która odczytuje dane XML lub JSON przechowywane na serwerze, i to się bardzo zmienia.

Nie ma większego sensu ładowanie treści statycznych na stronie za pomocą Javascript, ponieważ zawsze istnieje możliwość, że nie załaduje się ona poprawnie lub klient wyłączy ją („weź te nieznośne reklamy!”). Ponadto utrudnia to zmianę treści HTML, gdy jest umieszczona w brzydkim document.write()lub łańcuchu document.createElement().

Masz rację; albo wpisz nieprzetworzony kod HTML, albo jeśli konieczna jest zawartość dynamiczna, użyj skryptu po stronie serwera, aby wyświetlić niezbędne dane. Użyj Javascript do wstrzykiwania HTML tylko wtedy, gdy witryna ma działać bez połączenia z Internetem lub podobnej sprawy.

Ostatnia uwaga, jeśli chcesz zaimplementować xmlhttprequests, er, AJAX, na stronie internetowej, prawdopodobnie najlepszym / najbezpieczniejszym sposobem na to jest przechowywanie danych w formacie danych (np. XML), ładowanie i wysyłanie ich odpowiednio na kliencie. document.writei element.innerHTMLtak naprawdę nie jest to najlepszy sposób na manipulowanie treścią i na pewno spowoduje potencjalne bóle głowy w przyszłości (dlaczego ten skrypt nie działa? Mój zepsuty <i>tag zapisuje kursywą wszystko! itp.).

Jeffrey Sweeney
źródło
1
Z pewnością nie są to jedyne rzeczy, które mogą się zdarzyć. JavaScript ma pełny dostęp do DOM i możesz manipulować drzewem DOM, gdy uznasz to za stosowne podczas obsługi odpowiedzi AJAX.
tdammers
Dlaczego wstrzykiwanie treści do div jest złe?
Peter Taylor
@PeterTaylor wstrzykiwanie treści nie jest złe, używanie innerHTMLjest.
Raynos
@PeterTaylor Jeśli element lub dwa zostaną dodane document.appendChildlub coś, prawdopodobnie nie będzie żadnych problemów. Problem dotyczy kodu, który wygląda mniej więcej tak div.innerHTML="<table cellpadding='0'><tr><td><label>Val:</label></td><td><input type='text' /></td></tr></table>- to koszmar do debugowania.
Jeffrey Sweeney
Ale co to ma wspólnego z „JQuery AJAX Cloud!” magia'? Twój przykład tam wygląda bardziej jak jego antyteza.
Peter Taylor
0

Moja mantra na ten temat brzmi: kiedy jest łatwiej i nikt nie dba o znaczniki.

Możesz także wykorzystać oba te elementy i zdefiniować limit, w którym zbyt trudno jest dbać o znaczniki, a wolisz skupić się na drzewie DOM. Na przykład formularz z dynamicznymi wierszami (np. „Dodaj kolejny załącznik”), prawdopodobnie potrzebujesz formularza w HTML, przycisku „dodaj wiersz” i przycisku przesłania… prawdopodobnie nie chcesz generować HTML z językiem po stronie serwera lub coś takiego.

Inną praktyczną zasadą może być wielokrotnego użytku. Jeśli Twoje rozwiązanie można zastosować do innych problemów po stronie klienta, obuduj je w js.

dukeofgaming
źródło
0

Tworzymy aplikacje jednostronicowe (Google Mail) i dosłownie nie ma generowania HTML po stronie serwera w naszych aplikacjach. Zamiast tego używamy Backbone.js do strukturyzowania strony klienta i Kierownicy do renderowania naszego JSON w szablony, które przechodzą na stronę. To naprawdę działa bardzo dobrze i zbliżamy się do końca naszej pierwszej aplikacji, która z niej korzysta, a my zajmiemy się jeszcze większym projektem w przyszłości.

Każdy gruby klient, na którym serwer służy tylko do utrwalania danych i zwracania wyników zapytań, jest potomkiem plakatu na czas, gdy chcesz, aby JavaScript generował HTML. Pamiętaj tylko, aby użyć dobrego silnika szablonów, aby był czysty i łatwy.

John Munsch
źródło
0

Generuję kod HTML w jquery, ponieważ korzystam z portletu, a po wykonaniu kodu jsp muszę utworzyć pętlę z kodem HTML, której nie mogę dostać do pętli java for z jakimś kodem javascript. Renderuję więc arraylistę Java w tablicy javascript i używam ciągów do generowania HTML.

Laura Liparulo
źródło