jQuery のチェーン call_jquery の各関数の簡単な分析

とはいえ、jQuery のおかげでフロントエンド技術を学ぶ人が増えているにもかかわらず (学校の図書館で偶然 jQuery の基本チュートリアル (2) に出会ったので、フロントエンド技術を深く学びたいと思った)、jQuery に関するブログ記事もJavaScript よりもプログラミングの敷居が大幅に下がりますが、$('#id').append('

xxx

').clone( ).appendTo( など、あまりにも多くの詳細が隠蔽されます。 x).end().css(...)....この動作モードは、従来の JavaScript の影を見つけるのを困難にしています。ブラウザ間の違いは、なくなるとすぐに消えてしまうようです。この快適な環境で JavaScript がどのようにして異なるブラウザで一貫して動作するのかということを考えることは、ほとんどの人にとっては難しいことだと思います。祝福か呪いか。
要点に戻りましょう...真剣に考えましょう
$() 関数はネイティブ DOM オブジェクトの配列をラップするオブジェクトを返し、このオブジェクトのプロトタイプで拡張された関数はすべて操作用です。 jquery ライブラリに精通している人は、jquery オブジェクトに関連するほとんどの関数がこの関数を使用することを知っています。簡単な実装は次のようになります。 🎜>(繰り返しますが、これは単なる実装原則であり、特定の機能上の問題は考慮しません)

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

if (!window['$'])
window['$'] = window['jQuery'];
/*上記の領域は前回の記事の結び パッケージの内容
* 受信オブジェクトに基づいて操作を実行する jQuery.each を定義
* @param {Object} obj
* @param {Object} func
* For簡単にするために、前の記事と同じように配列と jQuery オブジェクトのみを考慮しました。原理は同じである必要があります。
*/
window['jQuery']['each']=function(obj,func){
if( obj.constructor==Array){
for(var i=0;ifunc.call(obj[i],i,obj[i] );//はい 入力関数は function(i,item) の形式である必要があることがわかります。i は走査される添字を表し、item は配列内で走査されるオブジェクトを表します。
}
}else if( obj.elements&&obj.elements .constructor==Array){//ここでは、jQuery のインスタンスであるかどうかを判断する代わりに、伝説的なアヒル ルールが使用されています。配列型の要素がある限り、私はそれを操作します
。 for(var i=0;ifunc.call(obj.elements[i],i,obj.elements[i]);// 受信したメッセージがfunc は function(i , item) の形式である必要があります。 i は走査される添字を表し、 item は配列内で走査されるオブジェクトを表します。
}
}else{
return null;



この関数に基づいて、_jQuery のプロトタイプの拡張を開始できます。まず、ラッパー オブジェクトが直接呼び出すことができるメソッドをそれぞれ記述します (これは繰り返しではありません)。次に、この各関数を呼び出して完了します。オブジェクト配列

を走査します。例:

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

/ /クロージャ内に書き込みます。昨日、名前の競合があった jQuery コンストラクターの名前が _jQuery

_jQuery.prototype = {
each: function に変更されたことに注意してください。 (func){
jQuery.each(this, func) ;
return this;
},
attr: function(key, value){
// 以下の関数を定義します。属性の設定と操作の取得
if (arguments.length == 0) {
return null;
}
else
if (arguments.length == 1) {
return this.elements[0].getAttribute(key);
}
else if(arguments.length == 2){
this.each(function(i, item){
//ここ各メソッドを再定義する利点がわかります。コードが合理化されます。 2: 内部関数では、ウィンドウの代わりに呼び出し元のラッパー オブジェクトを指します
item.setAttribute(key, value)
})
}
}
/*
* ここで、他のメソッドの導入を開始できます
*/
}

いくつかの簡単なテストを行ってみましょう: (前の記事のテスト HTML のままです)

入力:

var k= $('#header');
var k= $('#header') )); 🎜>

出力:

テストタイトル!

など、それぞれのメソッドに依存することで、ラッパーメソッドを効果的に拡張できます。

前述した jQuery のチェーン呼び出しに影響する 3 つの重要な点があります。実際、後で考えると、jQuery の内部コードのメンテナンスは、少なくとも一部のライブラリのメンテナンスより優れているわけではありません。操作性としては非常に使いやすい（もちろん一部の小規模な運用に限られるし、大規模なプロジェクトにはしばらくアクセスできないし、一部の大人の意見に従うのは容易ではない）。トラバーサル操作だけを見ると、このライブラリは洗練されたプラグインにのみ依存していることがわかります。拡張すると肥大化するだけです。

注: もし誰かが jquery ソース コードを注意深く分析したなら、彼らは間違いなく私の貧弱ないわゆる実装を嘲笑するでしょう。私は確かに JavaScript dom Advanced Programming や JavaScript Advanced などの本を数冊しか読んだことがありません。設計パターンは、良い本を読んだ後の私のインスピレーションに基づいているだけなので、jquery の具体的な実装とは大きく異なる可能性があります。可能であれば修正していただければ幸いです。