jQuery 3.0最終リリース

2016年6月9日に、jQuery 3.0の公式リリースが行われました。これは2014年10月から開発中です。 私たちの目標は、jQueryのより軽量で高速なバージョンを作成することでした(もちろん、下位互換性を備えています)。 IEの古い松葉杖をすべて削除し、必要に応じて、より新しいWeb APIを使用しました。 jQuery 3.0は2.xブランチの継続ですが、長い間望まれていたいくつかの変更があります。 1.12や2.2のようなブランチは、しばらくの間重要なパッチを受け取りますが、新しい機能を期待するべきではありません。 jQuery 3.0はjQueryの未来です。 突然IE 6-8のサポートが必要になった場合、リリースバージョン1.12を引き続き使用できます。



画像





プロジェクトをバージョン3.0にアップグレードしても、それほど大きな問題は発生しないと思われます。 はい、バージョンの主な機能を正当化するいくつかの重要な変更があり、これが更新プロセスに大きな影響を与えないことを願っています。



アップグレードを支援するために、バージョン3.0に新しいアップグレードガイドを追加しました。jQueryMigrate 3.0プラグインは、コードの互換性の問題を特定するのに役立ちます。 変更に関するあなたの意見は私たちに大いに役立つので、現在のプロジェクトで試してみてください。



もちろん、jQuery 3.0ファイルはCDNから入手できます。



https://code.jquery.com/jquery-3.0.0.js

https://code.jquery.com/jquery-3.0.0.min.js



npmからもインストールできます。



npm install jquery@3.0.0
      
      







さらに、jQuery Migrate 3.0リリースがあります。 jQuery 3.0で変更された機能に関連する問題を修正するために使用することを強くお勧めします。 ファイルはCDNでも入手できます。



https://code.jquery.com/jquery-migrate-3.0.0.js

https://code.jquery.com/jquery-migrate-3.0.0.min.js



そしてnpmで:



 npm install jquery-migrate@3.0.0
      
      







jQuery Migrateプラグインを使用してjQuery 1.xおよびjQuery 2.xブランチをjQuery 3.0にアップグレードする方法の詳細については、 jQuery Migrate 1.4.1の投稿を参照してください。



薄いアセンブリ



最後に、このリリースに新しいものを追加しました。 AJAXを必要としない場合、またはAJAXリクエストに焦点を当てた多くのライブラリのいずれかを使用することを好み、アニメーション全体のクラス操作とCSSの組み合わせを使用する方が簡単な場合は、AJAXおよびエフェクトモジュールを含むjQueryの通常バージョンとともにリリースしますそれらを含まない「シン」バージョン。 一般に、このコードは時代遅れであると考えられており、私たちはそれを捨てました(冗談です)。 現在、jQueryのサイズがパフォーマンスを心配することはめったにありませんが、スリムバージョンは通常よりも6 KB小さく、23.6k対30kです。



画像



これらのファイルはCDNでも入手できます。



https://code.jquery.com/jquery-3.0.0.slim.js

https://code.jquery.com/jquery-3.0.0.slim.min.js



このアセンブリは、任意のモジュールを含めたり除外したりできるカスタムAPIアセンブリを使用して作成されました。 詳細については、 jQuery READMEを参照してください。



JQuery UIおよびjQuery Mobile互換



ほとんどのメソッドは機能しますが、近い将来jQuery UIとjQuery Mobileに実装するいくつかのポイントがあります。 問題が見つかった場合は、 jQuery Migrate 3.0プラグインを使用して以前に既に公開および修正されている可能性があることに注意してください。 近日リリースを予定しています。



大きな変化



この記事では、新機能、改善点、修正点の主なポイントのみを提供します。 詳細については、アップグレード手順をご覧ください 。 修正された問題の完全なリストは、GitHubのバグトラッカーで入手できます 。 3.0.0-rc1のブログを読むと、以下の機能は変更されていません。



jQuery.DeferredはPromises / A +互換になりました



JQuery.Deferredオブジェクトは、Promises / A +およびES2015 Promisesとの互換性のために更新され、 Promises / A + Compliance Test Suiteを使用して検証されました。 これは、 .then()メソッドがいくつかの重要な変更を加える必要があることを意味します。 もちろん、 .then()の名前を.pipe()に変更することで、現在使用されていない(および同じ署名を持つものに変更することで、使用を復元できます。



1修正


.then( )にコールバック関数(コールバック)を追加しました。 以前は、コールバック関数を実行するために例外をスローする必要がありました。 この場合、応答の戻りに基づくデータは例外として返されません。



 Example: uncaught exceptions vs. rejection values var deferred = jQuery.Deferred(); deferred.then(function() { console.log("first callback"); throw new Error("error in callback"); }) .then(function() { console.log("second callback"); }, function(err) { console.log("rejection callback", err instanceof Error); }); deferred.resolve();
      
      







2修正


以前は、「最初のコールバック」を登録するときにエラーを受け取り、後続のすべてのコードが機能しなくなりました。 2番目のコールバックも3番目のコールバックも登録されていません。 コールバック標準と互換性のある新しいものは、成功するとtrueを返しますerrは最初のコールバックの失敗値です。



.then()によって作成されたDeferredパーミッションの状態は、値と非有効化を返す例外コールバックによって監視されるようになりました。 以前のバージョンでは、 拒否値が返されました。


 Example: returns from rejection callbacks var deferred = jQuery.Deferred(); deferred.then(null, function(value) { console.log("rejection callback 1", value); return "value2"; }) .then(function(value) { console.log("success callback 2", value); throw new Error("exception value"); }, function(value) { console.log("rejection callback 2", value); }) .then(null, function(value) { console.log("rejection callback 3", value); }); deferred.reject("value1");
      
      







以前のログには、「拒否コールバック1 value1」、「拒否コールバック2 value2」、「拒否コールバック3 undefined」が含まれていました。



新しい標準と互換性のあるメソッドは、「拒否コールバック1値1」、「成功コールバック2値2」、「拒否コールバック3 [オブジェクトエラー]」という形式のログを記録します。



3修正


Deferredが返された場合でも、コールバックは常に非同期的に呼び出されます。 以前は、同期されていました。



 Example: async vs sync var deferred = jQuery.Deferred(); deferred.resolve(); deferred.then(function() { console.log("success callback"); }); console.log("after binding");
      
      







以前は、ログには「成功コールバック」と「バインド後」が含まれていました。 これで、「バインド後」、「成功コールバック」のようになります。



注意! キャッチされた例外には、ブラウザでのデバッグには利点がありますが、これはコールバックの原因を調査するためのはるかに「使いやすい」方法です。 これにより、障害処理のために少なくとも1つのコールバックを常に追加する必要があることに注意してください。 そうしないと、エラーが気付かないことがあります...




デバッグに役立つDeferreds互換プラグイン-Promises / A +を開発しました。 ソースを特定するために必要なエラー情報がコンソールに表示されない場合は、 jQuery Deferred Reporter Pluginプラグインがインストールされているかどうかを確認してください。



jQuery.whenも更新され、独自のPromiseオブジェクトを含むthenableオブジェクトを受け入れるようになりました。

https://github.com/jquery/jquery/issues/1722

https://github.com/jquery/jquery/issues/2102



Deferredsに.catch()を追加しました



catch()メソッドが.then(null、fn)のエイリアスとして追加されました。

https://github.com/jquery/jquery/issues/2102



エラーが発生した場合、主なことは黙っていないことです



おそらく、「どんな種類のウィンドウシフト?」というおかしな質問を疑問に思ったことがあるでしょう。



過去に、jQueryはエラーを処理する代わりに、このようなものを返そうとすることがありました。 この特定のケースでは、位置{top:0、left:0}になるまでウィンドウをシフトするように要求します。 jQuery 3.0では、このようなケースはエラーをスローし、これらのクレイジーな答えを無視します。

https://github.com/jquery/jquery/issues/1784



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



.load.unloadおよび.errorは削除されます。 代わりに.on()を使用してください。

https://github.com/jquery/jquery/issues/2286



アニメーションを使用しています



requestAnimationFrame



IE <= 9およびAndroid <4.4を除くすべての場所にあるrequestAnimationFrame APIをサポートするプラットフォームでは、jQueryがそれを使用してアニメーションを実装します。 これにより、レンダリングのスムーズさが向上し、プロセッサに費やされる時間が削減されるため、ポータブルデバイスのバッテリー電力が節約されます。



数年前にrequestAnimationFrameを使用すると、既存のコードとの深刻な互換性の問題が発生するため、その時点でそれを排除する必要がありました。 ブラウザのタブが見えなくなると、アニメーションの実行を一時停止する可能性があります。 たとえば、別のタブに切り替えます。 それでも、アニメーションに依存するコードは常にほぼリアルタイムで動作し、非現実的な負荷を作成します。



jQueryカスタムセレクターの大規模なブースター



GoogleのPaul Irishの探偵のおかげで、同じドキュメントで:visibleが複数回使用されているなどのカスタムセレクターの多くの作業を見逃したいくつかのケースを特定することができました。 このまれなケースでは、作業を最大17倍まで高速化できます。



この改善が行われたとしても、 :visibleおよび:hiddenセレクターを使用すると、ブラウザーに依存しているため、コストが高くなる可能性があることに注意してください。 これには、最悪の場合、CSSとページレイアウトの完全な再計算が必要になる場合があります。 その時点では、それらの使用を妨げませんでしたが、パフォーマンスの問題についてページを確認することをお勧めします。



これらの変更により実際には1.12 / 2.2に変わりましたが、jQuery 3.0で改善したいと考えています。

https://github.com/jquery/jquery/issues/2042



前述のとおり、このバージョンを使用したい人は誰でもアップグレードガイドを利用できます。 基本的なアップグレード手順に加えて、残りの変更の詳細な説明も含まれています。



変更履歴



変更点はこちら

ブラウザのサポート



  • Internet Explorer:9+
  • Chrome、Edge、Firefox、Safari:現在および以前のバージョン
  • Opera:現在のバージョン
  • SafariモバイルiOS:7+
  • Android 4.0以降




アヤックス



  • 21バイトを起動eaa3e9f
  • URLクエリキャッシュの保存( #1732e077ffb
  • jQueryを実行#正しいコンテキストでコールバックをロード( 3035、5d20a3c
  • ajaxSettings.traditional( #3023df2051c )を提供することは大きな名誉です
  • 未使用のjQuery.trim関数( 0bd98b1 )を削除する




属性



  • 非行属性での無限再帰の回避( #3133e06fda6
  • @ tabIndexリンク( 9cb89bf )でサポートコメントと修正されたフックを追加
  • 選択時に値を割り当てるためのスペースを折りたたむ/展開する( 2978、7052698
  • 削除された親の冗長性チェック( b43a368
  • IE <= 11で選択されたオプションを修正( 2732、780cac8




CSS



  • IE 11では、フルスクリーンモードのiframe内では機能しません( #3041ff1a082
  • ディスプレイがない場合、個々の要素を表示されるように切り替えます:noneパラメーター( 2863、755e7cc
  • elem.ownerDocument.defaultViewがnullでないことを確認してください( 2866、35c3148
  • アニメーション化されたカウンターの反復をcssNumberに追加( #2792df822ca
  • .showでカスケードオーバーライド動作を復元( #2654#2308dba93f7
  • Firefoxがカスケードされた無効なアイテムを無効にすることを停止します( #2833fe05cf3




コア







延期



  • jQuery.whenで2つのパスを分離します( 3029、356a3bc
  • jQuery.whenの未加工キャストに明示的な未定義コンテキストを提供します( 3082、7f1e593
  • デフォルトのコールバックコンテキストを削除( 3060、7608437
  • プログラミングエラーの可能性がある例外について警告する( 2736、36a7cf9
  • ラップされていないプロミスから進捗を正しく伝播する( #3062d5dae25
  • 可能な場合はjQuery.whenを同期にします( #3100de71e97
  • 文書化されていない$ .whenの進捗通知を削除します( #2710bdf1b8f
  • 例外のスタック診断を改善する( 07c11c0




寸法







ドキュメント



  • さまざまなスペルエラーを修正します( aae4411
  • IEに関連するサポートコメントを更新( 693f1b5
  • 属性モジュールの誤ったコメントを修正します( 5430c54
  • サポートされているhttpsへのリンクを更新しました。 ( b0b280c
  • サポート構文を更新して、新しい構文( 6072d15 )に従うようにします
  • 可能な場合はhttpsを使用します( 1de8346
  • jsfiddleおよびjsbinにHTTPS URLを使用する( 63a303f
  • 問題のノイズを減らすためにFAQを追加( dbdc4b7
  • AMDでのソースのロードに関するメモを追加( #2714e0c25ab
  • AMD( #2750dbc4608 )を使用したコード編成に関するメモを追加
  • 新機能のガイドラインとAPIの教義を参照 2320、6054139




効果



  • oldIEの幅/高さの例外を削除( #2488e04e246
  • jQuery.speedを直接使用するためのテストを追加( #2716cb80b42




イベント



  • ターゲットなしでjQuery.Eventの構築を許可( 3139、2df590e
  • タッチイベントプロパティを追加し、プラグインの必要性を排除( #3104f595808
  • 最も一般的に使用されるポインターイベントプロパティ( 7d21f02 )を追加します。
  • fixHooks、propHooksを削除します。 addPropでES5ゲッターに切り替え( #3103#1746e61fccb
  • JavaScriptエンジンによってイベントディスパッチを最適化できるようにします( 9f268ca
  • 追加時にデリゲートセレクターを評価する( 3071、7fd36ea
  • 無効な委任セレクタエッジケースをカバーする( e8825a5
  • nullハンドラーでのチェーン.on()を修正( 2846、17f0e26
  • イベントオブジェクトのpageX / pageY塗りつぶしを削除( 3092、931f45f




イベント



  • ネイティブストップを実行しない(即時)シミュレーションからの伝播( 3111、94efb79




操作







オフセット



  • 厳密モードのClientRectの「セッターなし」例外を解決します( 3befe59




セレクター







シリアル化



  • リテラルおよび関数から返されたnull / undefinedを同じものとして扱います( 3005、9fdbdd3
  • サイズを縮小( 91850ec




サポート







テスト



  • Safari 9.1を考慮に入れる( 234a2d8
  • attributes.jsの#qunit-fixtureに選択を制限( ddb2c06
  • clearCloneStyleに対するEdgeのサポートをtrueに設定します( 28f0329
  • Android 5.0の標準のChromeブラウザーとYandex.Browser( 5c01cb1 )の遅延テストを修正
  • jQuery.isPlainObject( 728ea2f )のテストを追加します
  • ビルド:QUnitを更新し、誤ったテストを修正します( b97c8d3
  • Android 4.4の操作テストを修正( 0b0d4c6
  • 1つの属性テストの副作用を削除する( f9ea869
  • 新しいオフセットテストのアカウント( f52fa81
  • isReady( 08d73d7 )をチェックした後、iframeテストを待機させます
  • testIframe()をリファクタリングして、よりドライで一貫性のあるものにします( e5ffcb0
  • jQuery.whenからjQuery.ready.thenへの同期の仮定を弱めます( f496182
  • ビュー外の要素の位置をテスト( #2909a2f63ff
  • Safari 9.0 / 9.1をキャッチする正規表現の回復力を高める7f2ebd2




横断








All Articles