Geekly Articles each Day

JQuery 3.0 alphaおよびjQuery Compat 3.0 alphaが公開されました

（最も人気のあるライブラリの著者からのこのストーリーの翻訳は、この段階でDOM解析で解決される問題を考慮して、ブラウザテクトニクスの脈動を把握したい人にとって非常に有益です。）

前回のメジャーリリース以降、多くの水が流れており、間違いなく更新に値します。 したがって、jQueryの最初のアルファバージョンのリリースを発表できることを嬉しく思います。

バージョン番号3.0にもかかわらず、このリリースではコードのアップグレードに大きな問題は発生しないと思われます。 はい、いくつかの重要な変更がありますが、それは上位バージョンのインデックスの変更によって正当化されますが、これらの変更が多くに影響を及ぼさないことを願っています。 jQuery Migrateプラグインは、コードの互換性の問題を特定するのに役立ちます。 また、このアルファに関するあなたの意見は私たちに大いに役立つので、既存のコードとプラグインで試してみてください！

最初のリリースであるjQuery 3.0は、新しいブラウザーとIE 9+でサポートされています。 2番目のjQuery Compat 3.0は、IE 8+でサポートされています。 ボーナスとして、両方のリリースは2012年にリリースされたYandexブラウザーでサポートされます。 jQuery CDNまたは直接リンクからファイルを取得できます。

code.jquery.com/jquery-3.0.0-alpha1.js

code.jquery.com/jquery-compat-3.0.0-alpha1.js

npmからインストールできます：
npm install jquery@3.0.0-alpha1 

  npm install jquery-compat@3.0.0-alpha1



大きな変更



ここでは、主要な新機能、変更、および修正についてのみ説明します。 変更の完全なリストを以下に示し、 GitHubアカウントで簡単に追跡できます 。 さらに、GitHubでは、まだ実装されていない機能を確認できます。これらの機能は、後のベータ版および最終版で計画されています。


簡略化された.show（）および.hide（）メソッド


jQueryの.hide（）のポイントは、CSSで 'display：none'プロパティを設定することです。 したがって、.show（）は画面を更新し、アイテムが再び表示されるようにします（ただし、親が非表示になっていない場合）。 簡単ですね。

さて、すべてではありません。 実際、長年にわたって人々が「修正」するように私たちに求めてきた多くの困難な特別なケースがありますが、それは原則が絡み合っていることが判明しました。 たとえば、アイテムが表示するように設定されていない場合はどうでしょうか：スタイルシートにnoneがありますか？ jQueryは、要素に対してdisplay：ブロックを強制することにより、それを決定しようとします。 わかりましたが、デフォルトのブロック<li>要素が表示するように設定されていた場合はどうなりますか？ エレメントがドキュメントに追加される前にこれらのメソッドをエレメントで呼び出すと、どのような値が表示されるかわかりません。 このすべてを定義すると、追加の作業が作成されます。 仮定に依拠することもありますが、結果はそうではありません。

これらのメソッドは要素にスタイル属性を追加するため、要素の可視性がメディアクエリに依存するレスポンシブデザインなどの手法ではうまく機能しません。 これには、 orientationchangeまたはサイズ変更イベントをリッスンして、ページの一部を手動で非表示または表示するjQueryハンドラーが必要です。 これにより、メディアクエリを通じて行われた決定の優雅さが失われます。

jQueryがすべての人の狂気の中間であり、このような旅を終わらせる意味がないことがわかります。 特殊なケースとチェックは複雑で不完全なだけでなく、大きなページで重大なパフォーマンスの問題を引き起こす可能性があります。

代わりに、これらのメソッドの進化を実験的に無視し、単純な初期モデルに戻ります。 これはいくつかのコードを壊します。 スタイルにdisplay：noneの要素がある場合、 .show（）メソッドはこのプロパティをオーバーライドしません。 したがって、jQuery 3.0に移行するための最も重要なルールは次のとおりです。 スタイルシートを使用してデフォルトの表示を設定しない：none 、次に.show（） -または要素を表示する別のメソッド-.slideDown（）または.fadeIn（） -それを見えるようにします。

デフォルトで非表示になる要素が必要な場合は、「hidden」タイプのクラス名を要素に追加し、クラスが表示されることを決定することをお勧めします：スタイルにはありません 。 その後、jQueryの.addClass（）および.removeClass（）メソッドを使用してこのクラスを追加または削除し、可視性を制御できます。 または、ページに表示される前に、要素に対して.hide（）を呼び出す.ready（）ハンドラーを使用できます。 または、本当にデフォルトのスタイルを維持する必要がある場合は、 .css（ "display"、 "block"） （または別の表示値）を使用してスタイルをオーバーライドできます。

これはjQuery 3.0で最も物議を醸す複雑な変更の1つである可能性が高いことを知っているため、できるだけ早くリリースして効果を確認したいと考えました。 コードに与える影響と、この新しいモデルを使用するために変更する必要があるものをお知らせください。

github.com/jquery/jquery/issues/1767
github.com/jquery/jquery/issues/2057
github.com/jquery/jquery/issues/2308


.data（）に名前がある特殊なケース


.data（）の実装を更新して、HTML5データ仕様に準拠するようにしました 。 アクセス方法に関係なく、すべてのキーはkebab-caseからcamelCaseに変換され、数字は変換に関与しなくなります。 たとえば、「foo-bar」と「fooBar」は区別しませんが、「foo-42」と「foo42」は区別します。 これらの変更は、引数なしで.data（）呼び出しを使用してすべてのデータを取得する場合、または元の.data（ "foo-42"）の代わりに変換された.dataキー（ "foo42"）を使用してデータにアクセスしようとする場合に主に役割を果たします。

github.com/jquery/jquery/issues/1751


jQuery.DeferredはPromises / A +と互換性があります


JQuery.Deferredオブジェクトは、Promises / A +およびES2015 Promisesとの互換性のために更新されており、Promises / A + Compliance Test Suiteによって検証されています。 これは、 .catch（）メソッドと.then（）メソッドへのいくつかの主要な変更の導入を意味します。

遅延親が拒否し、子コールバックが例外をスローする次のコードを検討してください。

 var parent = jQuery.Deferred(); var child = parent.then( null, function() { return "bar"; }); var callback = function( state ) { return function( value ) { console.log( state, value ); throw new Error( "baz" ); }; }; var grandchildren = [ child.then( callback( "fulfilled" ), callback( "rejected" ) ), child.then( callback( "fulfilled" ), callback( "rejected" ) ) ]; parent.reject( "foo" ); console.log( "parent resolved" );


jQuery 3.0では、これはコールバックを呼び出す前に「解決済みの親」を生成し、各コールバックの子は「充実したバー」を生成し、孫は「baz」エラーで拒否されます。 以前のバージョンでは、「拒否されたバー」（実行ではなく遅延子が拒否されました）が一度発行され、その後、キャッチされないエラー「baz」により実行が停止しました（「親が解決されました」は表示されず、孫は満たされないままです）。

キャッチされた例外はブラウザでのデバッグの利点でしたが、これは失敗時にコールバックを処理するはるかに宣言的な（つまり明示的な）方法です。 Promiseを使用する場合は、少なくとも1つのコールバックを常に追加する必要があることに注意してください。 そうしないと、エラーは見過ごされます。

.then（）を廃止された.pipe（）メソッド（同じシグネチャを持つ）に置き換えることで、古い動作を復元できます。

jQuery.whenも更新され、ネイティブプロミスを含むすべてのthenableオブジェクトを受け入れるようになりました。

github.com/jquery/jquery/issues/1722
github.com/jquery/jquery/issues/2102


jQuery.ajaxのDeferredメソッドの特別な状態を削除しました


jqXHRオブジェクトはPromiseですが、.abort（）などの追加メソッドがあるため、リクエストが行われた後に停止できます。

AJAXのような非同期作業用にPromiseテンプレートを選択するユーザーが増えているため、jQuery.ajaxからPromiseの特別な状態を返すというアイデアはあまりよくありません。

成功、エラー、完了
完了、失敗、常に

これは、存在し続けて非推奨ではない同じ名前のすべてのコールバックには影響しないことに注意してください。 これはpromiseメソッドにのみ影響します！

github.com/jquery/jquery/issues/2084


エラーのケースを無視しないでください


おそらく、深い推論で、「ウィンドウシフトとは何ですか？」という質問をしたのでしょう。それから、これはおかしな質問であることがわかったでしょう。

以前は、jQueryはエラーをスローするのではなく、そのような場合に意味のあるものを返そうとすることがありました。 この場合、ウィンドウオフセットを要求すると、応答は{top：0、left：0}でした。 このjQuery 3.0アルファでは、意味のないクエリを無視しないように、このような場合にエラーをスローするというアイデアを実験します。 alphaを試して、jQueryに依存するコードが間違ったコードで問題を隠しているかどうかを確認してください。

github.com/jquery/jquery/issues/1784


.width（）、. height（）、. css（ "width"）、および.css（ "height"）は小数値を返し始めました（ブラウザーで許可されている場合）


JQueryは以前、丸められた幅と高さの値を返していました。 IEやFirefoxなど、一部のブラウザーはサブピクセル値を返しますが、ユーザーはこの精度を必要とする場合があります。 この変更がコードに大きな影響を与えるとは考えていませんが、発生した場合はお知らせください。

github.com/jquery/jquery/issues/1724


廃止されたイベントエイリアスを削除


.load 、 .unload 、および.errorは、jQuery 1.8以降では非推奨です。 .on（）を使用してハンドラーを登録します。

github.com/jquery/jquery/issues/2286


jQuery.swap、jQuery.buildFragment、jQuery.domManipは使用できなくなりました


これらのメソッドは常に内部使用専用であり、文書化されていません。 混乱を避けるため、最終的にそれらを非公開にしました。

github.com/jquery/jquery/issues/2224
github.com/jquery/jquery/issues/2225

アニメーションはrequestAnimationFrameを使用するようになりました



IE8-9に加えてrequestAnimationFrame APIをサポートするプラットフォームでは、jQueryはアニメーション化するときにこのAPIを使用するようになりました。 これにより、アニメーションがよりスムーズになり、CPU時間の使用が少なくなり、モバイルデバイスのバッテリーを節約できます。

jQueryは数年前にrequestAnimationFrameを実装しようとしましたが 、既存のコードとの重大な互換性の問題がありました。 ブラウザのタブを閉じたときにアニメーションを一時停止することで、これらの問題のほとんどを解決したと考えています。 ただし、ほぼリアルタイムで実行されるアニメーション依存コードは、この仮定を不正確にします。


.unwrap（セレクター）


jQuery 3.0より前では、.unwrap（）メソッドは引数を取りませんでした。 セレクター引数は、削除するラッパーを示します。

github.com/jquery/jquery/issues/1744


一部のネイティブjQueryセレクターの大幅な高速化


GoogleでのPaul Irishの研究のおかげで、 ：visibleのようなセレクターがドキュメントで何度も使用されている場合、大量の余分な作業を見逃している可能性があるケースを特定しました。 これにより、速度が最大17倍向上する場合があります。

この改善を行っても、 ：visibleや：hiddenなどのセレクターは、要素がページに表示されるかどうかをブラウザーに依存するため、高価になる可能性があることに注意してください。 これには、最悪の場合、CSSとページレイアウトの完全な再計算が必要になる場合があります。 それらの使用を妨げることなく、パフォーマンスのためにそのようなセレクターでページをチェックすることをお勧めします。

github.com/jquery/jquery/issues/2042


謝辞


このリリースのテスト、バグの報告、または名前を含むパッチの提供に参加してくださった皆さんに感謝します。
クリス・アンタキ、ジェイソン・ベダード、レオナルド・ブラガ、バスティアン・ブッフホルツ、その他10名の姓
クリス・アンタキ、ジェイソン・ベダード、レオナルド・ブラガ、バスティアン・ブッフホルツ、アン・ゲール・コロン、デヴィッド・コルバチョ、ブレナード・キューバキューブ、ハミッシュ・ディクソン、ベン・エデルマン、スティーブン・エドガー、elas7、flexphperia、コーリー・フランジ、シュエ・フチャオ、オレグ・ガイダレンコ、リチャード・ギブソン、ミカウ・ゴー、スコット・ゴンサレス、グーブ、ヴェーセスラフ・グリマルスキ、ムー・ハイバオ、ダン・ハート、フレデリック・ヘンバーガー、ニコラス・ヘンリー、ダニエル・ハーマン、ジョン・ヘスター、ビクター・ホミヤコフ、ウィンストン・ハウズ、ダニエル・フサー、エサム・アル・ジュボリ、ヴェレス・ラホス、ジョージ・マウアー、リチャード・マクダニエル、アミット商人、カルバン・メトカーフ、デイブ・メスビン、マイティブランチ、ナザール・モクリンスキー、マシュー・ミューラー、マーティン・ナウマン、アレクサンダー・オマラ、ランドソン・オリベイラ、ギラッド・ペレグ、ジェームズ・ピアス、PJ、センヤ・パガッハ、アディティア・ラガヴァン、クリス・リベルト、アウレリオ・デ・シュルホフ、 、マイクシドロフ、ニックステファン、アーサーストリアー、ティモティホフ、ベントゥーズ、トーマストルトリーニ、シヴァジーバルマ、アーサーフェルシェーブ、リックワルドロン、ビンシン、イムランMユースフ、ヨルンゼフェラー。



すべての変更


以下は、最後の公式リリース（1.11.3および2.1.4）以降の変更点の完全なリストです。


jQueryおよびjQuery Compatリリースの両方に共通


アヤックス



属性



コールバック



コア



CSS



データ



延期



寸法



ドキュメント



効果



イベント



操作（DOM）



オフセット



Selector/Sizzle



Wrap




, : Readme, Build, Test, ...

その他


  • 古いブラウザのサポートを削除。更新されたコメント（740e190）
  • 9ad6e7e（ff928f5）で速度要件がなくなりました
  • Mac OSは@xfq編集（d30c482）のおかげでOS Xになりました

Readmeセクション



Build





サポート








jQuery 3.0


Ajax



CSS



データ





Offset




, : , Readme, Build, Tests

その他





«Readme»


  • selector-native.js . randsonjs! ( cfe2eae )

Build








jQuery Compat 3.0


Ajax









CSS



データ



Deferred







DOM



Offset



Traversing



サイトおよびリポジトリの組織に関連するセクション：ドキュメント、ビルド、テスト



Build



その他




  • IE8 (Sinon IE HTML5 Shiv) ( 0b07c65 )

Source: https://habr.com/ru/post/J262727/

More articles:


All Articles