2011-11-24 11 views
5

Zamierzam zacząć od całkowicie pustej strony (bez elementów innych niż HTML, głowa i ciało), a następnie zbuduję stronę przy użyciu jQuery. Zawartość strony będzie miała postać JSON z żądania AJAX. Treści z JSON nie będą miały żadnego HTML. Kod HTML z zawartością zostanie utworzony dla różnych sekcji strony w zależności od struktury obiektu JSON.Efektywność manipulowania jQuery DOM - budowanie całej strony za pomocą JavaScript

Strona ta zawiera różne suwaki, modały i inną "dynamiczną" treść.

Moje pytanie brzmi, czy będzie ono szybsze (pozwala przyjąć IE7 jako najniższy wspólny mianownik) do zbudowania HTML jako jeden duży ciąg (za pomocą konstruktora łańcuchów, który jest znacznie szybszy niż standardowe połączenie) i wstrzyknięcia tego do ciała w luźny fason, tj

var html = "<div id='content'><p>All markup required for the page, built from the contents of the JSON object</p></div><div id='slider'>...</div>...etc." 
$("body").html(html) 

a potem, kiedy to w DOM, używać jQuery do znalezienia i zastosowania wtyczek do różnych części dynamicznych, tzn

$("#slider").sliderPlugin(options); 

LUB

Czy lepiej byłoby utworzyć każdy element (lub jakiś) jako zmienną, a następnie dołączyć do ciała? tj

var content = $('<div/>', {id: "content"}) 
var slider = $('<div/>', {id: "slider", html="<ul><li>...</li></ul>"}).appendTo(content); 
$('body').append(content) 

potem podejście to nie mam do kwerendy DOM, muszę tylko zrobić to:

slider.sliderPlugin(options); 
+1

Dlaczego miałbyś to zrobić?Jeśli zamierzasz emitować znaczniki jako zmienną łańcuchową w javascript, to dlaczego nie po prostu utworzyć ją w ciele? – tvanfosson

+0

Nie widzę sensu w pytaniach "dlaczego to robisz". Ale, podsumowując, ograniczenia platformy, zawartość JSON jest zmienna, więc różne JSON = inne wyjście strony, znaczniki nie są zawarte w JSON, tylko zawartość każdego obszaru strony, znaczniki są generowane w zależności od struktury JSON. W przyszłości pozwala to na używanie różnych znaczników dla tego samego JSON, więc układ można uaktualnić bez zmiany zawartości źródłowej. – Fergal

+0

Wystarczająco fair. Byłem tylko ciekawy. Prawdopodobnie dostarczę częściowe widoki HTML za pośrednictwem AJAX zamiast JSON i skonstruuję kod HTML z modelu na serwerze. Przypuszczam jednak, że istnieją przypadki, w których serwer danych nie jest tym samym, co serwer WWW. Po prostu uważam, że budowanie HTML z łańcuchów jest raczej uciążliwe i podatne na błędy. Możesz rozważyć użycie http://knockoutjs.com – tvanfosson

Odpowiedz

1

Chyba budynek HTML raz jest najlepszym sposobem, jak przez mgłę pamiętam czytając to gdzieś

edytuj: Przeczytałem to here z wieloma innymi optymalizacjami jQuery. miła i zalecana lektura:

1

Porady, które widziałem, to to, że zazwyczaj szybsze jest dostarczanie pojedynczego dużego fragmentu kodu HTML do .html(), a następnie poleganie na wbudowanym analizatorze przeglądarki, aby zrobić to samo.

Jeśli jednak zamierzasz później manipulować poszczególnymi elementami (na przykład dodawać programy do obsługi zdarzeń itp.), Jest coś, co można powiedzieć o tworzeniu tych elementów przy użyciu metody jQuery $('<element>').

Ponadto, biorąc pod uwagę wartość atrybutu takie jak xx"xx (NB: osadzone cudzysłowy) jest znacznie bardziej niezawodne i bezpieczne zrobić:

html += '<div attr="' + foo + '"/>'; 

Ponieważ jeżeli:

$('<div>', { attr: foo }) 

niż to zrobić foo zawiera specjalne znaki HTML, z których sam musiałbyś uciec. Dlatego też, jeśli twoja zawartość nie jest zbyt duża, powinienem zapomnieć o problemach z wydajnością i wybrać duże fragmenty kodu HTML, gdy istnieje statyczny kod HTML, ale użyj metod tworzenia tagów, jeśli wstawiasz ciągi zmiennych.

Powiązane problemy