التابع jQuery.proxy() في jQuery
jQuery.proxy( function, context )
القيم المعادة
يعيد دالةً (Function).
الوصف
يأخذ هذا التابع دالةً ويعيد أخرى جديدة تحوي محتوًى محددًّا.
jQuery.proxy( function, context )
أُضيف مع الإصدار: 1.4.
function
دالةٌ من الشكل Function() يراد تبديل سياقها.
context
الكائن الذي يجب أن يُعيَّن سياق (this) الدالة إليه.
jQuery.proxy( context, name )
أُضيف مع الإصدار: 1.4.
context
الكائن الذي يجب أن يُعيَّن سياق الدالة إليه.
name
سلسلة نصية تمثل اسم الدالة التي يراد تبديل سياقها (يجب أن تكون خاصِّيَّة للكائن context).
jQuery.proxy( function, context [, additionalArguments ] )
أُضيف مع الإصدار: 1.6.
function
دالةٌ من الشكل Function() يراد تبديل سياقها.
context
الكائن الذي يجب أن يُعيَّن سياق (this) الدالة إليه.
additionalArguments
أي شيء، ويمثِّل أيُّ عدد من الوسائط المراد تمريرها إلى الدالة المشار إليها في الوسيط function.
jQuery.proxy( context, name [, additionalArguments ] )
أُضيف مع الإصدار: 1.6.
context
الكائن الذي يجب أن يُعيَّن سياق الدالة إليه.
name
سلسلة نصية تمثل اسم الدالة التي يراد تبديل سياقها (يجب أن تكون خاصِّيَّة للكائن context).
additionalArguments
أي شيء، ويمثِّل أيُّ عدد من الوسائط المراد تمريرها إلى الدالة المسماة في الوسيط name.
هذا التابع مفيد جدًا لربط معالجات حدثٍ بعنصرٍ في الحالة التي يشير فيها السياق إلى كائن آخر. أضف إلى ذلك أنَّ jQuery تتأكَّد من أنَّه حتى لو رَبطْت الدالة المعادة من التابع jQuery.proxy()، فستلغي ارتباط الدالة الصحيحة إن مُرِّرت الدالة الأصليَّة.
انتبه إلى أنَّ النظام الفرعي لربط أحداث jQuery يعمل على إسناد مُعرِّف (id) فريد لكل دالة معالِجة لحدث لكي يتتبَّعها متى ما استُخدمَت وبذلك يحدِّد الدالة المراد إلغاء ارتباطها. يَعدُّ هذا النظام الدالة التي يعيدها التابع jQuery.proxy() على أنَّها دالةٌ واحدةٌ حتى عندما تُستخدَم لربط سياق مختلف. لتجنب إلغاء ارتباط دالة المعالجة الخطأ، استعمل اسم مجال فريد للحدث (مثل "click.myproxy1") في عمليَّة الربط وإلغائه بدلًا من تحديد الدالة الوسيطة أثناء عمليَّة إلغاء الارتباط.
بدءًا من الإصدار jQuery 1.6، أصبح بالإمكان تمرير أي عدد من الوسائط الإضافيَّة إلى التابع $.proxy() والتي ستُمرر بدورها إلى الدالة التي يراد تغيير محتواها.
بدءًا من الإصدار jQuery 1.9، ستُستدعى الدالة الوسيطة مع الكائن this نفسه الذي استدعي التابع $.proxy() معه عندما تكون قيمة الوسيط context المعطاة قيمة عدميَّة (null) أو غير مُعرَّفة (undefined). سيسمح هذا بأن يُستعمَل التابع $.proxy() بشكل جزئي لتطبيق وسائط دالةٍ دون تغيير المحتوى.
أمثلة
تغيير سياق الدوال المرتبطة بمعالج الحدث click عبر استعمال الشكل $.proxy("function, context") وإلغاء ربط معالج الحدث الأول بعد الضغطة الأولى:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.proxy مثالٌ عن استعمال التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button type="button" id="test">اختبر</button></p>
<div id="log"></div>
<script>
var me = {
type: "وحش",
test: function( event ) {
// إلى العنصر الذي يستهدفه الحدث `this` دون استعمال وسيط، سيشير
// لمعرفة هذا العنصر والرجوع إليه event.target استعمل
var element = event.target;
$( element ).css( "background-color", "red" );
// الذي يضم هذه الدالة me إلى الكائن `this` مع استعمال وسيط، سيشير
$( "#log" ).append( "مرحبًا يا " + this.type + "<br>" );
$( "#test" ).off( "click", this.test );
}
};
var you = {
type: "شخص",
test: function( event ) {
$( "#log" ).append( this.type + " " );
}
};
// you في سياق الكائن you.test() تنفيذ
// لا يهم أين ستستدعى
// `you` مثلًا إلى `this` سيشير
var youClick = $.proxy( you.test, you );
// #test بـ click ربط معالج الحدث
$( "#test" )
// this === "وحش"; سيفك ارتباط معالج الحدث بعد الضغطة الأولى
.on( "click", $.proxy( me.test, me ) )
// this === "شخص"
.on( "click", youClick )
// this === "وحش"
.on( "click", $.proxy( you.test, me ) )
// this === "<button> element"
.on( "click", you.test );
</script>
</body>
</html>
إرغام سياق دالة على استعمال الشكل $.proxy("context, function name") وإلغاء ربط معالج الحدث الأول بعد الضغطة الأولى:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.proxy مثالٌ عن استعمال التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button id="test">تجريب</button></p>
<p id="log"></p>
<script>
var obj = {
name: "أحمد",
test: function() {
$( "#log" ).append( this.name );
$( "#test" ).off( "click", obj.test );
}
};
$( "#test" ).on( "click", jQuery.proxy( obj, "test" ) );
</script>
</body>
</html>
تغيير سياق دالة رُبطِت بمعالج الحدث click:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.proxy مثالٌ عن استعمال التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><button type="button" id="test">Test</button></p>
<div id="log"></div>
<script>
var me = {
// أنا دب
type: "دب",
// two و one تأتي بعد event انتبه إلى أن
test: function( one, two, event ) {
$( "#log" )
// الوسيط الإضافي الأول ،`you` إلى `one` تعيَّن
// $.proxy المعطى عند استدعاء
.append( "<h3>Hello " + one.type + ":</h3>" )
// `me` إلى `this` يشير
// ($.proxy الوسيط الإضافي الثاني الممرر إلى الدالة)
.append( "I am a " + this.type + ", " )
// الوسيط الإضافي الثاني ،`they` إلى `two` تعيَّن
// $.proxy المعطى عند استدعاء
.append( "and they are " + two.type + ".<br>" )
// "click" نوع الحدث هو
.append( "Thanks for " + event.type + "ing." )
// `event.target` العنصر المضغوط عليه هو
// "button" ونوعه
.append( "the " + event.target.type + "." );
}
};
var you = { type: "cat" };
var they = { type: "fish" };
// `me` في السياق me.test() تهيئة معالج الحدث لتنفيذ
// كوسائط إضافية `me` و `me`مع
var proxy = $.proxy( me.test, me, you, they );
$( "#test" )
.on( "click", proxy );
</script>
</body>
</html>