JQuery を動的に拡張する object_jquery に関する別の視点-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:26:30

オリジナル

1017 人が閲覧しました

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

 
 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; 
} 
} 

これを見て、まずは飛び込んでみましょう
JQuery を動的に拡張する object_jquery に関する別の視点

オブジェクト指向プログラミングでは、すべてのプロパティ (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 に関する私の研究には支障はありません。