jQuery(オブジェクトの合成)_jqueryの1つを読み込む

私は jQuery の書き方に非常に戸惑い、特に Prototype の $ を使った後はしばらく jQuery の $ が理解できませんでした。現在フロントエンドを学ぶ学生にとって、jQuery は最初に触れるものである可能性があり、非常に慣れていて自然なものであると感じるでしょう。

当時の API ドキュメントが今も私のパソコンに保存されているので、感謝の意を込めて写真を掲載させていただきます

この時期、私の初級レベルの先生は Mo Mo でした。実際、彼は今でも私の尊敬する同僚の 1 人です。彼のプログラミングスキルは非常に高く、プログラミング言語の限界をすでに突破していると信じています。中国で jQuery がまだ普及する前、誰もが Prototype.js を使用していたとき、彼はすでに jQuery をプロジェクトに導入していました。

本題に戻りましょう。現在の jQuery バージョンは 1.6.1 になりました。当時の約2,000行から9,000行まで拡大しました。もうすぐ1wラインを突破すると思います。一部の単純な Web ページでは、jQuery の導入はそれほど軽量ではなくなりました。ここでの学習はバージョン 1.6.1 で、読み書きを同時に行い、最終的に 1,000 行程度の「mini jQuery」を書きます。

以下は jQuery 1.6.1 コード スニペットです

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

var jQuery = function( selector, context ) {
// jQuery オブジェクトは、実際には単に init コンストラクター '強化された'
return new jQuery.fn.init( selector, context, rootjQuery );
},
...
class2type = {};

jQuery.fn = jQuery.prototype = {
コンストラクター: jQuery,
init: function(selector, context, rootjQuery){
}
}

// 後のインスタンス化のために init 関数に jQuery プロトタイプを与えます
jQuery.fn.init.prototype = jQuery.fn; 🎜>

一見すると、
プロトタイプ メソッド
を使用してクラス jQuery (別名 $) を記述しているように見えますが、実際に使用するときは、関数呼び出しを使用します。 $("#id")、新しい $("# id") ではありません。 Identifier
jQuery は関数であり、関数 init の新しいインスタンスを作成して戻ります。これまでのところ、実際のコンストラクターは jQuery.fn.init であることがわかっています。 jQuery の記述は非常に奇妙で、jQuery プロトタイプで init がハングするため、読むのが少しわかりにくくなります。 jQuery.fn.init.prototype = jQuery.fn;

がキーセンテンスです。この文は、関数 jQuery のプロトタイプを関数 init のプロトタイプに代入します。 $("#id") を呼び出したときに返されるオブジェクトは 2 つの部分で構成されます。 1、関数 init (this.context など) によってもたらされます。2、関数 jQuery のプロトタイプ (this.size/this.toArray など) によってもたらされます。
jQuery を模倣して

コードをコピーします コードは次のとおりです: / / zchain-0.1 .js

function $(selector){

return new $.prototype.init(selector)
}
$.prototype={
init:function(selector); {
if(selector === 未定義){
this.length = 0;
これを返す;
}
if(selector.nodeType==1){
this[ 0] = セレクター ;
}else{
this[0]=document.getElementById(selector)
}
},
css:function (name,value ){
this[0].style[name] = value;
return this;//chain call
},
hide:function(){
var self =this;
setTimeout(function(){
self[0].style.display="none";
},3000);
}
$.prototype.init.prototype=$.prototype;


簡単にするために、ここではセレクターは HTML 要素または要素 ID のみを渡します (将来、ただしすべての CSS セレクターは実装されません))、length 属性がこれに付加され、値 1 が割り当てられます。

コードをコピーします

コードは次のとおりです: var obj = $( ); console.dir(obj);

$() は、呼び出し後に obj の構成をテストするためだけに意味がありません。 Firebug コンソールの出力は次のとおりです:

length:0;
init:function
attr:function
hide:function

つまり、obj オブジェクトは this とfunction init の function $ プロトタイプで構成されます。
$.prototype のメソッドを見ると、css メソッドと Hide メソッドを追加しただけで、これら 2 つのメソッドの実装も非常に簡単です。




コードをコピー

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

3 秒後に非表示になります。

まず css を呼び出してフォントの色を赤に設定し、3 秒後に非表示にします。
要約すると:
jQuery オブジェクトは jQuery.prototype.init のインスタンスを指します。これは単に新しい jQuery.prototype.init です。ここでの jQuery.prototype.init の型は function であり、クラスとみなすことができます。

jQuery オブジェクトは次の部分で構成されます。
1. jQuery.prototype.init でこれに関連するプロパティまたはメソッド。
2、jQuery.prototype.init.prototype にハングするプロパティまたはメソッド。
3. jQuery.prototype は jQuery.prototype.init.prototype に割り当てられるため、jQuery.prototype にぶら下がっているプロパティとメソッドも jQuery オブジェクトの一部です。
4. jQuery.fn.extend({...}) によって拡張されたプロパティまたはメソッド (後述)。
/201106/yuanma/zchain.rar