mootools_使用MooTools剃字节

mootools

With mobile web technology continuing to gain momentum, one of the major concerns facing JavaScript frameworks developers is file size.  Most of the frameworks, most notably MooTools and Dojo, are extremely modular and allow you to add functionality as needed.  Be that as it may, there are still some ways you can shave bytes from your MooTools code while keeping the code readable.  Let's take a look at a few ways we can do this.

随着移动Web技术的不断发展，JavaScript框架开发人员面临的主要问题之一是文件大小。 大多数框架，尤其是MooTools和Dojo，都是极其模块化的，可让您根据需要添加功能。 尽管如此，您仍然可以通过一些方法从MooTools代码中剃除字节，同时保持代码的可读性。 让我们看一下可以做到这一点的几种方法。

美元函数 (Dollar Function)

document.id was to introduced to avoid naming collision with other frameworks (jQuery, for example) but it's still good practice to use closures to abstract the document.id name:

引入document.id是为了避免与其他框架(例如jQuery)命名冲突，但是使用闭包来抽象document.id名称仍然是一种好习惯：

(function($) {
	//now "$" is limited to just this code block
	//will save many, many bytes!
})(document.id);

document.id is great when you need it but most people don't use multiple frameworks on a given page;  thus the traditional "dollar function" will be fine.  document.id will save you 10 bytes with each usage.

当您需要document.id时，它很棒，但是大多数人在给定的页面上不使用多个框架； 因此，传统的“美元功能”会很好。 document.id每次使用都会为您节省10个字节。

渐隐值 (Fade Value)

MooTools' method names and argument values are meant to be common so that you may almost just guess the method name to accomplish something.  Many times the method name or argument value are exactly as you would speak them in English.  Thus is the case with the fade method, which you may pass "in" or out".  You may also, however, pass number values:

MooTools的方法名称和参数值是通用的，因此您几乎可以猜测方法名称可以完成某些事情。 方法名称或参数值很多时候都和您用英语说的完全一样。 淡入淡出方法就是这种情况，您可以“传入”或“传出”。但是，您也可以传递数字值：

//myElement.fade("out");
myElement.fade(0);

Using a number will save you 3-4 bytes (including quotes) with each usage.  Better yet is that the code is stays readable.

使用数字将为您每次使用节省3-4个字节(包括引号)。 更好的是代码保持可读性。

风格骆驼外壳 (Style Camel-casing)

As you know, getting and setting element styles via JavaScript requires you camel-case style names.  MooTools has an internal method of converting 'margin-top' to 'marginTop' so that you can set styles the same way you would within a stylesheet.  For the sake of saving space, you could just skip the dash and camel-case your CSS properties:

如您所知，通过JavaScript获取和设置元素样式需要使用驼峰式样式名称。 MooTools具有将'margin-top'转换为'marginTop'的内部方法，以便您可以像在样式表中一样设置样式。 为了节省空间，您可以跳过破折号和驼峰式大小写CSS属性：

//myElement.setStyle('background-color','#f00');
myElement.setStyle('backgroundColor','#f00');

A 1 byte saving (or more, depending on the property) on a single usage, but frequent usages will provide more savings.

一次使用可节省1个字节(或更多，取决于属性)，但是频繁使用将节省更多。

范围变量+压缩 (Scoped Vars + Compression)

This technique has been labeled "extreme" but I don't see anything wrong with it.  This technique basically entails creating variables to represent string literals so that a compressor can easily compress strings which otherwise wouldn't be compressed.  Check out the following before and after example:

该技术已被标记为“极端”，但我认为它没有任何问题。 这项技术基本上需要创建表示字符串文字的变量，以便压缩程序可以轻松压缩否则无法压缩的字符串。 在示例前后查看以下内容：

//regular technique - before compression
(function() {
	myElement.setStyle('opacity',0);
	myElement.setStyle('opacity',1);
	myElement.setStyle('opacity',0);
	myElement.setStyle('opacity',1);
	myElement.setStyle('opacity',0);
	myElement.setStyle('opacity',1);
})();

//regular technique - after compression
(function(){myElement.setStyle("opacity",0);myElement.setStyle("opacity",1);myElement.setStyle("opacity",0);myElement.setStyle("opacity",1);myElement.setStyle("opacity",0);myElement.setStyle("opacity",1)})();
	
//my technique - before compression
(function() {
	var opacity = 'opacity';
	myElement.setStyle(opacity,0);
	myElement.setStyle(opacity,1);
	myElement.setStyle(opacity,0);
	myElement.setStyle(opacity,1);
	myElement.setStyle(opacity,0);
	myElement.setStyle(opacity,1);
})();

//my technique - after compression
(function(){var a="opacity";myElement.setStyle(a,0);myElement.setStyle(a,1);myElement.setStyle(a,0);myElement.setStyle(a,1);myElement.setStyle(a,0);myElement.setStyle(a,1)})();

//my technique - extreme - before compression
(function() {
	var opacity = 'opacity', el = myElement, setStyle = 'setStyle';
	el[setStyle](opacity,0);
	el[setStyle](opacity,1);
	el[setStyle](opacity,0);
	el[setStyle](opacity,1);
	el[setStyle](opacity,0);
	el[setStyle](opacity,1);
})();

//my technique - extreme - after compression
(function(){var a="opacity",b=myElement,c="setStyle";b[c](a,0);b[c](a,1);b[c](a,0);b[c](a,1);b[c](a,0);b[c](a,1)})();

I contend this code is very readable but some would argue with me.  If you use the same string often, however, this technique could save you a *TON* of space.

我认为这段代码可读性强，但有人会与我争论。 但是，如果经常使用相同的字符串，此技术可以为您节省* TON *的空间。

到底... (In the end...)

None of these ideas are groundbreaking but when it comes to mobile technology, every byte helps.  Coupled with utilities like the YUI Compressor and likewise tools, you'll be able to shave KBs of load time with minimal code changes!

这些想法中没有一个是开创性的，但是对于移动技术，每个字节都有帮助。 加上诸如YUI Compressor之类的实用程序以及类似的工具，您将能够以最少的代码更改来减少KB的加载时间！

翻译自: https://davidwalsh.name/mootools-bytes

mootools