javascript 压缩_JavaScript：压缩代码与可读性

javascript 压缩

I've been coding some more advanced JavaScript applications lately and they've made me think a lot about coding styles. More specifically: shortness of code vs. readability.

最近，我一直在编写一些更高级JavaScript应用程序，它们使我对编码样式进行了很多思考。 更具体地说：代码简短性与可读性。

我的心态 (My Mindset)

I can be a conflicted developer sometimes, so here are a few thoughts that go through my mind:

有时我可能会成为一个有冲突的开发人员，所以以下是我想到的一些想法：

• "Tools like the YUI Compressor will compress my code enough."
  “诸如YUI Compressor之类的工具将足以压缩我的代码。”
• "Sure YUI Compressor will shorten the code but it wont address shortening strings as arguments."
  “当然，YUI Compressor会缩短代码，但不会解决将字符串作为参数的问题。”
• "With broadband internet, a few KB really wont matter."
  “有了宽带互联网，几KB的大小就没有关系了。”
• "With mobile bandwidth constraints, I need this JS file to be as tiny as possible."
  “由于移动带宽的限制，我需要这个JS文件尽可能的小。”
• "I want this app to be easy enough for me to step into and understand again within 5 minutes."
  “我希望这个应用程序足够简单，让我能够在5分钟内介入并再次理解。”
• "I want to be able to reuse some of this code in future projects without a bunch of hassle."
  “我希望能够在将来的项目中重用其中一些代码，而不会带来很多麻烦。”
• "How easy is it to judge 500 feet? If I stay a reasonable distance away from Christina Ricci, can they definitively prove I broke the restraining order?"
  “判断500英尺是多么容易？如果我与克里斯蒂娜·里奇(Christina Ricci)保持合理的距离，他们能否明确证明我违反了限制令？”

快速简便的示例 (A Quick and Easy Example)

Take the following verbose code snippet for example:

以下面的详细代码段为例：

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);
});

Though the snippet is very readable, it can be shortened quite a bit:

尽管该片段可读性强，但可以将其缩短很多：

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');
});

The above case shows a sacrifice of readability for the sake of short code. It would be easy to gloss over the "setStyle" added to the parent. All things considered, which is better for you?

出于简短代码的考虑，上述情况牺牲了可读性。 在添加到父级的“ setStyle”上进行修饰很容易。 考虑所有因素，哪个对您更有利？

弦乐关注 (The String Concern)

String literals aren't addressed by the YUI Compressor. So the following snippet...

YUI Compressor不会处理字符串文字。 因此，以下代码段...

//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....

...becomes...

...成为...

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!")}});

Even though the "display" and "text" strings are used twice, they aren't shortened/replaced by a variable. Since we're foregoing readability by using the YUI compressor and only desire to have the shortest code possible, I feel like the above is a major fail.

即使“显示”和“文本”字符串被使用两次，它们也不会被变量缩短/替换。 由于我们已经通过使用YUI压缩器实现了可读性，并且只希望拥有尽可能短的代码，因此我觉得上述情况是一个重大失败。

弦乐妥协 (The String Compromise)

When extreme shortness of code with readability is important, I'll take string literals and create variables with their same name at the very top of my application. Doing so keeps my variables readable when coding and allows YUI to really crunch the code. Here's the before:

当具有可读性的代码的极短性很重要时，我将使用字符串文字并在应用程序的顶部创建具有相同名称的变量。 这样做可以使我的变量在编码时保持可读性，并允许YUI真正处理代码。 这是之前的内容：

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!');
		}
	});
	//....
});

..and the after...

..及之后...

//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!")}})});

Awesome -- the code is still readable and frequently used strings can be compressed. Our code's compression ratio for this block alone becomes 37% -- a very significant number

很棒-代码仍然可读，可以压缩常用字符串。 仅此代码块，我们的代码压缩率就达到了37％，这是非常重要的数字

对象方法：太多了？ (Object Methods: Too Much?)

You could stake it a step further by using Array-style syntax and variable methods to assist the YUI Compressor. The before:

您可以通过使用数组样式的语法和变量方法来进一步帮助YUI Compressor，使它更进一步。 之前：

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!');
		}
	});
	//....
});

...and the after...

...之后

//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!")}})});

Too much? I suppose it depends on the skill lever of the coder and the desire to make the code short.

太多了？ 我想这取决于编码人员的技能水平和使代码简短的愿望。

你怎么看？ (What Do You Think?)

What are your thoughts on the epic battle between readability and code compression? I think it really depends on the developer but I'd love to hear your thoughts!

您对可读性和代码压缩之间的史诗般的战斗有何想法？ 我认为这确实取决于开发人员，但我很想听听您的想法！

翻译自: https://davidwalsh.name/javascript-short-code

javascript 压缩