良好的提示和技巧，“精简”你的Javascript和jQuery

很明显，你有基本的缩减大小和包装机的技术...良好的提示和技巧，“精简”你的Javascript和jQuery

但我不知道是否有任何一些JavaScript技术较小的代码（像那些替代if语句其中?和:等）。

然后，一旦我有很好的精简代码（......）我会再压缩/包起来

2011-02-11 Barrie Reader

技巧很好，但可维护性和可读性如何？这些也应该考虑在内。大型网站JS项目可能很难维护，并且在没有它们的情况下交付。 – kjy112 2011-02-11 17:57:14

一个很好的技术来帮助minifiers，是将变量传递到自调用函数：

(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解释器将数字转换为您服务。例如，我们想要在3分钟后触发一个setTimeout。相反，这样做就像

setTimeout(function() { 
}, 180000);

或60 * 3 * 1000，我们可以叫：

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

这可能更有道理，在更大的数字，但无论如何:-)

来源

2011-02-11 13:51:56 jAndy

也喜欢这个！ Ty – 2011-02-11 13:54:55

+1否则，全局对象不能重命名。 – 2011-02-11 13:56:15

也喜欢Math.floor（）！ – 2011-02-11 14:00:42

没有价值麻烦 - 用缩小和gzip，在这里节省一个字符，两个肯定是不必要的微型优化。你可能会节省几个字节，是的，甚至可能会有一两百个字节，但是会牺牲你的开发时间，因为你可以制作出令人敬畏的东西。

来源

2011-02-11 13:52:19 Piskvor

我有点同意你 - 但在一天结束时 - 较小的代码更快...通常... – 2011-02-11 13:55:27

@Neurofluxation：[引用需要]。愚蠢的反例：你可以压缩代码，然后运行一个解压缩器 - 由于解压缩开销，它会更小*和*更慢。无论如何，如果你正在编写一个有趣的项目，尽一切办法，花时间在传统的微型优化97％ - 这将是一个学习的经验，但不要欺骗自己，这是一个主要特点。如果我正在为其他人编码，那么我很难用这种方式花费时间（除非目标确实是最优化的 - 谷歌可能会因为流量而关注从其主页上削减2个字节）。 – Piskvor 2011-02-11 14:01:10

理解 - 好的论点:)我只是喜欢优化！ * + 1 * – 2011-02-11 14:02:01

我喜欢的是

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)`

来源

2011-02-11 13:52:33

我只想把代码写在一个清晰可读的方式，然后使用谷歌关闭或相似的优化和压缩。从封闭网站

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

报价：

的关闭编译器编译JavaScript插入紧凑，高性能的代码。编译器删除死代码并重写并最小化剩余的内容，以便下载并快速运行。它还检查语法，变量引用和类型，并警告常见的JavaScript陷阱。

来源

2011-02-11 13:53:16 scunliffe

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

可以成为：

conditional && conditional && doSomething();

来源

2011-02-11 14:02:21 Matt

这是一个令人钦佩的想法。但我认为代码的可读性，可理解性和可维护性比对尺寸进行优化更重要。整个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');

来源

2011-02-11 14:14:39 Neil

良好的提示和技巧，“精简”你的Javascript和jQuery

回答

相关问题