最短の JavaScript: アドレス バー読み込みスクリプト コード_JavaScript スキル

しかし、スクリプトが比較的長い場合、アドレスバーに大きなセクションをコピーする必要があり、非常に見苦しく、スクリプトを変更するのは簡単ではありません。したがって、スクリプトは通常、最初に別のファイルに記述され、その後、スクリプトは javascript: の形式でページに動的にロードされます。多くの Web プラグインは、この方法を使用してロードされます。

通常、動的読み込みを実装するには最も単純なコードを使用します。

コードをコピー コードは次のとおりです。

javascript:var o=document.createElement('script');o.src='...';document.body.appendChild(o);void(0)

もちろん、プラグインを読み込むにはこれで十分です。しかし、少し前に少し変更されたメソッドを見たので、このコードがどれほど短くなるのか疑問に思いました。
彼のコードはほぼ同じですが、より厳密になっています:

コードをコピー コードは次のとおりです:

javascript:(function(o){o.src='...';document.body.appendChild(o)})(document.createElement('script'));void(0)

コードは以前よりも長くなりますが、潜在的な競合を避けるために変数はクロージャー内に配置されています。また、クロージャのパラメータとして document.createElement を使用すると、var ワードが巧みに保存されます。
何もすることがなかったので、コードを合理化して効率化できないか考えました。ところで、js のさまざまな機能を確認してください。
もちろん、まず第一に、アドレス バー読み込みスクリプトには従うべきデフォルト ルールがいくつかあります。
1. グローバル変数を導入しない
2. 主流のブラウザーと互換性があります
3. 読み込みプロセスはページに影響を与えません
> グローバル変数には影響しません。プライベート変数を隠すためにクロージャを使用する必要があります。主流のブラウザと互換性を持たせるには、標準のメソッドを使用する必要があります。コードの長さを増やすだけです。
> 単に innerHTML を使用して要素を追加すると、既存の要素が更新される可能性があります。
そこで、段階的に分析を開始しました。
明らかに、最初に思い浮かぶのは、匿名閉鎖への呼び出しです。
通常、匿名クロージャは (function(){})() の形式で呼び出します。赤い優先度括弧は必須であり、それ以外の場合は誤った構文であることに注意してください。
ただし、別の形式を使用することもできます: function(){}() 先頭の数字は -!~ やその他の単項演算子で置き換えることができます。しかし、これはわずか 1 バイトの違いです。

もう 1 つの明らかな点は、void(0) のパラメータをクロージャ呼び出しの式に置き換えることができることです。 void は単なるキーワードですが、関数のような機能があり、どのパラメーターに対しても未定義を返します。 void がなければ、アドレスバーで javascript: を実行すると、そのページがスクリプト式の戻り値になるのですが、これは誰もが見たことがあるはずです。

ということで、明らかな観察の結果、3 文字がわずかに減りました。

コードをコピーします コードは次のとおりです。

javascript:void( function(o){ o.src ='...';document.body.appendChild(o)}(document.createElement('script')))

ただし、上記は表面的な観察です。では、注意深く分析してみましょう。

クロージャを使用する理由は、変数とページ間の競合を防ぐためです。では、変数を使用しないことは可能でしょうか?変数を回避する唯一の方法は、連鎖操作を使用することです。つまり、前の操作の戻り値を次の操作のパラメーターとして使用します。このコードには、スクリプト要素の作成/スクリプト要素の src 割り当て/スクリプト要素の追加の合計 3 つの操作があります。 W3C マニュアルをよく参照してください。DOM.appendChild は要素を追加するだけでなく、戻り値もこの要素です。 srcの代入と要素の追加の順序は入れ替え可能です。したがって、チェーン操作を使用して、クロージャと変数に完全に別れを告げることができます:

コードをコピー コードは次のとおりです:

javascript:void(document.body.appendChild(document.createElement('script')).src='...')


このステップでは、19 人のキャラクターを合理化しました。

引き続き観察してみましょう。上記のコードには 2 つのドキュメントが表示されます。代わりに短い変数を使用すると、単語の数を減らすことができます。ただし、変数を使用すると競合が発生するため、クロージャを再度使用する必要があります。 。 。よく思い出してみると、js には通常推奨されないものがあります。それは with です。はい、彼を使えばこの問題は解決できます。必要なのは with(document){...} だけです。コードは 1 行だけなので、中括弧のペアを削除することもできます。したがって、さらに 4 文字が削減されました:

コードをコピー コードは次のとおりです:

javascript: with( document)void(body.appendChild(createElement('script')).src='...')

void が最外層に存在しないことは注目に値します。 if や for と同様、それらはもはや式ではなくステートメントです。

この時点では、コード内のすべての文には独自の責任があり、繰り返される単語さえも見つかりません。もっと痩せることはできるでしょうか？どうしても探すならこのボイドから探すしかない。これを削除すると、アドレスバーが実行された後、そのページが script 要素の src 文字になります。当然削除は出来ません。ただし、アラートなどを変更してみることはできます。ダイアログ ボックスの後、ページは残ります。
前述したように、void の関数は未定義を返すだけですが、alert には戻り値がありません。ここでは、JavaScript と他の言語の違いについて話さなければなりません。他の言語では、関数/プロシージャという概念がほぼ 2 つあります。プロシージャは戻り値のない関数です。しかし、js では異なります。js では、「戻り値なし」であっても戻り値があり、それは未定義です。そのため、alert と void は同じ戻り値 (未定義) を持ちます。アドレス バーが実行され、結果がそのとおりである限り、ページはジャンプしませんが、false、0、null、NaN などの他の値は機能しません。

したがって、式に undefined を返させるだけで済みますが、式は void() より短くなければなりません。リテラル定数に加えて未定義を生成するには、値を返さない関数を呼び出すか、オブジェクトに存在しないプロパティにアクセスする必要があります。できるだけ簡潔に説明したいと思います。ページ内で jQuery が使用されている場合は、$.X を使用して未定義を取得できます。しかし、jq がなければ、変数 $ が存在するかどうかは保証されません。十分に短いグローバル変数が見つからないため、json を使用して [] や {} などの匿名変数を作成し、その存在しない属性 ([].X など) にアクセスできます。したがって、void に別れを告げることができます:

コードをコピー コードは次のとおりです:

javascript:with( document)body.appendChild(createElement('script')).src='...';[].X

これにより 1 バイトが削減されます。コードをマージして >javascript:with(document)[][body.appendChild(createElement('script')).src='...']

と置き換えることもできます。これにより、別のコードが削減されます。バイト。 実際、js のすべての変数は Object から継承されており、偶数も例外ではありません。したがって、[] を数字に完全に置き換えて、さらに 1 文字を減らすことができます:

コードをコピー

コードは次のとおりです。


javascript:with(document)0[body.appendChild(createElement('script')).src='...']

この時点では、コード内では、src 文字を除いて 76 バイトに短縮されます。 もちろん、最終的な限界はまだ模索中です。 。 。 Google の短縮ドメイン名サービス Google URL Shortener

を使用すると、スクリプトの URL を短縮できます。例:

Copy code


コードは次のとおりです:
javascript:with(document)0[body.appendChild(createElement('script')).src='http: //goo.gl/ QPp29']