به کارگاه ترجمه ی سینا2 خوش آمدید!

تبلیغات شما در اینجا بالا

حذف کدهای تکراری در جی کوئری

مسئله

ما می خواهیم وقتی که صفحه لود شد، چند عنصر DOM را محو (hide) کنیم یا نمایش(show) دهیم. یا اینکه آنها را دستکاری کنیم. همچنین نیاز داریم تا بعدا در پاسخ به چند رویداد(event) مختلف، همین کارها را انجام دهیم:

$(document).ready( function() {

 // Set visibility at startup
 // تنظیم نمایش در ابتدای کار
 $('#state').toggle( $('#country').val() == 'US' );
 $('#province').toggle( $('#country').val() == 'CA' );

 // Update visibility when country selector changes via mouse
 // از طریق ماوس تغییر می کند country آپدیت کردن نمایش وقتی که سلکتور
 $('#country').change( function() {
   $('#state').toggle( $(this).val() == 'US' );
   $('#province').toggle( $(this).val() == 'CA' );
 });
 // Also update when country selector changes via keyboard
 // از طریق کیبورد تغییر می کند country آپدیت کردن نمایش وقتی که سلکتور
 $('#country').keyup( function() {
   $('#state').toggle( $(this).val() == 'US' );
   $('#province').toggle( $(this).val() == 'CA' );
 });
});

 کدهای بالا درست کار می کنند اما ما می خواهیم آنها را ساده سازی کنیم تا کدهای تکراری در آن وجود نداشته باشند.

نکته: چرا باید هردوی رویدادهای change و keyup را بکار ببریم؟ وب سایت های زیادی هستند که در یک لیست گزینش شده، تنها از رویداد change استفاده می کنند. اگر ما با استفاده از ماوس یک گزینش انجام دهیم، رویداد change به خوبی کار می کند اما اگر ما بر روی لیست گزینش کلیک کنیم و سپس از دکمه های فلشی بالا(up) و پایین(down) استفاده کنیم تا در میان گزینه های نشان داده شده، انتخابی انجام دهیم، هیچ کاری انجام نخواهد شد. در یک لیست که باید چیزی را با کلیدهای کیبورد، از آن انتخاب کنیم، رویداد change پاسخگو نیست و اجرا نمی شود.  اما اگر ما از رویداد keyup استفاده کنیم، لیست انتخابی به کلیدهای فلشی کیبورد پاسخ می دهد؛ و برای کاربرانی که از کیبورد استفاده می کنند، مشکل انتخاب را حل می کند.


راه حل 1

ما می توانیم کدهای تکراری را در داخل یک تابع ببریم و این تابع را در زمان لود و در زمانی که به رویداد پاسخ داده می شود، فراخوانی کنیم. ما می توانیم از متد جی کوئری bind() در یک زمان، از هردوی شنونده های رویداد استفاده کنیم؛ همچنین می توانیم  برای ذخیره ی داده هایی که بیش از یک بار در متغیرها مورد استفاده قرار گرفته اند، از آن استفاده کنیم:

$(document).ready( function() {
   var $country = $('#country');
   function setVisibility() {
      var value = $country.val();
      $('#state').toggle( value == 'US' );
      $('#province').toggle( value == 'CA' );
    }
    setVisibility();
    $country.bind( 'change keyup', setVisibility );
});

 


 راه حل 2

می توانیم با استفاده از متد trigger بلافاصله پس از اتصال(attaching) رویداد، آن را راه اندازی کنیم. این کار را می توانیم  همراه با فن متد bind() و متغیرهای محلی در راه حل 1 انجام دهیم:

$(document).ready( function() {
$('#country')
  .bind( 'change keyup', function() {
     var value = $(this).val();
     $('#state').toggle( value == 'US' );
     $('#province').toggle( value == 'CA' );
  })
  .trigger('change');
});

 گرفتن کدهای تکراری و قرار دادن آنها در درون تابع های مجزا به طوری که بتوانیم در مکان های مختلفی آنها را فراخوانی کنیم،تقریبا در تمام زبان ها، یک تمرین برنامه نویسی استاندارد محسوب می شود. راه حل 1، از این روش استفاده می کند: به جای اینکه کدها را برای تنظیم visibility تکرار کند، آنها را یک بار، در تابع setVisibility() قرار می دهد. سپس کد ما، مستقیما آن تابع را در هنگام اجرا،  فراخوانی می کند و به طور غیر مستقیم نیز، وقتی که رویداد change اجرا شود، این تابع فراخوانی می شود.

راه حل 2 نیز از یک تابع عادی برای هردوی این موارد استفاده می کند. اما به جای اینکه به تابع مورد نظر یک نام بدهد تا بتواند مستقیما در زمان اجرا،  فراخوانی شود، این کد صرفا تابع مورد نظر را به صورت یک شنونده ی رویداد برای رویداد change تنظیم می کند و سپس با استفاده از متد trigger() آن رویداد را راه اندازی می کند-از این رو، تابع را به طور غیر مستقیم فراخوانی می کند. این روش ها، کم و زیاد، قابل تعویض هستند و  تا حد زیادی سلیقه ای است که شما ترجیح می دهید.

!Donate

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.


تصویر امنیتی
تصویر امنیتی جدید

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال