اعلام تابع در جی کوئری و جاوااسکریپت

در این مقاله چند روش  عالی برای تعریف یک بلوک از تابع جی کوئری و جاوااسکریپت را بررسی می کنیم. انتخاب روشی برای اعلام یک تابع جاوااسکریپت می تواند برای مبتدیان گیج کننده باشد و چندین گزینه سینتکسی مختلف وجود دارد. هر کدام مزایا، معایب و کاربردهای مناسبی دارند که می توانند شما را جلب کنند.

1. توابع منظم جاوااسکریپت

اولین و واضح ترین راه برای اعلان تابع در جاوااسکریپت استفاده از اعلان تابع است. تابعی به نام multiply()، که دو پارامتر x و y را می گیرد. آنها را ضرب می کند و مقدار را برمی گرداند که می تواند با سینتکس زیر پیاده سازی شود:

function multiply(x,y) {
   return x * y;
}

console.log( multiply(2, 2) );
// output: 4

توابع تعریف شده به این روش (اعلام تابع) در بالای محدوده فعلی قرار می گیرند. console.log() را می توان قبل از تابع قرار داد و همچنان کار می کند.

2. عبارات تابع جاوااسکریپت

همان تابع را می توان به عنوان یک عبارت در جاوااسکریپت نوشت که به صراحت یک متغیر را تنظیم می کند. عملکرد بالا نمی رود، بنابراین فقط پس از تعریف می توان از آن استفاده کرد.

const multiply = function(x,y) {
  return x * y;
}

console.log( multiply(2, 2) );
// output: 4

3. تعاریف متد تحت اللفظی شی

توابع مانند هر نوع مقدار دیگری در جاوااسکریپت رفتار می شوند، بنابراین می توانید یکی را در یک شی دیگر تعریف کنید. مجدداً، این متد شی فقط پس از تعریف قابل فراخوانی است. مثلا:

const mathLib = {

   // property
   PI: 3.14,

   // multiply(x,y) method
   multiply: function(x, y) {
   return x * y;
},

   // divide(x,y) method
   divide: function(x, y) {
   return x / y;
}

}

console.log( mathLib.multiply(2, 2) );
// output: 4

4. توابع پیکان ES2015 (Arrow Functiob)

توابع پیکان در جاوا اسکریپت به کلمه کلیدی تابع نیاز ندارند. اما فقط می‌توانند به یک متغیر اختصاص داده شوند یا به‌طور ناشناس استفاده شوند (مانند بازخوانی یا کنترل‌کننده رویداد). پارامترهای محصور شده در براکت های گرد (( )) با یک فلش (=>) دنبال می شوند تا تابعی را در بلوک کد بعدی نشان دهند:

const multiply = (x, y) => { return x * y; };

console.log( multiply(2, 2) );
// output: 4

از آنجایی که ما فقط یک عبارت داریم، بازگشت به صورت ضمنی است و براکت ها را می توان برای عملکرد یکسان با سینتکس کوتاه تر حذف کرد:

const multiply = (x, y) => x * y;

در مواردی که تابع دارای یک پارامتر واحد است، آن براکت ها را نیز می توان حذف کرد:

const square = x => x ** 2;

اگرچه هنوز برای یک پارامتر به براکت نیاز است.

const estimatePI = () => 22 / 7;

توابع پیکان به طور خودکار این را به مقدار موجود در محدوده بیرونی فوری اختصاص می دهند، بنابراین نیازی به استفاده از .bind(this) نیست.

5. توابع پسوند jQuery

jQuery یک کتابخانه جاوااسکریپت است، بنابراین ایجاد توابع تقریباً یکسان است. با این حال، عملکرد jQuery را می توان با اضافه کردن روش های سفارشی خود گسترش داد. متد jQuery.fn.extend() شی نمونه اولیه jQuery ($.fn) را گسترش می دهد تا عملکرد جدید را به تابع اصلی jQuery() زنجیر کنیم.

به عنوان مثال، کد زیر روش‌های بررسی جدید را تعریف می‌کند و تیک روش‌های jQuery را برای اصلاح فیلدهای ورودی چک باکس بردارید:

jQuery.fn.extend({

   // check checkboxes
   check: function() {
      return this.each(function() {
         this.checked = true;
      });
   },

   // uncheck checkboxes
   uncheck: function() {
      return this.each(function() {
         this.checked = false;
      });
   }

});

// check all checkboxes on the page
$( "input[type='checkbox']" ).check();

سینتکس توابع اغلب یک موضوع ترجیحی شخصی است، اما سعی کنید مطمئن شوید که کد شما قابل خواندن باقی می ماند. شاید بهتر باشد همیشه از یک نوع دستور تابع در جاوااسکریپت استفاده کنید تا گیج نشوید.