2011-11-29 99 views
8

我有一個JavaScript應用程序,可以生成大量的DOM元素。這意味着我經常在腳本中使用document.createElement("tagname")縮小器可以做到嗎? (....這是一個好主意嗎?)

我想使用這個簡單的功能:

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

我會繼續寫我在JavaScript(或可能CoffeScript)代碼,並使用完整的使用document.createElement方法的代碼的可讀性。但我希望當我「編譯」或縮小代碼時,document.createElement的所有實例都被替換爲c函數。

我會爲其他方法做同樣的事情:document.getElementById等。我希望能用這種技術將我的代碼縮短10%到20%。

是否有可以做到這一點的縮小器或編譯器?首先它有意義嗎?

+0

你希望得到什麼好處? –

+1

如果沒有別的,你可以自己做這個「預縮小」步驟。腳本不應太難。 – cdeszaq

+4

你gzip你的文件?我敢打賭,從長遠來看,這並沒有太大的區別。 – RightSaidFred

回答

3

我不認爲這將會爲你帶來很多好處。未壓縮的js文件可能會比較小,但壓縮應該處理這樣一個重複的字符串。所以我期望壓縮(http gzip壓縮)JavaScript文件的收益相當小。

+0

我相信與別名函數gzipped大小實際上會更大,因爲別名函數本身計算額外字節... –

0

大多數minifier不會用較短的版本重新定義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 
    } 
} 
0

這有一定道理,但會自動完成一個minifier必須是聰明的幾件事情:

  1. 這是否真實因子而成爲新的功能重複的代碼部分足夠的時間使這重構更經濟?
  2. 附加函數中包裝代碼的潛在性能受到影響:特別是在時間關鍵型情況下(通常情況下,分析器可以告訴的是,縮小器可能無法使用)的代碼。也許縮小器可以在深度嵌套函數調用等中替換數量上限。

你可能會更好地手動執行此操作。

+0

如果我只是做一個重命名埃裏克建議:是否有性能問題:c = document.createElement? – Christophe

+0

對不起,Eric實際上糾正了他的評論。 – Christophe

0

它完全取決於縮小器。 大多數不這樣做。例如代碼:

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

在谷歌關閉編譯高級模式:

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

在YUI壓縮機:

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壓縮反正很好。

1

我只是調用函數create(e)而不是c(e)。這樣你就可以得到兩全其美的好處,可讀性和你不必輸入太多。

相關問題