JavaScript:Zhuštěný kód vs. čitelnost

V poslední době jsem kódoval některé pokročilejší JavaScriptové aplikace a přiměly mě hodně přemýšlet o stylech kódování. Přesněji řečeno:krátkost kódu vs. čitelnost.

Moje myšlení

Někdy mohu být konfliktní vývojář, takže zde je několik myšlenek, které mi probíhají hlavou:

• „Nástroje jako YUI Compressor dostatečně zkomprimují můj kód.“
• "Jistě YUI Compressor zkrátí kód, ale nebude řešit zkracování řetězců jako argumenty."
• "U širokopásmového internetu na pár KB opravdu nezáleží."
• "Vzhledem k omezením mobilní šířky pásma potřebuji, aby byl tento soubor JS co nejmenší."
• „Chci, aby tato aplikace byla dostatečně snadná, abych do ní mohl vstoupit a znovu jí porozumět do 5 minut.“
• "Chci mít možnost znovu použít část tohoto kódu v budoucích projektech bez hromady potíží."
• "Jak snadné je posoudit 500 stop? Pokud se budu od Christiny Ricci držet v rozumné vzdálenosti, mohou definitivně dokázat, že jsem porušil soudní zákaz?"

Rychlý a snadný příklad

Vezměte si například následující podrobný fragment kódu:

myElement.addEvent('click',function() {
	var parent = myElement.getParent();
	parent.setStyle('border','1px solid #f00');
	var tag = parent.get('tag');
	if(tag == 'a') {
		myElement.setStyle('display','none');
	}
	else {
		myElement.setStyle('display','block');
	}
	parent.tween('opacity',1);
});

Ačkoli je úryvek velmi čitelný, lze jej docela zkrátit:

myElement.addEvent('click',function() {
	var parent = myElement.getParent().setStyle('border','1px solid #f00').tween('opacity',1);
	myElement.setStyle('display',parent.get('tag') == 'a' ? 'none' : 'block');
});

Výše uvedený případ ukazuje oběť čitelnosti kvůli krátkému kódu. Bylo by snadné přehlédnout „setStyle“ přidaný k nadřazenému prvku. Po zvážení všech okolností, co je pro vás lepší?

The String Concern

Řetězcové literály nejsou řešeny kompresorem YUI. Takže následující úryvek...

//more above...
myElement.addEvent('click',function() {
	var halfOpacity = 0.5, fullOpacity = 1;
	if(myElement.hasClass('opacity')) {
		myElement.setStyle('display',halfOpacity).set('text','Can you see me?');
	}
	else {
		myElement.setStyle('display',fullOpacity).set('text','You cannot miss me!');
	}
});

//more below....

...se stane...

myElement.addEvent("click",function(){var b=0.5,a=1;if(myElement.hasClass("opacity")){myElement.setStyle("display",b).set("text","Can you see me?")}else{myElement.setStyle("display",a).set("text","You cannot miss me!")}});

I když jsou řetězce "zobrazení" a "text" použity dvakrát, nejsou zkráceny/nahrazeny proměnnou. Vzhledem k tomu, že se vzdáváme čitelnosti pomocí kompresoru YUI a chceme mít pouze co nejkratší kód, mám pocit, že výše uvedené je velkým selháním.

Stringový kompromis

Když je důležitá extrémní krátkost kódu s čitelností, vezmu řetězcové literály a vytvořím proměnné se stejným názvem úplně nahoře v mé aplikaci. Díky tomu budou mé proměnné při kódování čitelné a umožní YUI kód ​​skutečně rozdrtit. Zde je předchozí:

window.addEvent('domready',function() {
	
	/** settings on top; frequently used strings **/
	var _click = 'click', _opacity = 'opacity', _text = 'text';
	
	//now do everything below
	//....
	$(myElement).addEvent(_click,function() {
		var halfOpacity = 0.5, fullOpacity = 1;
		if(myElement.hasClass(_opacity)) {
			myElement.setStyle(_opacity,halfOpacity).set(_text,'Can you see me?');
		}
		else {
			myElement.setStyle(_opacity,fullOpacity).set(_text,'You cannot miss me!');
		}
	});
	//....
});

..a poté...

//37% compression -- nice!!
window.addEvent("domready",function(){var b="click",a="opacity",c="text";$(myElement).addEvent(b,function(){var e=0.5,d=1;if(myElement.hasClass(a)){myElement.setStyle(a,e).set(c,"Can you see me?")}else{myElement.setStyle(a,d).set(c,"You cannot miss me!")}})});

Úžasné - kód je stále čitelný a často používané řetězce lze komprimovat. Kompresní poměr našeho kódu pro tento blok samotný je 37 % – velmi významné číslo

Metody objektu:Příliš mnoho?

Můžete to udělat ještě o krok dále pomocí syntaxe ve stylu Array a proměnných metod, které pomohou kompresoru YUI. Předchozí:

window.addEvent('domready',function() {
	
	/** settings on top; frequently used strings **/
	var _click = 'click', _opacity = 'opacity', _text = 'text';
	var _addEvent = 'addEvent', _hasClass = 'hasClass', _setStyle = 'setStyle', _set = 'set';
	
	//now do everything below
	//....
	$(myElement).addEvent(_click,function() {
		var halfOpacity = 0.5, fullOpacity = 1;
		if(myElement[_hasClass](_opacity)) {
			myElement[_setStyle](_opacity,halfOpacity)[_set](_text,'Can you see me?');
		}
		else {
			myElement[_setStyle](_opacity,fullOpacity)[_set](_text,'You cannot miss me!');
		}
	});
	//....
});

...a poté...

//47% compression!  FTW!
window.addEvent("domready",function(){var c="click",b="opacity",f="text";var e="addEvent",d="_hasClass",g="setStyle",a="set";$(myElement).addEvent(c,function(){var i=0.5,h=1;if(myElement[d](b)){myElement[g](b,i)[a](f,"Can you see me?")}else{myElement[g](b,h)[a](f,"You cannot miss me!")}})});

Příliš mnoho? Předpokládám, že to závisí na dovednostní páce kodéra a touze zkrátit kód.

Co si myslíte?

Jaký je váš názor na epickou bitvu mezi čitelností a kompresí kódu? Myslím, že to opravdu záleží na vývojáři, ale rád bych slyšel váš názor!