web-dev-qa-db-ja.com

ECMAScript 5(ES 5)-shimの提供方法は?

ECMAScript Fifth Edition(2009年12月リリース)では、新しいメソッドが多数導入されています(詳細は この表 を参照)。ただし、これらの新しいメソッドを実装していない古いブラウザーがまだ存在しています。

幸い、JavaScriptで記述された便利なスクリプトが存在します。 ES5-shim -これらのメソッドが存在しない環境で手動で実装します。

ただし、ES5-shimを提供する方法がわかりません...次のように、すべてのブラウザーにES5を "与える"必要があります。

<script src="es5-shim.js"></scipt>

または、次のように、本当に必要なブラウザだけを「悩ませる」ためにチェックを含める必要があります。

<script>
    if ( !Function.prototype.hasOwnProperty( 'bind' ) ) {
        (function () {
            var shim = document.createElement( 'script' );
            shim.src = 'es5-shim.js';
            var script = document.getElementsByTagName( 'script' )[0];
            script.parentNode.insertBefore( shim, script );
        }());
    }
</script>

(私はFunction.prototype.bindブラウザがすべての新しいECMAScript 5メソッドを実装しているかどうかを確認します。上でリンクした互換性テーブルによると、ECMAScript 5メソッドの実装に関しては、bindが「最後の要塞」です。

もちろん、このシムを有効にするには、他のすべてのスクリプトの前にbeforeを実行する必要があります。つまり、上記のSCRIPT要素を含めたいページの最初(HEAD内、他のすべてのSCRIPT要素の前)。

では、この2番目の例は、ブラウザーにECMAScript 5-shimを提供する良い方法でしょうか。それを行うより良い方法はありますか?

37
Šime Vidas

ES5-Shimは、ブラウザが実装していない部分のみをシムするので、すべてのブラウザに渡してください。シムが必要なものと必要でないものの検出を処理します。

ただし、場合によってはシムが正しく機能しない場合にリストされている警告に注意してください。私は過去にそれについて問題がありました、そしてあなたが答えが超単純であると気づくまでそれは多くの苦痛を引き起こします...

23
tkone

これは私にとってはうまくいくようです:

<!--[if lt IE 9]><script src="Java/es5-shim.min.js"></script><![endif]-->
14
silversky

現在、ES5-Shimで最適に機能するソリューションは、すべての環境でライブラリを使用し、実行時にパッチを適用する必要がある機能を検出できるようにすることです。コミュニティCDNから配信して、サイト間キャッシュヒットを最大化することをお勧めします。

とはいえ、機能検出、エージェントフィンガープリント、および動的なバンドルを組み合わせてターゲットのシムサブセットを自動的に生成および配信するシステムを作成するためのオープンな機会があります。問題の範囲はES5-Shimだけにとどまらず、あらゆる種類のシムに適用できます。

8
Kris Kowal