مقایسه jQuery و MooTools
۳۱ تير ۱۳۸۸ ساعت ۰۹:۵۶

طراحی وب

بررسی فنی تفاوت این دو فریم ورک

برای استفاده از جاوااسکریپت توی سایت، معمولا jQuery و MooTools گزینه های قابل تأمل تری هستند و اغلــــب ایــن ســــوال پیـــش میــاد که کــــدوم رو باید انتخــــاب کرد؟ چــند روز پیـــش به ســـایـــت jQuery vs MooTools.com برخوردم. یکی از توسعه دهندگان MooTools، یه مقاله بلند بالا، در همین باره در این سایت قرار داده. من هم از اونجاییکه چند وقت بود تو فکر نوشتن همچین مطلبی بودم، تصمیم گرفتم که این مقاله رو ترجمه کنم. این کار رو انجام دادم و صفحه فارسی رو برای نویسنده اش ارسال کردم و اون هم تو سایت قرار داد. به آدرس زیر:

« jQuery vs MooTools .com / index_fa.html »

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

اگر حوصله خوندن اون مقاله رو نداری یا میخوای نظرات خیلی خیلی خیلی مفید من رو هم در این باره بدونی، ادامه مطلب رو بخون...

توضیح: اول یه توضیح کوتاه درباره مفهوم فریم ورک (Framework) بدم برای کساییکه احتمالا با این واژه آشنایی ندارند. فریم ورک مجموعه ای از توابع و کدهایی هست که برای سهولت انجام کاری خاص طراحی میشه. مثلا همین jQuery، یه تابع معرفی کرده برای نمایش مطالب بصورت اسلاید. تمام کاری که ما باید بکنیم، استفاده از این تابع است. در حالیکه نوشتن چنین تابعی، به اطلاعات تجربه زیادی نیاز داره ولی استفاده اش نه! خلاصه فریم ورک، کار رو آسونتر می کنه.

jQuery : اگر جاوااسکریپت بلد نیستی، یا کم بلدی، یا حوصله کد نویسی نداری ولی میخوایی افکتهای قشنگ جاوااسکریپت رو توی سایتت داشته باشی، این بهترین گزینه است. پیشنهاد می کنم معطل نکنی و بری تو بخش آموزش سایتش . تو کمتر از سه ساعت، زندگی تحت وبت تغییر می کنه. از اینکه توی مدت به این کمی، چیزایی یاد گرفتی که همیشه فکر می کردی مال از ما بهترونه، ذوق می کنی. باور کن. همین امروز و الان برو سراغ سایتش. ولی صبرکن! این مقاله رو تا آخر بخون بعد برو. بعدشم اون پایینو میبینی نوشته "تو چی فکر می کنی" ؟ اونو واسه خودم ننوشتم! نظرت رو بگو، قول میدم از اینکه دو خط کامنت تایپ میکنی نوک انگشتات خسته نشه....

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

MooTools : این فریم ورک گسترده تر از بالاییه. متدهای خیلی زیادی برای خود جاوااسکریپت داره و نه صرفا برای DOM. تقریبا همه قابلیتهایی که jQuery داره، اینم داره به اضافه امکانات خیلی بیشتری برای کدنویسی جاوااسکریپت. این فریم ورک امکان تعریف کردن شیء و متد رو به سادگی میده. یعنی می تونی برای شیء Array متد بسازی و استفاده کنی یا برای اشیاء دیگه جاوااسکریپت. خواص ارث بری جاوااسکریپت رو به نوعی اصلاح کرده که شما با کلاسهای MooTools کارهای خیلی بیشتری می تونی بکنی.
بزرگترین عیبش در مقابل بالایی، دشوارتر بودنشه. همونجوری که گفتم، توی سه ساعت، حتی بدون زمینه قبلی، میشه jQuery رو یاد گرفت (اصولش رو) ولی برای MooTools اینطور نیست.

من چند وقت پیش کار کردن با MooTools رو شروع کردم و اصلا به اون سختی که توی مقاله تاکید شده، نبود ولی سادگی jQuery یه ویژگی خاصه.

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

نسخه‌های جدید MooTools در مرورگرهای غیر از اینترنت اکسپلورر، یه امکانی دارند که jQuery نداره (تا این تاریخ). اون اینه که Elementها در jQuery از نوع Object هستند در حالیکه Elementها در MooTools از در واقع Elementهای توسعه یافته جاوااسکریپت هستند. به مثال زیر دقت کن. میخوایم شفافیت لینک زیر رو تغییر بدیم و آدرسش رو هم Alert کنیم:

<a id="boploLink" href="http://boplo.ir">Boplo.ir</a>

// Javascript
var jsLink = document.getElementById('boploLink');
jsLink.style.opacity = 0.5; // Works unless IE7-
alert( jsLink.href ); // alerts: http://boplo.ir

// jQuery
var jqLink = $('#boploLink');
jqLink.css('opacity', 0.5); // Works well
alert( jqLink.attr('href') ); // alerts: http://boplo.ir

// MooTools
var mooLink = $('boploLink');
mooLink.setStyle('opacity', 0.5); // Works well
alert( mooLink.get('href') ); // alerts: http://boplo.ir

و حالا چگونگی ارتباط این فریم ورکها با Elementهای DOM:

var jsLink = document.getElementById('boploLink');

// jQuery
jsLink.css('opacity', 0.5);
// Uncaught TypeError: Object has no method 'css'
alert( jsLink.href ); // alerts: undefined

// MooTools
jsLink.setStyle('opacity', 0.5); // Works well
alert( jsLink.get('href') ); // alerts: http://boplo.ir
alert( jsLink.href ); // alerts: http://boplo.ir

همونطوری که مشاهده می کنی، همه خصوصیات Element جاوااسکریپت در MooTools قابل دسترسه و این به نظر من خیلی فوق العاده است.
البته jQuery از نسخه 1.3 مشخصه ای به نام context داره که Element مورد نظر در DOM رو میده:

alert( $('#boploLink').context.href ); // alerts: http://boplo.ir

در آخر بحث مقایسه، این جمله کلیدی، خیلی از مفاهیم رو بیان می کنه:

بخش اعظمی از تفاوتها، به درک مفهوم فریم ورک و ابزار (Toolkit) مربوط میشه. به این صورت که، jQuery یک ابزاره و MooTools یک فریم ورک.

و دیگر هیچ!

 

---

پی نوشت اول: اگر پایه یادگرفتنش یکیشون شدی، خودت رو اسیر بخش آموزش سایتشون نکن چون کل آموزششون بصورت فایل CHM با حجم کم تو اینترنت هست که اگر سرچ کنی، پیدا می کنی.
پی نوشت دوم: نظر بنده به MooTools نزدیکتر است...

•  
•  
•  
•  
•  
•  
•  

امیرحسینم. اسمم رو دوست دارم، خودم رو دوست دارم. تهران زندگی می کنم. فارغ التحصیل مهندسی صنایع هستم. برنامه‌نویسی و طراحی وب می کنم. در واقع Web Developer محسوب میشم. برنامه نویسی و وقت گذرونی با وب تنها کاریه که خسته ام نمی کنه.
آدم خیلی سردی هستم، اینو دور و وری هام میگن. ولی به نظر خودم سرد نیستم در واقع گرمای خودم رو کم بروز می دم! آدما رو اغلب دوست دارم غیر از اون مواقعی که اونا من رو نادیده میگیرن!

این سایت رو بعد از کلی اینور اونور دوباره راه انداختم تا هرچی دوست دارم توش بنویسم، چه کسی بخونه چه نخونه.
خلاصه اینجا خونه منه،

به خونه امیرحسین خوش اومدی...