زنجیره سازی تابع جاوا اسکریپت — به زبان ساده

۹۲ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۵ دقیقه
زنجیره سازی تابع جاوا اسکریپت — به زبان ساده

در این مقاله با مفهوم زنجیره سازی تابع جاوا اسکریپت به کمک JQuery آشنا می‌شویم و رفتار مشابهی را در تابع‌های ساده جاوا اسکریپت اجرا می‌کنیم. این مقاله به دو بخش زیر تقسیم یافته است:

  1. درک مفهوم زنجیره‌ سازی تابع جی کوئری
  2. ایجاد زنجیره‌سازی در تابع‌های سفارشی جاوا اسکریپت

زنجیره‌سازی تابع الگویی در جاوا اسکریپت است که با استفاده از آن می‌توان چندین تابع را به صورت پشت سر هم روی یک شیء فراخوانی کرد. بدین ترتیب با استفاده از ارجاع آن یک شیء می‌توانیم چندین تابع را اجرا کنیم. این کار موجب افزایش خوانایی کد و همچنین کاهش افزونگی کد می‌شود.

برای اجرای همه کارکردهای مرتبط با یک موجودیت به چندین تابع نیاز داریم. این تابع‌ها می‌توانند به روشی تعریف شوند که با هم دیگر زنجیره‌سازی شوند تا نتیجه مطلوب را ایجاد کنند.

درک زنجیره‌سازی تابع جی‌کوئری

ما در HTML با عناصر DOM سر و کار داریم. هر عنصر DOM چندین مشخصه و کارکرد مرتبط به خود دارد.

فرض کنید در یک عنصر منفرد DOM لازم است چندین دستکاری مانند به‌روزرسانی رنگ پس‌زمینه، به‌روزرسانی ارتفاع عنصر، عرض آن و همچنین رنگش اجرا شود.

 زنجیره‌سازی تابع

برای اجرای کارهای فوق باید چندین بار به آن عنصر DOM دسترسی پیدا کنیم و تابع‌های مرتبط را فرابخوانیم تا به‌روزرسانی شود. به مثال زیر که این مفهوم را بیشتر روشن می‌کند توجه کنید:

  1. در یک صفحه HTML آن div که id به نام myDiv دارد را انتخاب کنید.
  2. رنگ عنصر را به Red تغییر دهید.
  3. ارتفاع عنصر را به 100px به‌روزرسانی کنید.
  4. عرض عنصر انتخابی را به‌روزرسانی کنید.

این کار به طور معمول به روش زیر اجرا می‌شود:

1var selectedDiv = $("#myDiv");
2
3selectedDiv.css('color: red')
4selectedDiv.height('100px')
5selectedDiv.width('100px')

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

جی کوئری از زنجیره‌سازی تابع پشتیبانی می‌کند. کارکرد توصیف شده فوق می‌تواند به طور مؤثر از سوی معرفی مفهوم زنجیره‌سازی به دست آید. بدین ترتیب می‌توانیم چندین تابع را با یک ارجاع عنصر یکسان به هم زنجیر کنیم. در این حالت دیگر نیازی به ارجاع چندین‌باره عنصر برای هر فراخوانی تابع وجود ندارد.

1var selectedDiv = $("#myDiv");
2selectedDiv.css('color: red').height('100px').width('100px');

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

استفاده از ارجاع یکسان

هنگامی که تابع‌های جی کوئری را اجرا می‌کنیم، به صورت پیش‌فرض ارجاع شیء عنصر بازگشت می‌یابد که اجرای قبلی روی آن انجام یافته است. پس از اجرا، شیء اینک ارجاع یافته بازگشت می‌یابد و اجرای بعدی روی همان ارجاع عنصر اجرا می‌شود. برای روشن‌تر شدن موضوع به کد زیر توجه کنید:

1var mainDiv = $("#selectedDiv");
2
3var returnedDiv = mainDiv.css('color: red');
4
5// Here the Object returned from JQuery Function is same as "mainDiv"
6// Following would return true...
7console(mainDiv == returnedDiv)

کد فوق ابتدا روی عنصری که به وسیله Id به نام myDiv ارجاع یافته است اجرا می‌شود، زمانی که عملیاتی کوئری اول روی آن عنصر اجرا شد، آن عنصر از تابع css بازگشت می‌یابد. اگر بخواهیم دو متغیر mainDiv و returnedElement را با هم برابر قرار دهیم به ارجاع‌های یکسانی منجر می‌شوند.

جی کوئری به دلایل زیر توانایی دستیابی به این کارکرد را دارد:

  1. جی کوئری زمانی که تابع اجرا می‌شود، شیء یکسانی بازگشت می‌دهد.
  2. عناصر بازگشتی به عنوان ارجاعی برای اجرای بعدی استفاده می‌شوند.

دستیابی به زنجیره‌سازی در جاوا اسکریپت

این کارکرد را در جاوا اسکریپت از طریق بازگشت شیء جاری از تابع اجرایی می‌توانیم به دست آوریم.

زمانی که تابع روی یک شیء اجرا می‌شود، آن شیء در انتهای اجرا بازگشت می‌یابد و از این رو تابع‌های دیگر آن شیء می‌توانند روی همان فراخوانی شوند.

زنجیره سازی تابع

چارچوب اجرایی جاری یا شیء اجرایی جاری می‌تواند از تابع قبلی بازگشت یابد و به عنوان یک چارچوب یا ارجاع شیء برای تابع بعدی استفاده شود. از آنجا که چارچوب یکسان است، می‌توانیم به کارکردهای دیگر روی شیء از مقدار بازگشتی تابع دسترسی داشته باشیم.

به الزامات و پیاده‌سازی زنجیره‌سازی زیر توجه کنید:

  1. یک متغیر به نام Obj شامل یک متغیر دیگر به نام output ایجاد کنید.
  2. یک تابع برای افزودن دو متغیر نوشته و آن را به output انتساب دهید.
  3. Output را در 10 ضرب کنید.
  4. 20 را از آن کم کرده و نتیجه را نمایش دهید.
  5. هر عملیات ریاضیاتی تابع مجزایی از شیء است.
1var Obj = {
2
3  result: 0,
4
5  addNumber(a, b) { this.result = a + b; }
6
7};
8
9Obj.addNumber(10, 20);
10
11console.log(Obj.result);

شیء فوق شامل یک تابع ریاضیاتی منفرد برای جمع کردن دو عدد است. ما باید کارکرد را مانند جی کوئری بیشتر بسط بدهیم تا بتوانیم چند تابع را به هم زنجیره‌سازی کنیم. زمانی که تابع addNumber اجرا شد، می‌خواهیم کارکرد multiplyNumber را به روش زیر به آن زنجیر کنیم:

1// Our requirement is to chain the "multiplyNumber" function with "addNumber"
2Obj.addNumber(10, 20).multiplyNumber(10);

ارجاع شیء جاری

کارکرد فوق می‌تواند با استفاده از کاری مانند آنچه جی کوئری انجام می‌دهد به دست آید. همچنین باید ارجاع شیء جاری را نیز که تابع اینک روی آن اجرا می‌شود، بازگشت دهیم و از همان ارجاع برای اجرای تابع‌های دیگر موجود در آن استفاده کنیم.

در جاوا اسکریپت کلیدواژه this به «چارچوب اجرایی جاری» (Current Executing Context) اشاره می‌کند، به طور خلاصه به شیئی اشاره می‌کند که تابع روی آن اجرا می‌شود. در ادامه از این this برای زنجیره‌سازی تابع استفاده می‌کنیم.

اینک ارجاع شیء جاری را از تابع addNumber بازگشت می‌دهیم:

1var Obj = {
2  result: 0,
3  addNumber: function(a, b) {
4    this.result = a + b; 
5    return this;
6  },
7
8  multiplyNumber: function(a) {
9    this.result = this.result * a;
10    return this;
11  } 
12};
13
14Obj.addNumber(10, 20).multiplyNumber(10)
15console.log(Obj.result)

در کد فوق تابع addNumber، چارچوب اجرایی جاری را از فراخوانی تابع بازگشت می‌دهد. سپس تابع بعدی روی این چارچوب اجرا می‌شود و دیگر توابع مرتبط با آن شیء را اجرا می‌کند. کد را می‌توان به صورت زیر خلاصه کرد:

  1. addNumber روی شیء obj عمل می‌کند: ازآنجا که تابع روی شیء obj عمل می‌کند، ارجاع جاری addNumber به تابع addNumber اشاره می‌کند.
  2. پس از افزودن 2 عدد، this بازگشت می‌یابد: تابع کلیدواژه this را بازگشت می‌دهد که به شیء اجرایی جاری Obj اشاره می‌کند. زمانی که this را بازگشت می دهیم، در واقع شیء اجرایی را از تابع بازگشت می‌دهیم.
  3. مقدار بازگشتی برای اجرای تابع multiplyNumber استفاده می‌شود: از آنجا که تابع addNumber نماینده شیء جاری Obj است، این مقدار بازگشتی شامل تابع‌های دیگری که به آن اضافه شده‌اند نیز هست. سپس تابع دوم را روی آن شیء اجرا می‌کنیم و می‌توانیم آن‌ها را به هم اتصال دهیم. بدین ترتیب اینک به زنجیره‌سازی تابع دست یافته‌ایم.

در ادامه کارکرد مورد نظر را تکمیل می‌کنیم:

1var Obj = {
2  result: 0,
3  addNumber: function(a, b) {
4    this.result = a + b;
5    return this;
6  },
7
8  multiplyNumber: function(a) {
9    this.result = this.result * a;
10    return this;
11  },
12 
13  divideNumber: function(a) {
14    this.result = this.result / a;
15    return this;
16  }
17}
18
19Obj.addNumber(10, 20).multiplyNumber(10).divideNumber(10);

سخن پایانی

هر تابع در زنجیره تابع، چارچوب اجرایی جاری یا شیء اجرایی جاری را بازگشت می‌دهد و بدین ترتیب تابع‌ها می‌توانند به هم اتصال یابند، زیرا اجرای قبلی نتیجه‌ای بازگشت می‌دهد که می‌تواند برای موارد بعدی مورد استفاده قرار گیرد.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
swlh
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *