最新バージョンの jQuery 1.5_jquery の改善点の分析

バージョン 1.5 の最大のアップデートは、AJAX が完全に書き直され、スケーラビリティが向上しました。ただし、エネルギーとスペースの制約のため、新しい AJAX の分析は別の機会に延期され、この記事では詳細な改良点について簡単に紹介します。

jQuery._Deferred と jQuery.Deferred
まず最初に、これら 2 つの新しいものについて説明しなければなりません。これら 2 つはインフラストラクチャとして存在するため、これら 2 つが明確に説明されていないと、いくつかの問題を説明できません。全く。

まず、jQuery.Deferred は jQuery._Deferred の拡張バージョンであるため、この問題については、jQuery._Deferred から始めるとほとんどの問題が説明できます。

遅延とは何ですか?文字通り、私の最初の反応は「遅延ロード」でした。最初の大文字は「型」の定義であるはずなので、これはおそらく「遅延ロード機能を透過的に提供する」型です。ただし、実際には、多少の「遅延」の意味はありますが、これは遅延読み込みの実装には使用されません。

jQuery._Deferred は簡単に言うと関数キューで、その機能は次のとおりです。

いくつかの関数を保存します。
保存されたすべての関数を特定の時間に実行します。
実行後、新しい関数はすぐに実行されます。
何かに似た感じですか？はい、jQuery の ready 関数にはそのようなロジックが備わっています。実際、jQuery 1.5 のready 関数が実際に移植されています。

jQuery._Deferred は次のインターフェイスを提供します:

done: function(fn1, fn2, ...) の形式で、キューに関数を追加するために使用されます。
fire: function(context, args) の形式で、context を使用してこのオブジェクトを指定し、args を使用してパラメータを指定し、キュー内のすべての関数を呼び出します。 fire が呼び出された後、_Deferred は isResolved 状態になり、それ以降の Done の呼び出しでは関数は保存されず、関数が直接呼び出されます。
resolve: 簡略化されたメソッドである fire(this, argument) の呼び出しと同じです。
isResolved: _Deferred が isResolved 状態であるかどうかを判断するために使用されます。詳細については、前の fire 関数の説明を参照してください。
cancel: キュー全体をキャンセルします。これにより、今後発生するかどうかに関係なく、キュー内の関数が再度呼び出されなくなります。
jQuery._Deferred についてわかりやすく説明したので、jQuery.Deferred を見てみましょう。これは実際には 2 つの _Deferred で構成されています。1 つ目は deferred と呼ばれ、関数を「通常」状態で保存するために使用され、2 つ目は、failDeferred と呼ばれ、関数を「エラー」状態で保存するために使用されます。同時に、jQuery.Deferred はいくつかの新しいインターフェイスを提供します:

then: function(done, failed) の形式で、done を deferred に追加し、fail を failedDeferred に追加します。
fail:failDeferred の Done 関数と同等。
fireReject:failDeferred の fire 関数と同等。
reject:failDeferred の解決関数と同等。
isRejected:failDeferred の isResolved 関数と同等です。
同時に、jQuery.Deferred はキャンセル関数をキャンセルします。

それで、これは何に使われるのでしょうか? 「正常」と「エラー」の 2 つの状態があり、同時に非同期であることは簡単に考えられます。はい、AJAX で使用されます。詳しくは次の分析で説明します。

jQuery.ready の変更点
jQuery._Deferred により、jQuery.ready 関数は関数キューに依存するようになります。具体的な変更点は次のとおりです。元のreadyList変数は配列ではなくなり、jQuery._Deferredオブジェクトになります。

DOMContentLoaded のときに readList 内のすべての関数を呼び出す元のロジックが jQuery._Deferred でも使用されるようになりました。元のコード:

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

while ( (fn = ready[ i ]) ) {

fn.call( document, jQuery );


は次のようになります:

コードをコピー コードは次のとおりです: readyList .fire( document , [ jQuery ] );

jQuery.parseXML 関数

ブラウザ互換のスレーブ文字を提供するための新しい静的関数 jQuery.parseXML を追加しました。文字列をXML文書に変換する関数。
この関数には多くのロジックがあり、jQuery に関して特別なことは何もありません。それらは大きく次の 2 つのタイプに分けられます。
標準ブラウザの場合は、DOMParser オブジェクトを使用します。



コードをコピーします

コードは次のとおりです。 var parser = new DOMParser(); xml = parser.parseFromString(text , 'text/html'); IE の場合は、Microsoft.XMLDOM オブジェクトを使用します。

var parser = new ActiveXObject('Microsoft.XMLDOM'); = 'false';

parser.loadXML(テキスト);
var xml =


data セクション
要素に jQuery によってアタッチされたデータがあるかどうかを判断するために使用される jQuery.hasData 関数が追加されました。

jQuery.expando の実装を変更しました。単に現在の時刻を取得するだけでなく、乱数が追加されました:

expando = "jQuery" ( jQuery.fn.jquery Math.random( ) ).replace( /D/g, "" ); これにより、複数の jQuery コピーが同時に導入され、これらのコピー間の展開が互いに競合して要素上のデータが乱れることがなくなります。基本的にはjQueryを複数導入することはありませんが、SealJSなどを利用する場合、設定が適切でないとこのような問題が発生しやすくなります。

DOM 操作部分
元の hasClass、addClass、removeClass 関数はすべて、要素のクラス属性を配列に分離する必要がありました。バージョン 1.4.4 では、それらは分離されました。 n or によって、1.5 で新しいものが追加されました。 、Windows プラットフォームの改行文字 (rn) に対応するために使用されます。

jQuery.fn.attr 関数は、バージョン 1.4.4 では TextNode および CommentNode からの属性の取得を拒否し、バージョン 1.5 では AttributeNode (noteType == 2) が追加されました。

バージョン 1.4.4 では、jQuery は、ページがアンロードされるときに、jQuery によって保持されているすべての DOM イベントをクリーンアップします。これは、IE のメモリ リークの問題を回避するためです。しかし、このコードは 1.5 で消えてしまいました。理由はわかりません。

IE で cloneNode を使用してノードをコピーする問題については、1.4.4 では innerHTML をコピーすることで解決していましたが、1.5 では mootools チームが提供した方法で解決しました。この問題を解決するには、cloneFixAttribute 関数を使用します。

cloneFixAttribute 関数は、jQuery 1.5 beta1 ソース コード ファイルの行 5388 ～ 5438 にあります。IE のバグに対処する原則は非常に単純です。もちろん、フロント エンドで一見単純に見えることのいくつかは困難です。 find:

IEにはclearAttributesという関数があり、ノード上のすべての属性をクリアします。 ちなみに、イベントに関係するonclickなどの属性も削除されます。コピーされたノードでこの関数を呼び出すと、属性がクリアされます。
IE には、あるノードの属性を別のノードにコピーする mergeAttributes という関数もありますが、イベントに関連する属性はコピーされません。したがって、元のノードで mergeAttributes を呼び出し、コピーされたノードに属性を戻します。これは、イベント関連の属性を削除することと同じです。
さらに、cloneFixAttribute 関数は cloneNode 上の IE6 ～ 8 の多くの互換性問題も処理します。これについては、詳細に検討する価値があります。

AJAX 部分
AJAX はバージョン 1.4.4 のスタイルを残して完全に書き直されました。ここでは、簡単に説明するために一部だけを抜粋します。

元のバージョンの $.get と $.post の実装は非常に似ており、具体的にはメソッド構成項目が 1 つだけ異なるため、バージョン 1.5 でマージされました:

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

$.each(['get', 'post'], function(i , method) {
$[method] = function() { ... });


ajaxSetup 関数は return this の行を追加します。連鎖的に呼ばれる。

serializeArray 関数は、値内の改行文字を Windows スタイル (rn) に均一に置き換えるようになりました。

AJAX コールバック関数では、パラメーターとして使用されるオブジェクトはネイティブの XMLHTTPRequest ではなくなり、jQuery 自体によってカプセル化された jXHR と呼ばれるオブジェクトが XMLHTTPRequest の共通インターフェイスを提供します。

元々、ブラウザーの「リクエスト成功」ステータス コードには 200 ～ 299 と 304 に加えて 1223 もあります。これは、204 ステータス コードを 1223 に変更する IE のバグに由来します。 jXHR オブジェクトがあるため、これは中間の追加レイヤーに相当するため、jXHR オブジェクトから取得される statusCode は 1223 として表示されず、204 に戻されます。

jQuery.ajax 関数の設定項目には追加の statusCode 項目があり、その構造は特定のステータス コードを返すときにコールバック関数を指定するために使用されます。

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

jQuery.ajax({

url: 'xxx',
statusCode: {
200: function() {リクエストを正常に処理しました},
404: function() {処理中のページが見つかりません},
503: function() {サービスを処理しています利用できません}
}
})


このコールバックを追加すると、jQuery.ajax 関数にはすでに多くのコールバック関数が含まれています。トリガー プロセスは次のとおりです。

返されたステータス コードに基づいて成功またはエラーのコールバックをトリガーします。
ステータス コードに基づいて、対応する statusCode コールバックをトリガーします。
完了コールバックをトリガーします。
グローバル ajaxComplete コールバックをトリガーします。
現時点で実行中の AJAX がない場合は、グローバル ajaxStop コールバックをトリガーします。
その他の詳細
エントリ関数 jQuery.fn.init に追加パラメータが追加されました。値は常に rootjQuery です。これは、init 内の rootjQuery 変数の検索速度を高速化するために使用されます。関数 (効果ドメインのレイヤーを削減):

//jQuery 1.5 beta1 ソース コード 23 行目
jQuery = function( selector, context) {
// jQuery オブジェクトは実際には単なる init ですconstructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
}jQuery オブジェクトのサポートが継承されているのは、jQuery を直接呼び出すいくつかのコードをこれへの呼び出しに変更することです。コンストラクター:

202 行目: return this.constructor( context ).find( selector );
253 行目: var ret = this.constructor();
334 行目: return this.prevObject | | this.constructor(null) ;同時に、jQuery を継承する型を作成するための jQuery.subclass 関数も提供されています。jQuery はあまり一般的ではなく、jQuery を継承するために使用されたこともありません。この機能がどれほど便利であるかを言うのは不便です。