Google Closure中的变量 | Closure中的变量

本文介绍了Google Closure中的变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

http://closure-compiler.appspot.com/home

(function(){

var somevar = 'somevar';

this.each(function(){
var minify_var = {
  method1: somevar + '1',
  method2: somevar + '2',
  method3: somevar + '3',
  method4: somevar + '4',
  method5: somevar + '5'
};

alert(minify_var);
});

})();

这样的代码最小化为:

(function(){this.each(function(){alert({method1:"somevar1",method2:"somevar2",method3:"somevar3",method4:"somevar4",method5:"somevar5"})})})();

长度(+11个符号)绝对大于:

(function(){var a="somevar";this.each(function(){alert({method1:a+"1",method2:a+"2",method3:a+"3",method4:a+"4",method5:a+"5"})})})();

问题是，我们有两个变量，但只有一个.

实际上，对于小的脚本来说这还不错，但是对于大的脚本却可能会造成伤害.

添加了第一个变量，以使压缩后的代码更小一些，但Google忽略了它.

它也忽略了大多数其他类似这样的尺寸优化技巧.

可以解决吗?

这个问题是关于Google Closure，而不是JavaScript模式.

解决方案

编译器假定将文件提供给用户后会被压缩，因此会针对压缩的文件大小进行优化，而不是针对文件大小进行优化未压缩的大小.

我用两种版本的代码进行了测试.

版本A (将a作为全局变量进行处理可防止以后自动将其串联):

(function () {
    a = 'somevar';

    this.each(function () {
        var minify_var = {
            method1: a + '1',
            method2: a + '2',
            method3: a + '3',
            method4: a + '4',
            method5: a + '5'
        };

        alert(minify_var);
    });
})();

产生的缩小代码:

(function(){a="somevar";this.a(function(){alert({b:a+"1",c:a+"2",d:a+"3",e:a+"4",f:a+"5"})})})();

大小:97个字节(压缩后的 95 个字节).

版本B (与上面相同，但是a是局部变量，因此编译器会对其进行优化):

(function () {
    var a = 'somevar';

    this.each(function () {
        var minify_var = {
            method1: a + '1',
            method2: a + '2',
            method3: a + '3',
            method4: a + '4',
            method5: a + '5'
        };

        alert(minify_var);
    });
})();

产生的缩小代码:

(function(){this.a(function(){alert({b:"somevar1",c:"somevar2",d:"somevar3",e:"somevar4",f:"somevar5"})})})();

大小:110个字节(压缩后的 89 个字节).

因此，第二个版本未压缩时较大，但是当压缩时，第二个版本较小，因为变量声明消失了，并且gzip将重复部分压缩到大致相同的空间，而不管重复文本有多长. /p>

这是常见问题解答:

http://closure-compiler.appspot.com/home

(function(){

var somevar = 'somevar';

this.each(function(){
var minify_var = {
  method1: somevar + '1',
  method2: somevar + '2',
  method3: somevar + '3',
  method4: somevar + '4',
  method5: somevar + '5'
};

alert(minify_var);
});

})();

Code like this is minified to:

(function(){this.each(function(){alert({method1:"somevar1",method2:"somevar2",method3:"somevar3",method4:"somevar4",method5:"somevar5"})})})();

Which is definitely bigger at length (+11 symbols) than:

(function(){var a="somevar";this.each(function(){alert({method1:a+"1",method2:a+"2",method3:a+"3",method4:a+"4",method5:a+"5"})})})();

The problem is, we had two variables, but got one instead.

Actually it's not bad for a small scripts, but can hurt on a big ones.

First variable is added to make minified code a bit smaller, but google ignores it.

It also ignores most of the other size optimization tricks like this.

Can it be fixed?

This question is about Google Closure, not JavaScript patterns.

解决方案

The compiler assumes that the file will be gzipped when it's served to the user, so it optimizes for the compressed file size instead of the uncompressed size.

I tested with two versions of the code.

Version A (treating a as a global variable prevents it from being automatically concatenated later):

(function () {
    a = 'somevar';

    this.each(function () {
        var minify_var = {
            method1: a + '1',
            method2: a + '2',
            method3: a + '3',
            method4: a + '4',
            method5: a + '5'
        };

        alert(minify_var);
    });
})();

Resulting minified code:

(function(){a="somevar";this.a(function(){alert({b:a+"1",c:a+"2",d:a+"3",e:a+"4",f:a+"5"})})})();

Size: 97 bytes (95 bytes gzipped).

Version B (the same as above, but a is a local variable so the compiler does its optimizations):

(function () {
    var a = 'somevar';

    this.each(function () {
        var minify_var = {
            method1: a + '1',
            method2: a + '2',
            method3: a + '3',
            method4: a + '4',
            method5: a + '5'
        };

        alert(minify_var);
    });
})();

Resulting minified code:

(function(){this.a(function(){alert({b:"somevar1",c:"somevar2",d:"somevar3",e:"somevar4",f:"somevar5"})})})();

Size: 110 bytes (89 bytes gzipped).

So the second version is larger uncompressed, but when it's gzipped it's smaller because the variable declaration is gone and gzip compresses repetitive parts to roughly the same space regardless of how long the repeated text is.

Here's an entry from the FAQ:

这篇关于Google Closure中的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！