jQueryのソースコードでJavaScriptを学ぶ(1)_jquery

JQuery は非常に人気があるため、オープンソース コードを通じて学習することは優れた学習方法であるに違いありません。

以下は私が行ったシミュレーション方法です。できるだけ簡略化したものです。

オブジェクト C を定義します (jquery の $ メソッドに似ています) - これも jquery の非常に賢い設計です

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

(function(){
var
_cQuery = window.cQuery,
cQuery = function(){
return new cQuery.fn.init();
};
cQuery.fn = cQuery.prototype = {
console.log(this); this;
},
test : function () {
console.log('test');
}
cQuery.fn.init.prototype = cQuery. fn;
window.C = window.cQuery = cQuery;

C().test();


出力結果>

コード解析

1. cQueryをwindow属性に登録し、グローバル変数として使用します。単純な名前として C を使用します。

window.C = window.cQuery = cQuery;
2.
cQuery.fn.init.prototype = cQuery.fn>
object cQuery ):

この文のスクリーンショットを削除します。



この文のスクリーンショットを入力してください:


難易度分析: プロトタイプの転送

init のプロトタイプは現在の関数にすぎません。

cQuery.fn.init.prototype = cQuery.fn; を使用して、init コンストラクターのプロトタイプ オブジェクトをオーバーライドし、クロスドメイン アクセスを実現します。

評価:
これは賢いやり方です。 new cQuery.fn.init() で作成された新しいオブジェクトは、init コンストラクターのプロトタイプ プロトタイプ オブジェクトのメソッドを持ち、プロトタイプ ポインタのポイントを変更します。 cQuery クラスを指します。 ——この方法で作成されたオブジェクトは、cQuery.fn プロトタイプ オブジェクトによって定義されたメソッドを継承します。
3. var を使用して変数と関数を定義します。 Jquery ソース コードは、79 行を使用して一連の変数を定義します (先頭部分)。



各メソッド

コードをコピー

コードは次のとおりです。 (function(){ var _cQuery = window.cQuery,

cQuery = function(){

return new cQuery.fn.init();
};
cQuery.fn = cQuery.prototype = {
init : function () {
return this;
},
each : function(obj, callback) { // method
var name, length = obj.length;
for (obj 内の名前) {
if (callback.call(obj[name], name, obj[name]) === false) {
ブレーク;
}
}
},
isWindow : function(obj) {
return obj != null && obj == obj.window>} };
cQuery.fn.init.prototype = cQuery.fn;
window.cQuery =cQuery;

C().each ({ 高さ : '高さ', 幅 : '幅'}, function(name, type){ console.log(this, name, type); });


出力結果


難易度分析: callback.call(obj[name], name, obj[name])
コールバックは function(name, type){ console.log(this, name,type);} this Method
最初の obj[name] は「高さ」または「幅」の文字列で、コールバック関数内のこれです。
name、2 番目の obj[name] はコールバックに渡されるパラメータです。

isWindow() メソッド

上記のコードに基づいて、次のように記述します。



コードをコピー

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

isWindow : function(obj) { return obj != null && obj == obj.window } 呼び出し:

コードをコピー

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

console.log( cquery.isWindow(window)); console.log(cquery.isWindow(document));
出力結果

window オブジェクトには特別な属性 window があり、これは self 属性に相当し、ウィンドウ自体への参照が含まれます。この属性を使用して、ウィンドウ オブジェクトであるかどうかを判断します。

概要

まだ調査を始めたばかりです。いくつかの部分があまり明確ではないかもしれません。誰かが私に情報を追加してくれると助かります。
遅くなりましたので、研究の続きはまた次回にさせていただきます。