JavaScriptで欠落している5つの有用な機能

JavaScriptのコア機能は常に改善されており、プログラマーの作業を支援するために多くの新しいクラスと機能が追加されています。ただし、いくつかの基本的な実用的な機能はまだ欠落しており、jQuery、プロトタイプ、Mootoolsなどのライブラリを使用して実装する必要があります。これらのツールは素晴らしいですが、場合によっては、それらを使用することは少し面倒なようです。この記事では、JavaScriptを構築する必要がある5つの実用的な機能を紹介します。

キーポイント：

• JavaScriptにはいくつかの基本的な実用的な機能がありません。これは通常、jQuery、プロトタイプ、Mootoolsなどのライブラリを使用して実装する必要があります。ただし、一部の要件では、これらのライブラリを使用することは面倒です。
• getElementsByClassName()関数は、Internet Explorerのすべてのバージョンでサポートされていませんが、ラッパー関数を使用して古いバージョンと互換性があります。この関数は、クラス名を使用して要素を取得します。これは、HTML5が以前に持っていなかった機能です。
• extend()関数は、2つ以上のオブジェクトをマージするために使用されます。これは、プラグインを作成するときに必要なことがよくあります。この機能はネイティブJavaScript関数ではありませんが、簡単に構築できます。
• inArray()関数はJavaScriptのネイティブではありませんが、この関数を記述して、値が配列にあるかどうかをテストできます。この関数は、2つのオブジェクトが同じプロパティと値を持っている場合に一致するequals()関数を使用して強化できます。
• toggleClass()関数は、クラス名が存在するかどうかに基づいて、要素のクラス名を追加または削除するために使用されます。

getElementsbyclassname（）

javaScriptを使用すると、getElementById()関数を使用してIDで要素を取得できますが、HTML5の前には、クラス名を使用して1つ以上の要素を取得できるネイティブ関数はありませんでした。新しい関数はgetElementsByClassName()と呼ばれ、Firefox 3、Opera 9.5、Safari 3.1、およびGoogle Chromeのすべてのバージョンで使用できます。残念ながら、Webデザイナー向けのナンバーワンの敵ブラウザであるInternet Explorerのすべてのバージョンではサポートされていません。 Internet Explorer 9のみがgetElementsByClassName()をサポートしているため、古いバージョンの場合、ラッパー関数が必要です。私が見つけた最高の機能は、ロバート・ナイマンによって書かれました。彼の実装はMITライセンスの下でリリースされ、WhatWGによって推奨されています。それをサポートするブラウザでネイティブgetElementsByClassName()メソッドを使用し、その後、あまり知られていないdocument.evaluate()メソッドに戻ります。 9.27）開始）サポート。すべてのメソッドが失敗した場合、スクリプトはDOMの再帰トラバーサルに戻り、指定されたクラス名と一致する要素を収集します。コードは次のとおりです

<code class="language-javascript">var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};</code>

extend（）

プラグインを書いたことがある場合は、ほぼ確実に2つ以上のオブジェクトの統合に問題があります。これは、デフォルトの設定があり、ユーザーがいくつかのデフォルト値を置き換えることができる場合に頻繁に発生します。 jQueryを使用している場合、extend()を使用できますが、ネイティブJavaScriptについて話しているため、悪いニュースはネイティブ機能がないということです。幸いなことに、簡単に自分で構築できます。次の例では、jQueryメソッドと同じ機能でコードを作成する方法を示します。すべてのオブジェクトが同じメソッドを共有できるように、extend()メソッドをObjectプロトタイプに追加しました。

<code class="language-javascript">var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};</code>

equals（）

オブジェクトの比較は非常に一般的な操作です。このテストは、Strict Equality Operator（===）を使用して実行できますが、2つの変数がメモリ内の同じオブジェクトを参照するかどうかをテストしたくない場合があります。代わりに、2つのオブジェクトが同じプロパティと同じ値を持っているかどうかを知りたいです。これはまさに次のコードが行うことです。次のコードは私によって書かれていないことに注意してください。繰り返しになりますが、equals()にObject.prototypeに追加されました。

<code class="language-javascript">Object.prototype.extend = function() {
  // ... (代码与原文相同) ...
};</code>

inArray（）

javascript値が配列にあるかどうかをテストするネイティブ方法はありません。値が存在する場合にtrueを返す関数を書き込みます。この関数は、指定された値を配列の各要素と比較するだけです。前の2つの例と同様に、inArray()クラスのプロトタイププロパティにArrayが追加されます。

<code class="language-javascript">Object.prototype.equals = function(x) {
  // ... (代码与原文相同) ...
};</code>

この機能は、その単純さのために予想どおりに機能しません。文字列や数字などの原始的なタイプでは機能しますが、オブジェクトを比較すると、関数が同じオブジェクトを見つけた場合にのみtrueを返します。それがどのように機能するかをよりよく理解するために、次の例を見てみましょう。

<code class="language-javascript">Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};</code>

改善されたinArray()関数は次のとおりです

<code class="language-javascript">// ... (代码与原文相同) ...</code>

toggleclass（）

jQueryでよく使用される別の関数は

です。クラス名が存在するかどうかに基づいて、要素のクラス名を追加または削除します。単純なtoggleClass()バージョンを以下に示します。 toggleClass()

<code class="language-javascript">Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};</code>

改善された

関数は次のとおりです toggleClass()

<code class="language-javascript">function toggleClass(id, className) {
  // ... (代码与原文相同) ...
}</code>

結論

この記事では、JavaScriptで欠落していると思われる最も重要な機能のいくつかに焦点を当てています。もちろん、JavaScriptには他の何かが欠けていますが、今後数週間以内に表示されます。しかし、今、私は次の点を指摘したいと思います：

jQueryのようなフレームワークには多くの有用な機能がありますが、それらは頭上に増加します。したがって、いくつかの機能が必要な場合は、ネイティブJavaScriptを使用して、必要な関数を外部ファイルにグループ化します。
新しいJavaScriptバージョンで導入された関数を使用する場合は、削除しないでください。サポートされているかどうか、サポートされていない場合は条件付きステートメントを締めくくります。このようにして、古いブラウザを引き続きサポートします。
• getElementsByClassName()
に示すように、可能な限りオブジェクトのプロトタイプに機能を追加します。すべてのインスタンスは同じ方法を共有し、パフォーマンスを向上させます。
• extend()
の2番目のバージョンに示すように、コードを可能な限り再利用します。
• toggleClass()

写真は、変更されていない元の形式と位置のままです。

以上がJavaScriptで欠落している5つの有用な機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。