جایگزین‌های jQuery

کتابخانه jQuery سال‌ها به عنوان یک کتابخانه پرکاربرد و پرطرفدار جاوا اسکریپت بین توسعه دهندگان وب مطرح بوده است ولی دوره محبوبیت آن به تدریج رو به پایان است.در این پست ابتدا به معرفی jQuery می‌پردازیم و سپس دلایل محبوبیت این کتابخانه را در سال‌های ابتدایی توضیح می‌دهیم و در آخر اشاره‎ای خواهیم داشت به گزینه‎های جایگزین این کتابخانه محبوب.

کتابخانه jQuery چیست؟

یک کتابخانه متن باز کوچک، سریع و سبک وزن جاوا اسکریپت است که هدف اصلی آن ساده‌سازی نوشتن اسکریپت‌های سمت کلاینت در HTML می‌باشد. از قابلیت‌های بارز این کتابخانه محبوب می‌توان قابلیت اجرا برروی مرورگرهای مختلف، کنترل آسان و قدرتمند رویدادها (Events)، قابلیت تغییر در خصوصیات CSS، کار با Ajax، توسعه دادن پلاگین‌ها و غیره را نام برد.

محبوبیت آن در سال‌های ابتدایی

یک سال قبل از اینکه گوگل اولین نسخه مرورگر کروم را انتشار کند، وابستگی به jQuery در اواخر سال 2007 در Github به چشم آمد. در آن زمان:

• یک راه استاندارد برای query المان‌های DOM توسط CSS Selector وجود نداشت.
• یک راه استاندارد برای روح بخشیدن به استایل‌های ویژوال یک المان وجود نداشت.
• رابط XMLHttpRequest اینترنت اکسپلورر، مانند بسیاری از API‌های دیگر، بین مرورگرها ناسازگار بود.

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

جایگزین‌های jQuery

در مرورگرهای جدید و مدرن DOM API‌ها بسیار توانمند شده‌اند و در بین انواع و اقسام آن‌ها یکدست عمل می‌کنند. در ادامه به جایگزین‌های jQuery می‌پردازیم.

جاوا اسکریپت

اگر دلیل استفاده‌ از jQuery ایجاد ساده‌تر حلقه‌ها بر روی اشیاء جاوا اسکریپتی باشد (رفع کمبودهای جاوا اسکریپت)، از زمان IE 9 به بعد، متدهای forEach و Object.keys به صورت توکار در جاوا اسکریپت وجود دارند و یا اگر نیاز به inArray.$ داشته باشید، متد Array.prototype.indexOf مدت‌ها است که جزئی از ES5 است. در حقیقت جاوا اسکریپت بهترن گزینه برای jQuery هست چون هر مرورگری با آن سازگاری دارد و محدودیت‌های نسخه‌های jQuery در سازگاری با مرورگرها را برطرف می‌سازد.

نمونه کد:

12var element = document.getElementById(“media”);
element.classList.add(“my style”);

کتابخانه Cash

کتابخانه Cash یک پلاگین کوچک (10٪ از اندازه جی کوئری) است که از مرورگرهای +IE10 پشتیبانی می‌کند. سینتکس آن شبیه به jQuery است. ممکن است هر ویژگی‌ای که jQuery دارد را نداشته باشد، اما تقریبا هر ویژگی اساسی مهم را دارد.

نمونه کد:

12var element = $(“div”);
$(element).attr ( attrName, attrValue )

کتابخانه UmbrellaJS

کتابخانه UmbrellaJS تحت تاثیر jQuery قرار دارد و دارای ویژگی‌های اضافی می‌باشد و همچنین فایل آن نسبت به موبایل بسیار کوچک است. UmbrellaJS توسط مرورگرهای اصلی و +IE11 پشتیبانی می‌شود. در UmbrellaJS، شما بر خلاف jQuery می‌توانید از روش‌های native جاوا اسکریپت در Selectorهای Umbrella استفاده کنید.

نمونه کد:

123u(“button”).on(‘click’, function(){
alert(“Hello world”);
});

کتابخانه ChibiJS

این کتابخانه برای خلاص شدن از اندازه بزرگ jQuery توسعه داده شده است. ChibiJS فقط حدود 7 کیلوبایت است و تمام متدهای ضروری مورد استفاده را در بر دارد. در خصوص پشتیبانی از مرورگر، این کتابخانه تمام مرورگرهای مدرن و قدیمی را پشتیبانی می‌کند. این پلاگین انیمیشن را پشتیبانی نمی‌کند. این کتابخانه DOM را 20 تا 50 درصد سریعتر از بسیاری از کتابخانه‌های دیگر اجرا می‌کند.

نمونه کد:

1$(“p”).hide()

کتابخانه ZeptoJS

این کتابخانه را را می‌توان به عنوان کتابخانه جاوا اسکریپت ساده‌گرا با سازگاری بالا با jQuery در نظر گرفت. هدف این کتابخانه، رقابت با jQuery نیست، بلکه برای رسیدن به حداکثر API با ابعاد بسیار کمتر است. اندازه ZeptoJS فقط 5 تا 10 کیلوبایت است و بارگیری و اجرا بسیار سریعتر است. از تمام مرورگرهای اصلی و +IE10 پشتیبانی می‌کند.

نمونه کد:

1$.camelCase(‘hello-there’)

فریم‌ورک MooTools

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

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

نمونه کد:

12345$$(‘div.foo, div.bar’);
var myElement = new Element(‘div#bar.foo’);
myElement.addEvent(‘click’, function(){
alert(clicked!’);
});

فریم‌ورک ExtJS

مخفف Extended Javascript است. این یک محصول از Sencha است و بر اساس YahooUserInterface است. این اساسا یک زبان برنامه نویسی توسعه دسک تاپ است. ExtJS توسط تمام مرورگرها مانند IE6+، FF، Chrome، Safari، Opera و غیره پشتیبانی می‌شود. ExtJS بر اساس معماری MVC / MVVM است. همچنین یک مجموعه عالی از ویجت‌های قابل تنظیم با کارایی بالا را فراهم می‌کند.

نمونه کد:

12var el = Ext.get(“my-div”);
var el=Ext.Element.get(“my-div”);