コード圧縮技術

Jed Schmidt、Thomas Fuchs、Dustin Diaz-JavaScriptコミュニティでよく知られている人が最近新しい娯楽を見つけました-1ツイート以下の有用なもの、つまり140バイトを書いています。 さらに、ドメイン-140byt.esを登録しました。このドメインでは、誰もが超小型関数の作成に手を貸すように招待されています。

当然、ソースのサイズを縮小するためのすべての最も洗練された方法とテクニックが使用されます。 彼らは、私が翻訳することを決めたヒントのあるウィキページを持っています。

この方法で処理されたコードの可読性はゼロになる傾向があるため、サイズが本当に重要な場合にのみこれらのトリックを使用する価値があります。 たとえば、JS1kコンテストに参加する場合。

だから。

引数


アルファベット順に1文字の位置引数を使用する


関数の引数はできるだけ短く、実行時に複数回使用される可能性が高いため、意味のある名前を付けようとするよりも、位置の観点から考慮してアルファベット順に名前を付ける方が簡単です。
function(t,d,v,i,f){...} //  function(a,b,c,d,e){...} //  


長さではなく引数を確認する


inを使用inて、引数を確認できます。
 arguments.length>1||(cb=alert) //  1 in arguments||(cb=alert) //  


変数


var代わりに「余分な」引数を使用します


var変数を宣言する代わりに、関数で追加の引数を指定することにより、数バイトを節約できます。
 function(a){var b=1;...} //  function(a,b){b=1;...} //  


変数を数回使用する


 setTimeout(function(){for(var i=10;i--;)... }, a) //  setTimeout(function(){for(a=10;a--;)... }, a) //  


可能な限り割り当てを使用する


割り当て演算子は割り当てられた値を返すため、割り当てと検証を同時に使用できます。
 a=this.localStorage;if(a){...} //  if(a=this.localStorage){...} //  


配列を使用して変数を交換する


追加の変数を宣言しないように、配列は一時的なストレージとして使用できます。
 var a=1,b=2,c;c=a;a=b;b=c //  var a=1,b=2;a=[b,b=a][0] //  


追加するときにキャストを使用する


JSでの型変換は非常に奇妙に動作し、最も一般的なバグの原因の1つです。 ただし、さまざまな興味深い方法で使用して、コードサイズを削減できます。
たとえば、 pubsub実装では Jed Schmidtは負の数の変数をデクリメントし、それを文字列に追加して"somestring-123"ようなものを得ました。
その後、別の場所で.split('-')を使用してソース文字列を取得しました。

サイクル


ループの本体を下げる


多くの場合、条件内にすべてのロジックを実装し、サイクルの本体を節約できます。
このアプローチの良い例は、 timeAgo関数で見ることができます。

whileの代わりにforを使用する


forwhileは通常同じ量のバイトfor使用しますが、 forはより多くの制御と割り当ての可能性を可能にします。
 while(i--){...} //  for(;i--;){...} //  i=10;while(i--){...} //  for(i=10;i--;){...} //  


「真の」配列で高速反復を使用する


メンバーがすべてtrueであることがわかっている配列がある場合、より短いループエントリを使用できます。
 for(a=[1,2,3,4,5],l=a.length,i=0;i<l;i++){b=a[i];...} //  for(a=[1,2,3,4,5],i=0;b=a[i++];){...} //  


for..inを割り当てとともに使用してオブジェクトキーを取得する


 a=[];for(b in window)a.push(window[b]) //  a=[];i=0;for(a[i++]in window); //  


オペレーター


オペレーターの優先度を学ぶ


この知識は、ブラケットを大幅に節約するのに役立ちます。
Mozilla Webサイトでこの記事を調べることから始めることができます。

〜c indexOf使用


 hasAnF="This sentence has an f.".indexOf("f")>=0 //  hasAnF=~"This sentence has an f.".indexOf("f") //  


ブロックではなくコンマを使用してステートメントを順番に実行します


 with(document){open();write("hello");close()} //  with(document)open(),write("hello"),close() //  


undefined記述に短い方法を使用する


undefined代わりにundefined []._またはvoid 0使用できます。
""._1.._および[][0]にはオプションがありますが、 はるかに低速です。

演算子の前にオプションのスペースを削除します


場合によっては、演算子の後のスペースを簡単に削除できます。
 typeof [] //  typeof[] //  


数字


~~または0|使用し0| Math.floor代わりに


 rand10=Math.floor(Math.random()*10) //  rand10=0|Math.random()*10 //  


大きなラウンド数に指数形式を使用する


 million=1000000 //  million=1e6 //  


大きな2進数にビットシフトを使用する


 color=0x100000 //  color=1<<20 //  


Infinity代わりに1/0を使用します


短いです。 さらに、ゼロで除算することは常に楽しいです。
 [Infinity,-Infinity] //  [1/0,-1/0] //  


偽のゼロを使用する


数値を比較する代わりに、値をゼロに減らしてその真理を確認する方が短い場合があります。
 a==1||console.log("not one") //  ~-a&&console.log("not one") //  


~を使用して値を1つずつ変更します


単項マイナスと組み合わせて、これにより、たとえば、まだ定義されていない変数をインクリメントできます。
 // i = undefined i=i||0;i++ //  i=-~i //  



ゼロで改行する


区切り文字としてゼロを使用すると、 splitメソッドを使用して文字列をsplitするときに2バイトを節約できます。
 'alpha,bravo,charlie'.split(',') //  'alpha0bravo0charlie'.split(0) //  


ブラウザのメソッドlink使用する


ブラウザの行には、htmlリンクを作成するあまり知られていないlinkメソッドがあります。
 html="<a href='"+url+"'>"+text+"</a>" //  html=text.link(url) //  


replaceおよびexecメソッドを使用して、行を反復処理します


これらのメソッドを使用すると、関数を2番目の引数として渡すことができます。 これは、回線上での便利な反復に使用できます。
使用例: テンプレートUUID

配列を使用して単純な文字列を作成します。


 for(a="",i=32;i--;)a+=0 //  a=Array(33).join(0) //  


正規表現


{n}を使用して、正規表現を短くします。 たとえば、 /\d\d\d/ではなく、 /\d{3}/ /\d\d\d/です。 その逆/\d\d/ /\d{2}/代わりに/\d{2}/

通常のコンストラクターの代わりにevalを使用できます。
 r=new RegExp("{"+p+"}","g") //  r=eval("/{"+p+"}/g") //  


ブール値


使用してください! trueおよびfalseを作成する数値を使用しfalse
 [true,false] //  [!0,!1] //  


機能


ループではなく名前付き関数を再帰に使用する


不要な変数を使用せずにスタックを介して値をドラッグできるため、これは多くの場合より短くなります。
例として、 ウォーク機能。

名前付き関数を使用して状態を保存する


関数呼び出し間で状態を保存する必要がある場合、関数をオブジェクトとして使用し、そのプロパティにデータを保存できます。
 function(i){return function(){console.log("called "+(++i)+" times")}}(0) //  (function a(){console.log("called "+(ai=-~ai)+" times")}) //  0,function a(){console.log("called "+(ai=-~ai)+" times")} //   


引数なしでコンストラクターを呼び出すときに角括弧を省略します


 now = +new Date() //  now = +new Date //  


可能な場合は新しいキーワードを省略します


一部のデザイナーは、 newキーワードをまったく使用する必要はありません。
 r=new Regexp(".",g) //  r=Regexp(".",g) //  l=new Function("x","console.log(x)") //  l=Function("x","console.log(x)") //  


Returnステートメント


変数以外のものを返す必要がある場合、 return後にスペースを入れる必要returnません。
 return ['foo',42,'bar']; //  return['foo',42,'bar']; //  return {x:42,y:417}; //  return{x:42,y:417}; //  return .01; //  return.01; //  


今のところすべてです。

一般的に、彼らの仕事の成果に慣れることをお勧めします。 複雑なものを140バイトに収めようとする試みでは、人は時々驚異的な働きをします。 経験豊富なプログラマーでさえ、彼らのコードに何か新しいものを見つけられると思います。

Source: https://habr.com/ru/post/J119898/


All Articles