Question

显然你有基本的Minify和Packer技术......

但是我想知道是否有更小的Javascript技术用于较小的代码（比如那些替代if语句中包含?和:等）。

然后，一旦我有精简的代码（...），我会缩小/打包它

Answer 1

帮助缩小器的一种非常好的技术是将变量传递给自调用函数：

(function(window, document, $, undefined) {
      // all of your application logic goes in here
}(window, window.document, jQuery));

然后，缩小器将为参数创建快捷方式，例如a, b, c, d。

(function(a, b, c, d) {
}(window, window.document, jQuery));

现在，window，document和jQuery（如果已使用）和undefined value通常会被访问。这将有助于进一步减少文件大小。

一些不错的Javascript快捷方式，在this article中进行了描述。

例如，使用~~代替Math.floor()。

<击>

var floored = Math.floor(55.2115);  // = 55

<击>

var floored = ~~(55.2115);  // = 55

另一个非常巧妙的事情是，几乎所有Javascript解释器都会为您转换数字。例如，我们希望有一个setTimeout在3分钟后触发。而不是像

那样做

setTimeout(function() {
}, 180000);

或60 * 3 * 1000，我们可以致电：

setTimeout(function() {
}, 18e4);

对于更大的数字，这可能更有意义，但无论如何： - ）

Answer 2

我喜欢的是

for(var i = arr.length;i--;)

它没有保存那么多代码，但有两个优点：

只访问.length
比传统的for循环“更快”

但它只有在数组的处理顺序无关紧要时才有效。

我想大家都知道的是如何设置默认值，使用逻辑OR：

function(must, option) {
    option = option || "defaultValue";
}

如果未设置option，则undefined的评估结果为false。 JavaScript返回满足表达式的变量的值（如果表达式未实现，则返回最后一个的值），我认为。当然，这取决于option可能具有的值，即如果一个可能的值为false，则无效。

将数字字符串转换为数字的快速方法是预先+。没有必要使用例如parseInt：

var n = +"123";
// instead of `var n = parseInt("123", 10)`

Answer 3

没有什么值得麻烦的 - 通过缩小和gzip，在这里保存一个字符和两个绝对不必要的微优化。你可以节省几个字节，是的，甚至可能是一百或两个字节，但是以牺牲你的开发时间为代价，当你可以创造出令人敬畏的东西时。

Answer 4

我只是以清晰可读的方式编写代码，然后使用Google闭包或类似方法对其进行优化和压缩。

http://code.google.com/closure/

来自Closure网站的报价：

Closure Compiler将JavaScript编译成紧凑的高性能代码。该编译器删除死代码并重写并最小化剩下的内容以便下载和删除跑得快。它还检查语法，变量引用和类型，并警告常见的JavaScript陷阱。

Answer 5

if (conditional && conditional) {
    doSomething();
}

可以成为：

conditional && conditional && doSomething();

Answer 6

这是一个令人钦佩的想法。但我认为代码的可读性，可理解性和可维护性比针对大小进行优化更为重要。整个jQuery 1.5的缩小版本只有85kB。这比许多网站上的许多图片要小。

很多人都写代码如下：

$('a#click_me').bind('click', function(){
    $(this).children('img').hide();
    ... etc...
    $(this).parent().addClass('xyz');
});
$('a#click_me').css('width',  '10px');
$('a#click_me').css('height', '10px');

而不是：

$('a#clickme').css({width: '10px', height: '10px'}).click(function(){
    var $this = $(this), href=this.href;
    $('img', this).hide();
    ... etc ...
    $this.parent().addclass('xyz');
});

即。尽可能使用地图({a: b, c: d})（例如，在上面的css()中）。

使用链接$(selector).method1().method2()。

使用例如$('img', this)而不是$this.children('img');

不要继续使用相同的选择器，将结果存储在变量中（例如$this）。

在适当的地方使用JavaScript元素，而不是jQuery，例如

href = this.href;   rather than   href = $(this).attr('href');

“简化”您的Javascript和jQuery的好技巧和窍门

6 个答案: