次期 jQuery 3_jquery の新機能は何ですか?

jQuery が誕生してから 10 年が経過しましたが、その長寿には明らかに理由があります。 jQuery もプロトタイプに次ぐ優れた Javascript ライブラリです。 CSS3 およびさまざまなブラウザー (IE 6.0 以降、FF 1.5 以降、Safari 2.0 以降、Opera 9.0 以降) と互換性のある軽量の JS ライブラリです。jQuery2.0 以降のバージョンでは、IE6/7 /8 ブラウザーはサポートされなくなります。 jQuery を使用すると、ユーザーは HTML (Standard Universal Markup Language に基づくアプリケーション)、イベントをより簡単に処理し、アニメーション効果を実装し、Web サイトに AJAX インタラクションを簡単に提供できるようになります。 jQuery のもう 1 つの大きな利点は、ドキュメントが非常に充実しており、さまざまなアプリケーションが詳細に説明されており、選択できる成熟したプラグインも多数あることです。

今後数週間以内に、jQuery はバージョン 3.0 の正式リリースという重要なマイルストーンを迎えることになります。 jQuery 3 では、多数のバグが修正され、新しいメソッドが追加され、いくつかのインターフェイスが削除され、少数のインターフェイスの動作が変更されました。この記事では、jQuery 3 によって導入された最も重要な変更点を取り上げます。

新機能

まず、jQuery 3 の最も重要な新機能について説明しましょう。

for...of ループ

jQuery 3 では、for...of ループ ステートメントを使用して、jQuery コレクション内のすべての DOM 要素を反復できます。この新しい反復アプローチは、ECMAScript 2015 (別名 ES6) 仕様の一部です。このメソッドは、「反復可能なオブジェクト」(Array、Map、Set など) をループできます。

この新しい反復メソッドを使用する場合、ループ本体で毎回取得する値は jQuery オブジェクトではなく、DOM 要素です (翻訳: これは .each() メソッドに似ています)。この新しい反復方法により、jQuery コレクションを操作するときにコードをわずかに改善できます。

この反復方法がどのように機能するかを理解するために、ページ内の各入力要素に ID を割り当てる必要があるというシナリオを想定してみましょう。 jQuery 3 より前では、次のように記述できます:

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

var $inputs = $('input');for (var i = 0; i $inputs[i].id = 'input-' + i;
}

jQuery 3 では、次のように記述できます:

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

var $inputs = $('input');var i = 0 ; for($inputs の var input) {
input.id = 'input-' + i++;
}

(注釈: 実際、jQuery 自体には .each() メソッドがあり、可読性は悪くありません。)

$.get() 関数と $.post() 関数の新しいシグネチャ

jQuery 3 では、2 つのユーティリティ関数 $.get() と $.post() に新しいシグネチャが追加され、$.ajax() のインターフェイス スタイルとの一貫性が保たれています。新しい署名は次のようになります:

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

$.get([settings])

$.post([設定])

settings は、複数のプロパティを含むオブジェクトです。その形式は、前に $.ajax() に渡したパラメータの形式と同じです。このパラメータ オブジェクトをより明確に理解したい場合は、$.ajax() ページの関連説明を参照してください。

$.get() と $.post() のパラメータ オブジェクトと $.ajax() に渡されるパラメータの唯一の違いは、前者のメソッド属性が常に無視されることです。その理由は実際には非常に単純で、$.get() と $.post() 自体が、Ajax リクエストを開始するための HTTP メソッドをすでにプリセットしています (当然、$.get() は GET、$.post() は POST です)。言い換えれば、通常の人間は $.get() メソッドを使用して POST リクエストを送信したいとは思わないでしょう。

次のコードがあるとします:

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

$.get({

URL: 'https://www.audero.it',
メソッド: 'POST' // このプロパティは無視されます
//この属性は無視されます}）;

メソッド属性をどのように記述しても、このリクエストは常に GET として送信されます。

requestAnimationFrame() を使用してアニメーションを実装します

すべての最新ブラウザ (IE10 以降を含む) は requestAnimationFrame をサポートしています。 jQuery 3 は、この API を内部で使用してアニメーションを実装し、よりスムーズでリソース効率の高いアニメーション効果を実現します。

unwrap() メソッド

jQuery 3 では、オプションのセレクター パラメーターが unwrap() メソッドに追加されます。このメソッドの新しいシグネチャは次のとおりです:

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

unwrap([selector])

この機能を使用すると、このメソッドにセレクター式を含む文字列を渡し、それを使用して親要素内で一致させることができます。一致する子要素がある場合は、この子要素の親レイヤーがリフトされます。一致しない場合は、操作は実行されません。

変更された機能

jQuery 3 では、一部の機能の動作も変更されています。

:表示および:非表示

jQuery 3 では、:visible フィルターと :hidden フィルターの意味が変更されます。要素にレイアウト ボックスがある限り、幅と高さがゼロであっても、その要素は :visible とみなされます。たとえば、コンテンツのない br 要素と inline 要素は、:visible フィルターによって選択されるようになりました。

ページに次の構造が含まれているとします:

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

次に、次のステートメントを実行します:

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

console.log($('body :visible') .length) ;

jQuery 1.x と 2.x では 0 が返されますが、jQuery 3 では 2 が返されます。

data() メソッド

もう 1 つの重要な変更は、data() メソッドに関連しています。その動作は、Dataset API 仕様と一致するようになりました。 jQuery 3 はすべてのプロパティ キー名をキャメルケースに変換します。次の要素を例として、詳しく見てみましょう:

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

jQuery 3 より前のバージョンを使用している場合、次のコードを実行すると:

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

var $elem = $('#container');
$elem.data({ 'my-property': 'hello'});console.log($elem.data());

コンソールに次の結果が表示されます:

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

{my-property: "hello"}

jQuery 3 では、次の結果が得られます:

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

{myProperty: "hello"}

jQuery 3 では、属性名がキャメルケースになり、ダッシュが削除されたことに注意してください。一方、以前のバージョンでは、属性名はすべて小文字のままで、ダッシュもそのまま保持されます。

遅延オブジェクト

jQuery 3 では、Deferred オブジェクトの動作も変更されます。 Deferred オブジェクトは Promise オブジェクトの前身の 1 つと言え、Promise/A+ プロトコルとの互換性を実現します。このオブジェクトとその歴史は非常に興味深いです。さらに詳しく知りたい場合は、jQuery の公式ドキュメントを読むか、私の著書『jQuery in Practice (Third Edition)』を読んでください。この本では jQuery 3 についても説明しています。

jQuery 1.x および 2.x では、Deferred に渡されたコールバック関数でキャッチされない例外が発生した場合、プログラムの実行は直ちに中断されます (注釈: サイレントに失敗します。実際、ほとんどのコールバック関数の動作はこれと同じです) jQuery ではすべてこのようです)。ネイティブ Promise オブジェクトの場合はそうではありません。例外がスローされ、window.onerror に達するまで上向きにバブリングが続きます (通常、バブリングの終了点はここです)。このエラー イベントを処理する関数を定義しない場合 (通常は定義しません)、例外情報が表示され、プログラムの実行が停止します。

jQuery 3 はネイティブ Promise オブジェクトのパターンに従います。したがって、コールバック内で生成された例外は失敗ステータス (拒否) を引き起こし、失敗コールバックをトリガーします。失敗コールバックが実行されると、プロセス全体が続行され、後続の成功コールバックが実行されます。

この違いをよりよく理解するために、小さな例を見てみましょう。たとえば、次のコードがあります:

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

var deferred = $.Deferred();
延期
.then(function() { throw new Error('エラー');
})
.then( function() { console.log('成功 1');
}, function() { console.log('失敗 1');
}
)
.then( function() { console.log('成功 2');
}, function() { console.log('失敗 2');
}
);
deferred.resolve();

jQuery 1.x および 2.x では、最初の関数 (エラーをスローする関数) のみが実行されます。さらに、window.onerror のイベント ハンドラーを定義していないため、コンソールに「Uncaught Error: An error」と出力され、プログラムの実行が中止されます。

jQuery 3 では、全体の動作がまったく異なります。コンソールに「失敗 1」と「成功 2」のメッセージが表示されます。その例外は最初の失敗コールバックによって処理され、例外が処理されると、後続の成功コールバックが呼び出されます。

SVG ドキュメント

jQuery (jQuery 3 を含む) のどのバージョンも、SVG ドキュメントをサポートすると正式に主張したことはありません。実際、機能するメソッドはたくさんあります。また、以前は機能しなかったメソッド (クラス名を操作するメソッドなど) もいくつかありますが、それらも jQuery 3 で更新されています。したがって、jQuery 3 では、addClass() や hasClass() などのメソッドを安全に使用して SVG ドキュメントを操作できるはずです。

非推奨となり削除されたメソッドとプロパティ

上記の機能強化を追加する一方で、jQuery はいくつかの機能も削除および非推奨にしました。

非推奨のbind()、unbind()、delegate()、およびundelegate()メソッド

jQuery はずっと前に on() メソッドを導入しました。このメソッドは、bind()、delegate()、live() などのメソッドを置き換える統合インターフェイスを提供します。同時に、jQuery は、unbind()、undelegated()、die() を置き換える off() メソッドも導入しました。それ以来、bind()、delegate()、unbind()、および undelegate() は非推奨になりましたが、まだ存在しています。

jQuery 3 はついにこれらのメソッドを「非推奨」としてマークし始め、将来のバージョン (おそらく jQuery 4) で完全に削除する予定です。したがって、将来のバージョンでの変更を心配する必要がないように、プロジェクト内で on() メソッドと off() メソッドを統一して使用してください。

load()、unload()、error() メソッドを削除します

jQuery 3 は、非推奨としてマークされているload()、unload()、error() メソッドを完全に廃止しました。これらのメソッドはかなり前に (jQuery 1.8 の時点で) 非推奨としてマークされていましたが、削除されていません。これらのメソッドに依然として依存するプラグインを使用している場合、jQuery 3 にアップグレードするとコードが破損します。したがって、アップグレードプロセス中は注意してください。

コンテキスト、サポート、セレクター属性を削除します

jQuery 3 は、非推奨としてマークされているコンテキスト、サポート、セレクターなどの属性を完全に放棄します。上記のように、jQuery 3 にアップグレードする場合は、使用しているプラ​​グインに注意してください。

バグ修正

jQuery 3 では、以前のバージョンの非常に重要なバグがいくつか修正されています。このセクションでは、コーディング習慣に大きな影響を与えるはずなので、そのうちの 2 つに焦点を当てます。

width() と height() の戻り値は四捨五入されなくなりました

jQuery 3 では、width()、height()、およびその他の関連メソッドのバグが修正されています。これらのメソッドの戻り値は丸められなくなります。これは、この丸め動作によって要素の位置決めが不便になる場合があるためです。

詳しく見てみましょう。幅が 100 ピクセルのコンテナ要素があり、それには 3 つの子要素が含まれており、幅は 3 分の 1 (つまり 33.333333%) であるとします。

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

私の名前

は

アウレリオ デ ロサ

jQuery 3 より前のバージョンでは、次のコードを使用して子要素の幅を取得しようとすると...

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

$('.container div').width() ;

…その場合、得られる結果は 33 になります。その理由は、jQuery が値 33.33333 を四捨五入するためです。 jQuery 3 では、このバグが修正されたため、より正確な結果 (浮動小数点数など) が得られるようになります。

wrapAll() メソッド

jQuery 3 では、関数がパラメータとして渡されたときに発生する、wrapAll() メソッドのバグも修正されています。 jQuery 3 より前のバージョンでは、関数が WrapAll() メソッドに渡されると、jQuery コレクション内の各要素が個別にラップされていました。つまり、動作は関数をwrap()に渡すときとまったく同じです。

この問題を修正する一方で、別の変更も導入されました。jQuery 3 では、この関数は 1 回しか呼び出されないため、jQuery コレクション内のすべての要素をこの関数に渡すことはできません。したがって、この関数の実行コンテキスト (this) は、現在の jQuery コレクションの最初の要素のみを指します。

jQuery 3 ベータ 1 のダウンロード方法

ここまで読んだあなたは、おそらく jQuery 3 の最初のベータ版を試してみたくなるでしょう。このバージョンは、次の 2 つのアドレスから入手できます:

非圧縮バージョン: https://code.jquery.com/jquery-3.0.0-beta1.js

圧縮バージョン: https://code.jquery.com/jquery-3.0.0-beta1.min.js

もちろん、npm 経由でダウンロードすることもできます:

[code]npm install jquery@3.0.0-beta1[/code]

結論

多くの人が、jQuery は現代の Web 開発に居場所がないと言って、jQuery を悪く言っています。しかし、それにもかかわらず、jQuery の開発は続いており、客観的な統計 (上位 100 万の Web サイトの 78.5% のシェア) はこれらの議論を覆します。

この記事では、jQuery 3 によってもたらされる主な変更点のいくつかについて説明しました。お気づきかと思いますが、このバージョンでは重大な変更がほとんど導入されないため、既存のプロジェクトが壊れる可能性はほとんどありません。ただし、jQuery 3 にアップグレードする場合は、Deferred オブジェクトの改善など、いくつかの重要な点に留意する必要があります。同様に、サードパーティのライブラリをアップグレードする場合も、予期しない動作をできるだけ早く検出し、特定の機能の障害を回避するために、プロジェクトの互換性をチェックする必要があります。

翻訳メモ

この記事で説明した変更点に加えて、jQuery 3.0 での最大の変更点は、IE8 のサポートが完全に廃止されたことです。 jQueryチームがこの決断を下した理由は、Microsoftが今年初めにIE 8～10のサポートを終了すると発表したためだ。したがって、jQuery の 3.0 アルファ段階でリリースされた jQuery Compat プロジェクトを存続させる必要はありません。

ただし、IE8 は依然として中国本土で最も人気のあるブラウザの 1 つであるため、国内の開発者は短期 (または中期) には jQuery 1.x バージョンに留まらなければなりません。

さて、最後に良いニュースをお伝えしましょう。ユーザーがスムーズにアップグレードできるよう、今回 jQuery はバージョン 3.0 用の移行プラグイン (jQuery Migrate プラグイン) も提供します。 jQuery を 3.0 にアップグレードした後、このプラグインを同時に実行して、jQuery 1.x または 2.x に基づく既存のビジネス コードが正常に実行されることを確認します。また、コンソールに次のようなレポートも表示されます。既存のコードはjQuery 3とは異なります。互換性のある場所。これらの非互換性を修正したら、プラグインを安全に削除できます。