JavaScript を使用しているほとんどの人は知っていると思いますが、クリスマスをテーマにした新しい js1kがあります。今回エントリーする予定ですが、このような縮小コードを制作した経験はありません。この種の良いリソースを知っている人はいますか?
3906 次
7 に答える
14
GoogleClosureCompilerは優れたJavaScriptミニファイアです。
すばやく使用できる優れたオンラインツールがあります。または、ツールをダウンロードして、Webサイトのビルドプロセスの一部として実行することもできます。
編集：ミニファイアを使用する前に、JavaScriptを極端にミニファイするために使用できるトリックの非網羅的なリストを追加しました：
長い変数名
を短くする。などの組み込み変数への短い参照を使用しますd=document;w=window。
間隔
の設定setInterval関数は、関数または文字列のいずれかを取ることができます。使用する文字数を減らすには、文字列を渡しますsetInterval('a--;b++',10)。文字列を渡すと評価呼び出しが強制されるため、関数を渡すよりも遅くなることに注意してください。
数学計算の削減
例a=b+b+bはに削減できますa=3*b。
科学的記数法を使用すると、 2バイト節約
10000として科学的記数法で表すことができます。1E4
先行ゼロ
0.2 = .2を削除すると、バイトが節約されます
Terneryオペレーター
if (a > b) {
result = x;
}
else {
result = y;
}
次のように表すことができますresult=a>b?x:y
ドロップブレース
ブレースは、複数のステートメントのブロックにのみ必要です。
演算子の優先順位
コードの可読性を高める不要な角かっこを追加するのではなく、演算子の優先順位に依存します。
関数に値を渡すの
ではなく、変数の代入を短くします。function x(){a=1,b=2;...}()function x(a,b){...}(1,2)
既成概念にとらわれずに考える
標準的なやり方に自動的に手を伸ばさないでください。DOM要素への参照を取得するために使用するのではなく、whered.getElementById('p')を使用できますか。b.children[4]d=document;b=body
上記のトリックのリストの元のソース：
http://thingsinjars.com/post/293/the-quest-for-extreme-javascript-minification/
于 2010-11-27T14:42:41.963 に答える
4
次のリンクでは、このコンテストの js コードを縮小するための驚くほど優れたトリックを見つけることができます。
http://www.claudiocc.com/javascript-golfing/
一例: (セクション短絡演算子から抽出):
if (p) p=q; // before
p=p&&q; // after
if (!p) p=q; // before
p=p||q; // after
または、より難解なCanvas コンテキスト ハッシュ トリック:
// before
a.beginPath
a.fillRect
a.lineTo
a.stroke
a.transform
a.arc
// after
for(Z in a)a[Z[0]+(Z[6]||Z[2])]=a[Z];
a.ba
a.fc
a.ln
a.sr
a.to
a.ac
そして、ここに驚くほど優れたトリックを含む別のリソース リンクがあります: https://github.com/jed/140bytes/wiki/Byte- Saving-techniques
于 2014-03-04T06:40:04.153 に答える
4
スポルトは正しい。
コードの縮小化は、単独ではできません。最初にコードを最適化し、次にダーティな手動調整を行う必要があります。
Spolto のトリックのリストに加えて、古典的な構文の代わりに論理演算子の使用を奨励したいと思います。if else例:
次のコード
if(condition){
exp1;
}else{
exp2;
}
とある程度同等です
condition&&exp1||exp2;
考慮すべきもう1つのことは、複数の変数宣言です。
var a = 1;var b = 2;var c = 1;
次のように書き換えることができます。
var a=c=1,b=2;
中括弧についてもスポルトは正しい。それらをドロップする必要があります。しかしさらに、カンマで区切られた式を書くことで、より多くの式のブロックでもそれらを削除できることを知っておく必要があります (もちろん先頭に;を付けます):
if(condition){
exp1;
exp2;
exp3;
}else{
exp4;
exp5;
}
次のように書き換えることができます。
if(condition)exp1,exp2,exp3;
else exp4,exp5;
大したことではありませんが (数えている人は 1 文字/ブロックしか節約できません)、便利になるかもしれません。(ちなみに、最新のGoogle Closure Compilerもこのトリックを行います)。
言及する価値のあるもう 1 つのトリックは、物議を醸すwith機能です。
サイズを重視する場合は、コード サイズを削減できる可能性があるため、これを使用する必要があります。
たとえば、次のオブジェクト メソッドを考えてみましょう。
object.method=function(){
this.a=this.b;
this.c++;
this.d(this.e);
}
これは次のように書き換えることができます。
object.method=function(){
with(this){
a=b;
c++;
d(e);
}
}
ほとんどの場合、これは大幅に小さくなります。
ほとんどのコード パッカーとミニファイヤが行わないことは、コード内の大きな繰り返しトークンを小さなトークンに置き換えることです。これは厄介なハックで、 も使用する必要がありますがeval、スペースを確保するために使用しているので、問題にはならないと思います。このコードがあるとしましょう:
a=function(){/*code here*/};
b=function(){/*code here*/};
c=function(){/*code here*/};
/*...*/
z=function(){/*code here*/};
このコードには、多くの「関数」キーワードが繰り返されています。それらを 1 つの (未使用の) 文字に置き換えて、コードを評価できるとしたら?
これが私がそれを行う方法です：
eval('a=F(){/*codehere*/};b=F(){/*codehere*/};c=F(){/*codehere*/};/*...*/z=F(){/*codehere*/};'.replace(/function/g,'F'));
もちろん、コードは評価された文字列に縮小されるため、置き換えられるトークンは何でもかまいません (例: =function(){をFに置き換えて、さらに多くの文字を節約できます)。
複数のテキスト置換でコードを簡単に台無しにする可能性があるため、この手法は注意して使用する必要があることに注意してください。さらに、それが役立つ場合にのみ使用する必要があります (例:関数トークンが4 つしかない場合、それらをより小さなトークンに置き換えてからコードを評価すると、実際にはコードの長さが長くなる可能性があります。
var a = "eval(''.replace(/function/g,'F'))".length,
b = ('function'.length-'F'.length)*4;
alert("you should" + (a<b?"":" NOT") + " use this technique!");
于 2012-02-10T10:43:59.943 に答える
2
まず第一に、コードをミニファイヤに投げ込むだけでは、それほど役に立ちません。コードを記述するときは、ファイル サイズが非常に小さいことを念頭に置く必要があります。したがって、部分的には、すべてのトリックを自分で学ぶ必要があります。
また、ミニファイヤに関しては、UglifyJSが新しい流れ星です。その出力は GCC よりも小さく、高速です。また、純粋な JavaScript で記述されているため、適用されるすべてのトリックを見つけるのは簡単です。
しかし、最終的には、何か素晴らしいことに対するインテリジェントで小さな解決策を見つけられるかどうかにかかっています。
于 2010-11-27T15:01:58.967 に答える
1
于 2013-05-10T17:56:46.587 に答える