Question

我有一个生成大量DOM元素的JavaScript应用程序。这意味着我经常在我的脚本中使用document.createElement("tagname")。

我正在考虑使用这个简单的功能：

function c(e) {return document.createElement(e);}

我会继续用JavaScript（或者可能是CoffeScript）编写我的代码，并在代码中使用完整的document.createElement方法以提高可读性。但我希望当我“编译”或缩小代码时，document.createElement的所有实例都会被c函数替换。

我会对其他方法做同样的事情：document.getElementById等。我希望用这种技术可以将代码缩短10到20％。

是否有可以做到这一点的缩小器或编译器？它首先是否有意义？

Answer 1

我认为它不会给你带来那么多。未压缩的js文件可能会相当小，但压缩应该处理这样一个重复的字符串。所以我希望压缩（http gzip压缩）javascript文件的增益相当小。

Answer 2

我只是调用函数create(e)而不是c(e)。这样你就可以获得两全其美的可读性，而且你不需要打那么多。

Answer 3

大多数minifiers不会用更短的版本重新定义DOM库函数。但是，您可以在许多库中手动完成此模式，以减少和/或简化代码。所以自己做这件事并没有错。只要确保你在封闭内进行....

看看uglifier的选项，看看它能为你做些什么，例如：

{
  :mangle => true, # Mangle variables names
  :toplevel => false, # Mangle top-level variable names
  :except => [], # Variable names to be excluded from mangling
  :max_line_length => 32 * 1024, # Maximum line length
  :squeeze => true, # Squeeze code resulting in smaller, but less-readable code
  :seqs => true, # Reduce consecutive statements in blocks into single statement
  :dead_code => true, # Remove dead code (e.g. after return)
  :lift_vars => false, # Lift all var declarations at the start of the scope
  :unsafe => false, # Optimizations known to be unsafe in some situations
  :copyright => true, # Show copyright message
  :ascii_only => false, # Encode non-ASCII characters as Unicode code points
  :inline_script => false, # Escape </script
  :quote_keys => false, # Quote keys in object literals
  :beautify => false, # Ouput indented code
  :beautify_options => {
    :indent_level => 4,
    :indent_start => 0,
    :space_colon => false
  }
}

Answer 4

它确实有意义，但是自动执行此操作的缩小器必须对某些事情很聪明：

代码中被分解为新函数的部分是否重复了足够的次数以使这种重构更经济？
在其他函数中包装代码可能会带来性能损失：特别是当它的代码在时间紧迫的场景中经常使用时（分析器可以告诉它，一个minifier可能不能）。也许minifier可以限制深层嵌套函数调用等中的替换次数。

你最好手动做这件事。

Answer 5

完全取决于缩小器。 大部分都不这样做。例如代码：

window['a'] = document.createElement('div');
window['b'] = document.createElement('div');
window['c'] = document.createElement('div');

在Google Closure Compiler高级模式下：

window.a=document.createElement("div");window.b=document.createElement("div");window.c=document.createElement("div");

在YUI Compressor上：

window.a=document.createElement("div");window.b=document.createElement("div");window.c=document.createElement("div");

在jscompress.com上：

window["a"]=document.createElement("div");window["b"]=document.createElement("div");window["c"]=document.createElement("div")

我想编译器在出现奇怪的副作用时不愿意使用DOM方法，并且js中重复的字符串也会被gzip很好地压缩。

一个minifier可以这样做吗？（....这是一个好主意吗？）

5 个答案:

一个minifier可以这样做吗？ （....这是一个好主意吗？）

5 个答案:

一个minifier可以这样做吗？（....这是一个好主意吗？）