jQueryの実装原理のシミュレーションコード -1 Core part_jquery

コア部分は ID とタグ名を使用する 2 つのセレクターを実装し、CSS 設定とテキスト設定も提供できます。

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

// # jQuery 1.4 での対応を表します。 .2 行数
// 便宜上、変数 unknown を定義します
var unknown = unknown;
// jQuery は関数であり、実際には、オブジェクトを作成するために jQuery.fn.init が呼び出されます
var $ = jQuery = window.$ = window.jQuery // #19
= 関数 (セレクター, コンテキスト) {
return new jQuery.fn.init(セレクター, コンテキスト)
; >// ID であるかどうかを確認するために使用されます
idExpr = /^#([w-] )$/;
// すべての jQuery オブジェクトで共有するための jQuery のプロトタイプ オブジェクトを設定します
jQuery。 fn = jQuery.prototype = { // #74
length: 0, // #190
jquery: "1.4.2", // # 187
// これは例であり、2 つだけ提供しています選択メソッド: ID とタグ名
init: function (selector, context) { // #75
// HTML 文字列を処理します
if (typeof selector === "string") {
/ / HTML 文字列を扱っていますか?
match = idExpr.exec(selector);
// #id にコンテキストが指定されていないことを確認します
if (match && match[ 1]) {
var elem = document.getElementById(match[1]);
if (elem) {
this.length = 1; }
}
else {
// タグ名を直接使用します
var names = document.getElementsByTagName(selector);
for (var l = nodes.length, j = 0; j this[j] = ノード [j];
this.length = ノード.length>}
this.context = ドキュメント; this.selector = selector;
return this;
}
},
//表現される DOM オブジェクトの数
size: function () { // #193
return this .length;
} ,
// CSS スタイルの設定に使用されます
css: function (name, value) { // #4564
this.each(
function (name, value) {
this.style [name] = value;
},
arguments // 実際のパラメータは配列
) の形式で渡されます。 ,
// テキストの設定に使用されます Content
text: function (val) { // #3995
if (val) {
this.each(function () {
this. innerHTML = val;
},
arguments // 実際のパラメータは配列の形式で渡されます
)
}
return this;
},
//すべての DOM オブジェクトを操作する
// callback カスタマイズされたコールバック関数
// args カスタマイズされたパラメータ
each: function (callback, args) { // #244
return jQuery.each(this, callback) , args);
}
}
// init 関数のプロトタイプは jQuery のプロトタイプでもあります
jQuery.fn.init.prototype = jQuery.prototype; // #303 //
jQuery.each = function (object, callback, args) の要素を含む jQuery オブジェクトを走査するために使用されます { // #550
var i = 0, length = object.length
/ / パラメーターが指定されていません
if (args === unknown) {
for (var value = object[0];
i < length && callback.call(value, i, value) !== false;
value = object[ i ])
{ }
}
else {
for (; i < length; ) {
if (callback.apply(object[ i ], args) === false) {
break;
}
}
}
}


jQuery では、jQuery オブジェクトは実際にはセレクターを表す配列のようなオブジェクト。取得されたすべての DOM オブジェクトのコレクションには、配列のような長さ属性があり、表される DOM オブジェクトの数を示します。添字を使用して走査することもできます。

95 行目の jQuery.each は、こ​​の模倣配列を走査し、その中の各要素を走査するために jQuery で使用される基本メソッドです。コールバックは、この DOM オブジェクトを処理する関数を表します。通常はこのメソッドを使用せず、jQuery オブジェクトの each メソッドを使用してトラバースします。内部的には、jQuery オブジェクトの css メソッドと text メソッドは実際に jQuery オブジェクトの各メソッドを使用して、選択された要素を処理します。

これらの関数とオブジェクトの関係については、jQuery プロトタイプ関係図を参照してください。

次のスクリプトは、このスクリプト ライブラリを使用します。




コードをコピー

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

// プロトタイプ操作$( "h1" ).text("Hello, world.").css("color", "green");