JQuery を動的に拡張する object_jquery に関する別の視点

例: 従業員オブジェクトがあります。

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

functionemployee(){
this.e_id = 0;
this.e_name = "";
}

次に、「age」属性と「 toString()" をそれにメソッド、

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

var empObj = 新しい従業員();
empObj["年齢"] = 20;
empObj["toString"] = function() { return this.e_id.toString() this.e_name };

単純な行 コードはこの作業を引き受け、JavaScript 組み込みによってサポートされていますが、多くの場合、これに基づいてある程度の拡張をサポートする必要があるため、この単純なコード行を次のように抽出します。メソッド:

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

function dym_setprop(obj, key , value) {
if (obj && key) {
obj[key] = value;
}
}

これを見て、まずは飛び込んでみましょう

オブジェクト指向プログラミングでは、すべてのプロパティ (Get/Set) が外部で使用されるため、このメソッドを Javascript にチェックインする方法を考えてください。ここで、dym_setprop 関数に戻りましょう。つまり、obj[key]=value の直接割り当てメソッドは dym_setprop メソッドでは使用できませんが、Set はサポートされている必要があります。

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

function dym_setprop(obj, key, value, fn) {
if (obj && key) {
fn(obj, key, value);
}
}

パラメータ fn、オブジェクトは直接操作されませんdym_setprop では、関数 fn を使用して対応するオペレーション コードを置き換えます。 Set のサポートに加えて、多くの空き領域もあります。
dym_setprop メソッドの詳細を続けてみましょう。ここでは、値が値型または関数であることを誰もが知っています。他のことを考慮せずに値を直接割り当てることができます。関数の場合はそれほど単純ではありません。

1. 関数を新しく拡張された属性

に直接割り当てます。2. 関数実行の戻り値を新しい属性に割り当てます。拡張属性

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

function dym_setprop(obj, key, value, fn, exec, pass) {
if (obj && key) {
var temp = value;
if (exec) {
temp = value.call(obj, key, fn( obj, key));
}
fn(obj, key, temp, pass);
}
}

このコードでは、パラメータ exec は次のように機能します。上記 2 つ この操作で選択されたロール、パラメータパスは追加の実行パラメータです。また、fn については、上の 2 か所で使用されているため、疑問に思うかもしれません。違いはパラメータの数だけです。 ！ C# のプロパティについてもう一度考えてみましょう。Get/Set があるため、ここでは fn(obj,key) が Get に相当し、fn(obj,key,temp,pass) が Set に相当します。

例: fn の定義と使用については、次のコードを参照してください。

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

employee.AccessProp = function(obj, key, value) {
if (value) {
obj[key] = value;
else {
return obj[key];
}
}

dym_setprop(empObj, "age", function(key, value) { return value 10; }, 従業員.AccessProp、true);
これだけ読んで、なぜ単純な動的に拡張されたオブジェクト プログラムをこのように記述する必要があるのか​​と憂鬱になるかもしれません。実際には、そうではありません。オブジェクトを動的に展開する場合は、上記の dym_setprop のアイデアを採用しないことをお勧めします。しかし、より抽象的な観点から考え、プロセス実行のテンプレートとして dym_setprop のプログラムを使用したい場合は、これは良い方法です。内部的には特定のコードを持たない (obj [key]=value または obj[key] の実行) は関数 fn に置き換えられるため、特定の実行は完全に自由になります。

上記の考え方を理解したら、この記事の核心に入りましょう。JQuery はオブジェクトの動的拡張をどのように実装するのでしょうか。アクセス関数、

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

function access(elems, key) , value, exec, fn, pass ) {
var length = elems.length;

// 多くの属性を設定する
if ( typeof key === "object" ) {
for ( var k in key ) {
access( elems, k, key[k], exec, fn, value );
}
return elems;
// 1 つの属性を設定します
if ( value !== unknown ) {
// exec が true の場合、オプションで関数の値が実行されます。
exec = !pass && exec && jQuery.isFunction(value); 🎜>for ( var i = 0; i fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
return elems;
}
// 属性の取得
return length ? : null; >}



アクセス関数のコードを注意深く読むと、この関数は dym_setprop に非常によく似ていることがわかります:

という追加のコードがあるだけです。

コードをコピー

コードは次のとおりです: if ( typeof key === "object" ) { for ( var k in key ) { access( elems, k, key[k], exec, fn, value );

}

return elems;オブジェクトの動的拡張プロパティをサポートするために実際に使用されていることが簡単にわかります。具体的な実行プロセスは次の図に示されています。


この記事は、JQuery 開発者がどのようにしてアクセス関数を設計し、それをサポートさせたかを私自身の観点から推測しようとしています。オブジェクトを動的に展開し、アクセス実行プロセスを説明します。実際、私の推測は正しくないかもしれませんが、JQuery に関する私の研究には支障はありません。