JavaScript でポリフィルを使用するにはどうすればよいですか?

JavaScript 開発者は、パフォーマンスを向上させ、より優れた機能を追加するために、常に JavaScript 言語に新機能を追加しています。古いバージョンのブラウザでは新機能がサポートされていない場合があります。

たとえば、べき乗演算子は ES7 で導入され、オブジェクトの末尾のカンマも ES7 で有効です。さて、アプリケーションの開発中に、アプリケーションにべき乗演算子を追加しました。新しいバージョンのブラウザでも動作しますが、非常に古いバージョンのブラウザを使用している場合は、ブラウザ エンジンがべき乗演算子をサポートしていないなどのエラーが発生する可能性があります。

したがって、polyfill を使用してこのエラーを回避できます。その意味を理解するために、ポリフィルという単語を 2 つの部分に分けてみましょう。 Poly はたくさんという意味で、fill は隙間を埋めるという意味です。これは、ブラウザが JavaScript のデフォルト機能をサポートしていない場合、ブラウザ機能のギャップを埋めるためにさまざまなテクニックが必要になることを意味します。

ブラウザが機能をサポートしていない場合の解決方法は2つあります。 1 つはポリフィル、もう 1 つはトランスパイラーです。トランスレータは、ブラウザがサポートできるようにコードを下位バージョンに変換します。たとえば、ES7 バージョンの JavaScript でコードを作成し、トランスパイラーを使用してそれを ES6 または ES5 に変換し、古いブラウザでサポートされるようにすることができます。

ここでは、ポリフィルの概念を使用するさまざまな例を学びます。

ユーザーは、次の構文に従ってポリフィルの概念を使用して JavaScript メソッドを手動で実装できます。

上記の構文の文字列プロトタイプにメソッドを追加しました。 Method_name はメソッド名を表します。複数のパラメーターを持つ関数をメソッドに割り当てます。

例 1 (ポリフィルを使用しない includes() メソッド)

次の例では、String オブジェクトの組み込み contains() メソッドを使用します。文字列を定義し、includes() メソッドを使用して、文字列に特定の単語または部分文字列が含まれているかどうかを確認しました。

例 2 (ポリフィルを使用した includes() メソッド)

上記の例では、組み込みの include() メソッドを使用しました。この例では、includes() メソッドのポリフィルを定義します。ブラウザが include() メソッドをサポートしていない場合は、ユーザー定義の include() メソッドが実行されます。

ここでは、文字列オブジェクトのプロトタイプに include() メソッドを追加します。この関数では、検索文字列のタイプが正規表現の場合、エラーがスローされます。また、「pos」パラメータはオプションなので、ユーザーが渡さない場合はnilとして扱われます。最後に、indexof() メソッドを使用して文字列に単語が含まれているかどうかを確認し、結果に基づいてブール値を返します。

例 3 (filter() メソッドのポリフィルの実装)

以下の例では、filter() メソッドにポリフィルを実装しました。まず、参照配列が空ではないこと、およびコールバックが関数であることを確認します。その後、配列を反復処理し、配列値ごとにコールバック関数を実行します。コールバック関数が true を返した場合、それを出力配列にプッシュします。最後に、フィルタリングされた値を含む出力配列を返します

このチュートリアルでは、include() メソッドと filter() メソッドのポリフィルを実装する方法を説明します。ただし、ユーザーは if-else ステートメントを使用して、ブラウザーが特定のメソッドをサポートしているかどうかを確認できます。そうでない場合はユーザー定義のメソッドが実行され、そうでない場合は組み込みメソッドが実行されます。

以上がJavaScript でポリフィルを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。