DIYの縮小
どの縮小版も、不正なコードを適切に圧縮できません。
この例では、ミニファイアがどの程度機能するかを示します。
縮小する前にすべきこと
そしてjQueryに関して...私はjQueryを使用しません.jQueryは古いブラウザ用です、それは互換性の理由で作られました.. caniuse.comを確認してください、ほとんどすべてがすべてのブラウザで動作します（IE10も現在標準化されています）、私は今それだと思いますここだけでWebアプリケーションの速度が低下します...必要に応じて$()、独自の単純な関数を作成する必要があります。また、クライアントが100kbのjqueryスクリプトをダウンロードする必要がある場合に、コードを圧縮する必要があるのはなぜですか。圧縮されていないコードのサイズはどれくらいですか。5-6kb ..？簡単にするために追加した多数のプラグインについて話す必要はありません。
元のコード
関数を書くとき、アイデアが出てきて、何かを書き始め、時には次のコードのようなものになってしまいます。コードは機能します。今ではほとんどの人が考えをやめ、これを縮小版に追加して公開します。
function myFunction(myNumber){
var myArray = new Array(myNumber);
var myObject = new Object();
var myArray2 = new Array();
for(var myCounter = 0 ; myCounter < myArray.length ; myCounter++){
myArray2.push(myCounter);
var myString = myCounter.toString()
myObject[ myString ] = ( myCounter + 1 ).toString();
}
var myContainer = new Array();
myContainer[0] = myArray2;
myContainer[1] = myObject;
return myContainer;
}
これは縮小されたコードです（私は新しい行を追加しました）
使用して縮小（http://javascript-minifier.com/）
function myFunction(r){
for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){
e.push(a);
var o=a.toString();
t[o]=(a+1).toString()
}
var i=new Array;
return i[0]=e,i[1]=t,i
}
しかし、それらすべての変数、ifs、ループ、および定義が必要ですか？
ほとんどの場合、NOです。
- 不要なif、loop、varを削除
- 元のコードのコピーを保管してください
- 縮小版を使用する
オプション（パフォーマンスが向上し、コードが短くなります）
- 省略演算子を使用する
- ビット演算子を使用する（使用しないでください
Math）
- 一時変数にはa、b、c ...を使用します
- 古い構文を使用（
while、for...しないforEach）
- 関数の引数をプレースホルダーとして使用する（場合によっては）
- 不要なものを取り除く
"{}","()",";",spaces,newlines
- 縮小版を使用する
さて、ミニファイアがコードを圧縮できる場合は、間違って実行しています。
どの縮小版も、不正なコードを適切に圧縮できません。
DIY
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
上記のコードとまったく同じです。
パフォーマンス
http://jsperf.com/diyminify
あなたは常にあなたが必要なものを考える必要があります：
「誰もが以下のようなコードを書くことはない」と言う前に、ここで最初の10の質問を確認してください...
以下は、10分ごとに表示される一般的な例です。
再利用可能な状態が欲しい
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
存在する場合のみ警告します
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}
//same as
!condition||alert('yes')
//if the condition is not true alert yes
はいまたはいいえのアラート
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}else{
alert('no');
}
//same as
alert(condition?'yes':'no')
//if the condition is true alert yes else no
数値を文字列に、またはその逆に変換します
var a=10;
var b=a.toString();
var c=parseFloat(b)
//same as
var a=10,b,c;
b=a+'';
c=b*1
//shorter
var a=10;
a+='';//String
a*=1;//Number
数値を丸める
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
数をフロア
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
スイッチケース
switch(n)
{
case 1:
alert('1');
break;
case 2:
alert('2');
break;
default:
alert('3');
}
//same as
var a=[1,2];
alert(a[n-1]||3);
//same as
var a={'1':1,'2':2};
alert(a[n]||3);
//shorter
alert([1,2][n-1]||3);
//or
alert([1,2][--n]||3);
キャッチしてみてください
if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){
console.log(a[b][c][d][e]);
}
//this is probably the onle time you should use try catch
var x;
try{x=a.b.c.d.e}catch(e){}
!x||conole.log(x);
もっとなら
if(a==1||a==3||a==5||a==8||a==9){
console.log('yes')
}else{
console.log('no');
}
console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no');
これindexOfを読むのは遅いですhttps://stackoverflow.com/a/30335438/2450730
数
1000000000000
//same as
1e12
var oneDayInMS=1000*60*60*24;
//same as
var oneDayInMS=864e5;
var a=10;
a=1+a;
a=a*2;
//same as
a=++a*2;
ビットワイズ/略記について私が見つけたいくつかの素晴らしい記事/サイト：
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
お気に入りの検索エンジンで検索した場合、短縮形とビットウィージーのパフォーマンスを示す多くのjsperfサイトもあります。
私は何時間も行くことができました。しかし、今のところそれで十分だと思います。
質問がある場合は、質問してください。
そして覚える
どの縮小版も、不正なコードを適切に圧縮できません。