JavaScript:Vyhýbání se opakované práci

Miluji prohledávání zdrojového kódu velkých webových stránek, hledám vzory, které by se daly aplikovat na mé kódování a nacházely hacky nebo techniky, o kterých jsem předtím neslyšel. Jeden problém, se kterým se často setkávám s kódováním velkých webů, jsou opakované operace. Při pohledu na jejich kód vidím několik různých chyb a chci se o ně s vámi podělit, abyste mohli urychlit svůj vlastní kód JavaScript.

Sbírka opakovaných prvků

Nejčastějším problémem, který nejčastěji vidím, je kód JavaScriptu s opakovaným shromažďováním prvků. Selektor a querySelectorAll se staly velmi rychlými, ale opakovaná práce je vždy pomalejší než jednou. Problém a řešení samozřejmě vypadají takto:

// :(
$$(".items").addClass("hide");
	// ... and later ...
$$(".items").removeClass("hide");


//  :)
var items = $$(".items");
	// ... and use to heart's content from here on out!

Nadávat vývojářům za opakované shromažďování prvků je na denním pořádku, ale toto napomínání je třeba posílit. Samozřejmě se nelze vždy vyhnout opakovanému shromažďování prvků (předpokládejme weby s načítáním stránek AJAX), ale v takových případech budete pravděpodobně chtít použít delegování událostí namísto přímého získávání prvků a aplikace událostí.

Opakované podmínky

Výpočet opakovaných podmínek je běžným případem, ale také běžným vzorem, kterému je možné se vyhnout. Uvidíte něco takového:

var performMiracle = function() {
	// If the browser has feature A, use it...
	if(features.someFeature) {

	}
	// ... if not, do another
	else {

	}
};

Funguje to, ale není to nejúčinnější využití kódu a podmíněné kontroly se spouštějí při každém volání. Místo toho by bylo lepší něco takového:

var performMiracle = features.someFeature ? function() {
	// Plan A stuff
} : function() {
	// Plan B stuff
};

Pouze jedna podmíněná a metoda nebo proměnná je již nastavena na výsledek podmíněné!

Opakované vytváření objektů

Při opakované operaci, která prochází radarem, je opakované vytváření objektu, obvykle ve formě regulárního výrazu. Zvažte následující:

function cleanText(dirty) {
	// Get rid of SCRIPT tags
	clean = dirty.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, "");

	// Do some more cleaning, maybe whitespace, etc.

	return clean;
}

Výše uvedený kód opakovaně vytváří nový (i když stejný) objekt regulárního výrazu – příležitost k uložení mnoha vytvořených objektů vytvořením RegExp v kontextu rozsahu než funkce:

var scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
function cleanText(dirty) {
	// Get rid of SCRIPT tags
	clean = dirty.replace(scriptRegex, "");

	// Do some more cleaning, maybe whitespace, etc.

	return clean;
}

Ve výše uvedeném případě se RegExp vytvoří pouze jednou, ale použije se mnohokrát – pěkná úspora při zpracování.

To jsou jen některé z problémů, které se často opakují, když procházím JavaScript napsaný jinými vývojáři. Jaké další běžné chyby vidíte?