Google Chrome
MODx
Smashing Magazine
W3Schools
Mozilla Developer Network
Baymard Institute
FileHippo
CSS-Tricks
PHP
David Walsh
Kavoir
Delegation با اسب سفید
۱۶ اسفند ۱۳۸۸ ساعت ۰۲:۵۳
طراحی وب
توابع Delegation در فریم ورکهای MooTools و jQuery
همونطور که مستحضریم، جاوااسکریپت امکان تعیین Event رو به هر Element از صفحه میده که مثلا اگر فلان Element کلیک شد این اتفاقا بیافته و اگر یکی دیگه mouseover شد اون یکی اتفاقا بیفته و غیره. تعیین این Eventها از طریق Frameworkها مثل MooTools و jQuery عجیب آدم رو یاد هلو میندازه. مخصوصا که امکان تعریف Evnet های اختصاصی رو هم میدن مثل OnLoveBoplo، OnVisitBoplo و غیره.
این فریم ورکها، امکانی برای اجرای کد در زمان تکمیل DOM رو دارند که در MooTools رویداد domReady و در jQuery متد ()ready. که به ما امکان قرار دادن کدها رو در <head> صفحه میدن و خیلی کاربرد دارند. مثل کدهای زیر که وقتی هر لینکی کلیک شد، یه alert ناقابل نمایش میده:
// MooTools
window.addEvent('domready', function(){
$$('a').addEvent('click', function() {
alert("You've clicked " + this.href + "!");
});
});
// jQuery
$(document).ready(function(){
$('a').click(function() {
alert("You've clicked " + $(this).attr('href') + "!");
});
});
همونطور که گفتم این کد در زمان تکمیل DOM یکبار انجام میشه و Eventها رو تنظیم می کنه. همه چی آرومه و من خیلی خوشحالم تا اینکه یه جایی یک لینک توسط جاوااسکریپت ساخته میشه یا توسط Ajax به صفحه اضافه میشه و کاملا منطقی خواهد بود که چون موقع اجرای کدهای بالا اون لینک وجود نداشته، Eventاش هم Set نشده و کدهاش هم اجرا نخواهد شد. برای حل این مشکل سه راه وجود داره:
اولی اینکه DOM و <head> اینا رو بیخیال شیم، function بسازیم و به همه لینکها onclick اضافه کنیم که اصلا جالب نیست. روش دوم اینه که کار خودمون رو بکنیم ولی هر موقع لینکی به صفحه اضافه شد، کدهای بالا رو اجرا کنیم تا Eventها دوباره تنظیم شه که از نظر بهینگی مناسب نیست و اما روش سوم که مثل پست LazyLoad، یک تنبل دوست داشتنی از خلاقیت برنامه نویسها بوجود اومده، قابلیت Delegation است.
Delegation نه تنها این مشکل رو حل کرده، بلکه از نمونه کد بالا هم بهینه تره. Delegation براساس Parent یا شاخه بالادستی عمل می کنه. به این ترتیب که Event برای Parent تنظیم میشه با این شرط که Element های موردنظر ما رو شامل بشه یعنی توی مثال این پست، من میگم توی <body> (همون Parentامون)، هر لینکی که کلیک شد (رویداد کلیک، روی Element موردنظرمون یعنی لینک)، فلان کدها اجرا بشه. مثلا:
// MooTools 1.2.4 + Element.Delegation
window.addEvent('domready', function(){
$(document.body).addEvent('click:relay(a)', function() {
alert("You've clicked " + this.href + "!");
});
});
// jQuery 1.4.2
$(document).ready(function(){
$(document).delegate('a', 'click', function() {
alert("You've clicked " + $(this).attr('href') + "!");
});
});
همونجور که میبینی، فرمت استفاده از این قابلیت در MooTools و jQuery متفاوته. MooTools بخشهای مورد نظر رو توسط عبارت relay میگیره و jQuery توسط پارامتر اول متد delegate. نحوه اجرا شدن این مثال به این شکله که برای <body> یک Event از نوع click تعریف شده و زمانی که اجرا میشه (یعنی کلیکی روی صفحه صورت میگیره) میاد چک می کنه که آیا Element کلیک شده، همون Element مورد نظر ماست یا نه (تو این مثال تگ <a>) که اگر بود، کدها رو اجرا می کنه.اینجوری اصلا مهم نیست لینکهای صفحه چطور بوجود میان و تغییر می کنند چون فقط در زمان Event سراغشون میریم. همچنین این روش از این نظر بهینه تر از روش قبلیه که توی روش اول، مثلا اگر در صفحه 100 تا لینک داشته باشیم، 100 هم Event تنظیم میشه ولی اینجوری فقط یک Event برای Parent تعیین میشه.
- اطلاعات بیشتر:
- MooTools Delegation
- jQuery .delegate() Method
بروز باشید
تو چی فکر می کنی؟