مسئله

فرض کنید که یک تابع مفید را در دیگر کتابخانه های جاوا اسکرپیت پیدا کرده ایم و می خواهیم از این تکنیک در کدهای جی کوئری خود استفاده کنیم. در این مورد، متد  .radioClass()  وجود دارد که متعلق به کتابخانه ی Ext Core است که یک کلاس(class) را به یک یا چند عنصر مورد تطابق قرار گرفته اضافه می کند و همین کلاس مشابه را از تمام عناصر هم نیای(خواهر و برادر) عنصر مورد تطابق قرار گرفته حذف می کند.

نکته: کلمه ی .radioClass() از رفتار دکمه های رادیویی(radio buttons) در اپلیکیشن های وب و دسکتاپ نشئت گرفته است، زیرا کلیک کردن بر روی یک دکمه،باعث می شود که دیگر دکمه هایی که در گروه دکمه ی رادیویی(radio button group) مشابهی قرار دارند،  از حالت انتخاب بیرون بیایند. کلمه ی دکمه ی رادیویی(radio button) برای عناصر input، از دکمه های رادیوهای درون ماشین های قدیمی نشئت گرفته است. آن دکمه هایی که وقتی یکی از آنها را فشار می دهیم، بقیه ی دکمه ها بسته می شوند.

فرض کنید کدهای HTML زیر را داشته باشیم:

<div>
<div id="one" class="hilite">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>

 اکنون فرض کنید بخواهیم دستورات زیر را اجرا کنیم:

// و div#three به hilite اضافه کردن کلاس
// حذف این کلاس از تمام دیگر عناصر هم نیا یا خواهر و برادر آن
// (e.g. div#one)
$('#three').radioClass('hilite');

 حتی ممکن است بخواهیم چند دکمه ی رادیویی را انتخاب کنیم و کلاس را به آنها اضافه کنیم:

// div#two به hilite اضافه کردن کلاس
// div#three و div#one و حذف این کلاس از دیگر عناصر هم نیا مثل div#four و
$('#two,#four').radioClass('hilite');

راه حل

برای اضافه کردن متد .radioClass() به جی کوئری، کافی است یک پلاگین ساده را به کدها اضافه کنید:

//کلاس مشخص شده را از تمام هم نیاهای عنصر یا عناصر انتخاب شده حذف کنید
// سپس آن کلاس را به عنصر یا عناصر انتخاب شده اضافه کنید
// زیرا انجام این کار به آن شیوه به ما امکان می دهد تا چندین عنصر هم نیا
//انتخاب شوند

jQuery.fn.radioClass = function( cls ) {
  return this.siblings().removeClass(cls).end().addClass(cls);
};

 این یک تابع کوتاه کافی است اما در داخل یک خط، فهم آن کمی مشکل به نظر می رسد، اما با ایجاد تو رفتگی در کدها، همان طور که در بخش 5.4 (Recipe 5.4)توضیح دادیم، کاملا باعث می شود که بفهمیم چگونه کار می کند:

jQuery.fn.radioClass = function( cls ) {
   return this  // رشته ی اولیه که نتایج خود را برمی گرداند
        .siblings() // تمام عناصر هم نیای عناصر انتخاب شده را انتخاب می کند
           .removeClass(cls) // حذف کلاس از آن عناصر هم نیا
        .end() // عقب رفتن به سمت انتخاب اصلی
        .addClass(cls);  // اضافه کردن کلاس به عناصر انتخاب شده
};

توضیحات

گزارش شده است که ایگور استراوینسکیِ آهنگساز گفته است:  آهنگسازان خوب قرض می گیرند. آهنگسازان بزرگ می دزدند. او ظاهراً نقل قول را از T.S. الیوت گرفته است که نوشته است: شاعران نابالغ تقلید می کنند; شاعران بالغ دزدی می کنند.

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

نکته: برای اطلاعات بیشتر در مورد کدهای متن باز و نرم افزارهای رایگان، می توانید به سایت های زیر سر بزنید:

https://opensource.org/

https://www.fsf.org/

 در این مورد خاص، ممکن است ما به کدهای واقعی که پیاده سازی آنها بسیار ساده است نیازی نداشته باشیم، زیرا پیاده سازی آنها بسیار ساده است . و تنها دانستن اینکه یک متد کلاس رادیویی(radio class) داریم ، کافی است.  در مواقعی که ضروری نیست، می توانیم فرض کنیم که منبع مورد نظر ایده ی ما  داده شده است.  خواه ایده ی ما از جای دیگری بیاید یا در ذهن خود ما شکل بگیرد، در تعداد زیادی از موارد، ما می توانیم یک پلاگین کاربردی جی کوئری  را در یک یا چند خط کد، بنویسیم.

 jQuery.fn چیست و چرا پلاگین های جی کوئری از آن استفاده می کنند؟

عبارت jQuery.fn یک ارجاع به آبجکت jQuery.prototype است. وقتی که ما یک تابع را به آبجکت jQuery.fn اضافه کنیم،در حقیقت آن را به jQuery.prototype اضافه کرده ایم. وقتی که داریم یک آبجکت را با jQuery() یا $() ایجاد می کنیم، در حقیقت داریم دستور new jQuery() را فراخوانی می کنیم(کد jQuery به طور اتوماتیک دستور new را برای ما انجام می دهد).

مانند دیگر سازنده های(constructor) جاوا اسکریپت، دستور jQuery.prototype متدها و پروپرتی های(properties) پیش فرضی را برای آبجکت هایی که توسط دستور new jQuery() برگردانده شده اند(return شده اند) ارائه می دهد.  بنابراین وقتی که ما یک پلاگین با دستور jQuery.fn می نویسیم، از برنامه نویسی  شیء گرای جاوا اسکریپت، برای اضافه کردن یک متد،به یک آبجکت، با استفاده از دستور prototype ، که به سازنده(constructor) تعلق دارد، استفاده می کنیم.

 اما چرا دستور jQuery.fn را به کار می بریم؟ چرا مانند دیگر کدهای شیء گرای جاوا اسکریپت، تنها از jQuery.prototype  استفاده نمی کنیم؟ این کار تنها برای خلاصه سازی نمی باشد.

اولین نسخه ی جی کوئری(خیلی قبل از 1.0) برای ارائه ی متدها به یک آبجکت jQuery ، از prototype جاوا اسکریپت استفاده نمی کرد، بلکه بر روی آبجکت  jQuery حلقه می زد و ارجاع به پروپرتی و متدهایی که در درون دستور jQuery.fn (که بعدا fn.$ نامیده شد) قرار دارند را در این آبجکت کپی می کرد.

چونکه صدها متد وجود دارد و این کار، هر موقع که ما دستور $() را فراخوانی می کنیم، انجام می شود، این کار نسبتا کند انجام می شود. بنابراین کد مورد نظر طوری  تغییر داده شده است تا از یک prototype جاوا اسکریپت، برای از بین بردن تمام کپی ها استفاده شود.

 برای اجتناب از شکستن پلاگین هایی که قبلا از $.fn  استفاده می کردند، از نام مستعار $.prototype استفاده می شود:

$.fn = $.prototype;

 بنابراین، علت اینکه امروزه هنوز دستور jQuery.fn وجود دارد، همین است: زیرا پلاگین هایی که در اوایل سال 2006 ایجاد شده بودند از $.fn استفاده می کرده اند.

• بعدی
• قبلی