2011-11-29 15 views
8

DOM要素のかなりの量を生成するJavaScriptアプリケーションがあります。それは私のスクリプトによくdocument.createElement("tagname")を使用することを意味します。小型化装置はこれを行うことができますか? (....それは良いアイデアですか?)

私はこの単純な関数を使用して考えています:

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

が、私は(多分またはCoffeScript)JavaScriptで自分のコードを書いておくと、読みやすくするためのコードで、フルのdocument.createElementメソッドを使用します。しかし、私はコードをコンパイルまたは縮小すると、document.createElementのすべてのインスタンスがc関数に置き換えられることが期待されます。

私は他のメソッドについても同じことをします:document.getElementByIdなど。このテクニックでコードを10〜20%短縮できることを願っています。

これを行うことができるミニカーやコンパイラはありますか?そしてそれは最初の意味で理にかなっていますか?

+0

あなたはどんなメリットがありますか? –

+1

他に何もないなら、あなたはいつでもこれを "前処理"のステップとして行うことができます。スクリプトにはあまりにも難しいはずがありません。 – cdeszaq

+4

ファイルをgzipしますか?私はそれが長期的には大きな違いをもたらさないと確信しています。 – RightSaidFred

答えて

3

私はそれを考えていませんそれほどあなたを得るでしょう。圧縮されていないjsファイルはかなり小さいかもしれませんが、圧縮はそのような繰り返し文字列を処理する必要があります。だから、私は圧縮された(HTTPのgzip圧縮)javascriptファイルの利得がかなり小さいと期待しています。

+0

別名関数自体が余分なバイト数になるので、エイリアス関数のgzippedサイズは実際に大きくなると思います。 –

0

ほとんどのミニライザは、短いバージョンの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

Ericが示唆しているとおり、名前を変更するとパフォーマンスが低下しますか?c = document.createElement? – Christophe

+0

申し訳ありませんが、Ericは実際に彼のコメントを修正しました。 – Christophe

0

完全にミニマイメアに依存します。 ほとんどこれをしないでください。例えばコード:YUIコンプレッサーオン

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

:jscompressオン

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

Googleの閉鎖コンパイラアドバンストモードで

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

。COM:

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

私は、コンパイラが奇妙な副作用の場合のエイリアスDOMメソッドに消極的であることを想像し、jsの中にも繰り返される文字列は、とにかくgzipで圧縮されただけでなくれます。

1

私はちょうど機能create(e)の代わりc(e)を呼び出します。そうすれば、両方の世界、読みやすさの良さを最大限に引き出すことができ、あまりタイプする必要はありません。

関連する問題