beatovich: String per JS effizient splitten

Beitrag lesen

SELF-Forum

String per JS effizient splitten

beatovich Homepage des Autors
+1 Informationen zu den Bewertungsregeln

hallo

Hallo heinetz,

die jQuery-Methode lädt ein HTML Fragment und extrahiert dann daraus einen Container. Wie sie das macht, steht auf api.jquery.com:

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Man müsste sich den jquery sourcecode anschauen um zu sehen wie sie es genau machen, aber ICH würde so vorgehen:

  • html als text vom server holen

warum nicht als html

  • mit createDocumentFragment ein DocumentFragment erzeugen

unntötig wenn als html

  • darin ein div anlegen (weil das DocumentFragment kein innerHTML hat)

unnötg, wenn als html

  • dem innerHTML des div das geladene html zuweisen
  • in dem div mit querySelector den gewünschten Container lokalisieren
  • den clonen und den Klon im eigenen DOM einsetzen

So ähnlich mach' ich es:

	_.xhr = new XMLHttpRequest();
	_.xhr.open("GET",_.sitemapUri);
	_.xhr.responseType = 'document';
	_.xhr.addEventListener('load', function(event) {
		if( _.xhr.status == 200 || _.xhr.status == 304 ){
			_.searchitems = _.xhr.responseXML.querySelectorAll('[data-for~="searchform"] a[href]');
			_.sitemap = _.xhr.responseXML.querySelector('[data-for~="navigation"]');
			if( _.sitemap ){
				document.querySelector(".addSitemapContent").appendChild( _.sitemap );
				if(_.searchitems) searchform(_.searchitems);
			}
			setAriaCurrentPage();
			// initialise functions
			_.functions = document.querySelectorAll("script[data-initfunction]");
			for(var i=0; i<_.functions.length;i++){
				_.funcname = _.functions[i].getAttribute("data-initfunction");
				window[_.funcname](); 
			}
		} else {
			console.warn(_.xhr.statusText);
		}
	});
	_.xhr.send();
--
https://beat-stoecklin.ch/pub/index.html
Beitrag melden
+1
Informationen zu den Bewertungsregeln