بررسی و مقایسه این دو فریم ورک
دو بخش جدید به این بلاگ اضافه شده: آموزشهای MooTools و آموزشهای jQuery.
می خوام کم کم شروع کنم و برای هر دوشون آموزش و مطلب بنویسم. تمام سعی ام اینه که مطالب بروز باشه. همینطور تلاشم اینه که آموزشها با هم جلو بره یعنی اگر مطلبی برای MooTools میذارم، عینش رو برای jQuery هم تهیه کنم.
برای این مورد آخر یک بخش دیگه هم ایجاد کردم به نام MooQuery (این کلمه رو از تلفیق MooTools و jQuery ساختم) که حاوی معرفی مقالات یکسان برای هر دو فریم ورکه. مثل همین پست.
برای شروع دو تا مقاله زیر رو نوشتم تا یه معرفی و شمای کلی از این فریم ورک ها داشته باشیم:
موفق باشید
برچسب ها: jquery,mooquery,mootools,آموزش
توابع Delegation در فریم ورکهای MooTools و jQuery
همونطور که مستحضریم، جاوااسکریپت امکان تعیین Event رو به هر Element از صفحه میده که مثلا اگر فلان Element کلیک شد این اتفاقا بیافته و اگر یکی دیگه mouseover شد اون یکی اتفاقا بیفته و غیره.
تعیین این Eventها از طریق Frameworkها مثل MooTools و jQuery عجیب آدم رو یاد هلو میندازه. مخصوصا که امکان تعریف Evnet های اختصاصی رو هم میدن مثل OnLoveBoplo، OnVisitBoplo و غیره.
این فریم ورکها، امکانی برای اجرای کد در زمان تکمیل DOM رو دارند که در MooTools رویداد domReady و در jQuery متد ()ready. که به ما امکان قرار دادن کدها رو در <head> صفحه میدن و خیلی کاربرد دارند.
مثل کدهای زیر که وقتی هر لینکی کلیک شد، یه alert ناقابل نمایش میده:
// MooTools
window.addEvent('domready', function(){
$$('a').addEvent('click', function() {
alert("You've clicked " + this.href + "!");
});
});
// jQuery
$(document).ready(function(){
$('a').click(function() {
alert("You've clicked " + $(this).attr('href') + "!");
});
});
همونطور که گفتم این کد در زمان تکمیل DOM یکبار انجام میشه و Eventها رو تنظیم می کنه. همه چی آرومه و من خیلی خوشحالم تا اینکه یه جایی یک لینک توسط جاوااسکریپت ساخته میشه یا توسط Ajax به صفحه اضافه میشه و کاملا منطقی خواهد بود که چون موقع اجرای کدهای بالا اون لینک وجود نداشته، Eventاش هم Set نشده و کدهاش هم اجرا نخواهد شد. برای حل این مشکل سه راه وجود داره ....
برای اینکه بفهمی Delegation چیه، چرا خوبه و چطور عمل می کنه، ادامه مطلب رو بخون....
برچسب ها: javascript,jquery,mootools,solution
پلاگین و ترفند جالب جاواسکریپت
یه زمانی جاوااسکریپت منفورترین قابلیت تحت وب بود ولی بعد از پیدایش MooTools و jQuery و Prototype و غیره، به یه بخش مهم سایتهای حرفه ای تبدیل شده. از اون مهمتر اینکه باعث تحریک ذهنهای خلاق و طراحهای خوش ذوق شده.
Lazy Load یکی از این خلاقیتهاست. Lazy Load یه روش جالب برای لود تصاویر در صفحه های بلنده. مثلا سایت SmashingMagazine عزیز پست داره با این عنوان: "80 قالب زیبا برای وردپرس" این یعنی این مقاله قراره 80 تا عکس داشته باشه و از اونجاییکه این سایت یک سایت حسابیه و مخاطبینش هم سرعت اینترنت حسابی دارند (البته غیر من)، با خیال راحت کلی عکس با کیفیت میریزه تو صفحه. اما با وجود سرعت بالا هم لود همزمان این تعداد عکس ناجوره.
اینجاست که تکنیک Lazy Load مثل هوخشتره میاد و راهکار ارائه میده. این تکنیک به این صورته که هیچ عکسی لود نمیشه مگر اینکه توی منطقه قابل دید مانیتور یا Viewport کاربر باشه. این یعنی وقتی صفحه لود میشه، عکسها لود نمیشن و وقتی اسکرول می کنیم روی یک عکس، همون موقع شروع به بالا اومدن می کنه! انگار داریم همون عکسی که میبینیم رو باز می کنیم! اینجوری من با خیال راحت مقاله گنده SmashingMagazine عزیز که LazyLoad نصب کرده رو باز می کنم با این نظر که تا موقعی که پایین صفحه نرم اون عکس پایینی ها لود نمیشن و سرعتم کند نمیشه.
هم jQuery و هم MooTools این پلاگین رو دارند که پلاگین MooTools اش رو آقای David Walsh خیلی عزیز نوشته.
یه نکته دیگه اینکه این دو تا پلاگین با اینکه یه کار می کنند ولی یه تفاوت کوچیک دارند و اون اینه پلاگین jQuery وقتی لود تصویر رو شروع می کنه که عکس در Viewport قرار بگیره یا توی کادر مرورگر قابل رویت باشه ولی پلاگین MooTools یکم قبل از رسیدن اسکرول صفحه به محل تصویر عملیات لود رو شروع می کنه که به نظر من بهتره.
شنگول باشید
برچسب ها: framework,javascript,jquery,mootools
بررسی فنی تفاوت این دو فریم ورک
برای استفاده از جاوااسکریپت توی سایت، معمولا jQuery و MooTools گزینه های قابل تأمل تری هستند و اغلــــب ایــن ســــوال پیـــش میــاد که کــــدوم رو باید انتخــــاب کرد؟ چــند روز پیـــش به ســـایـــت jQuery vs MooTools.com برخوردم. یکی از توسعه دهندگان MooTools، یه مقاله بلند بالا، در همین باره در این سایت قرار داده. من هم از اونجاییکه چند وقت بود تو فکر نوشتن همچین مطلبی بودم، تصمیم گرفتم که این مقاله رو ترجمه کنم. این کار رو انجام دادم و صفحه فارسی رو برای نویسنده اش ارسال کردم و اون هم تو سایت قرار داد. به آدرس زیر:
« jQuery vs MooTools .com / index_fa.html »
خیلی سعی کردم که ترجمه حتی الامکان کامل و رسا باشه و هرکسی با هر سطح فنی، بتونه ازش استفاده کنه. در کل مقاله برای کسانی که چیزی از جاوااسکریپت نمی دونن هم تا حدی مفیده.
اگر حوصله خوندن اون مقاله رو نداری یا میخوای نظرات خیلی خیلی خیلی مفید من رو هم در این باره بدونی، ادامه مطلب رو بخون ....
برچسب ها: framework,javascript,jquery,mootools
< قبلیبعدی >
Google Chrome
Smashing Magazine
CSS-Tricks
امیرحسینم. اسمم رو دوست دارم، خودم رو دوست دارم. تهران زندگی می کنم. دانشجوی رشته صنایع هستم شغل درست و حسابی ندارم. طراحی وب می کنم ولی همه اش واسه سرگرمی بوده. برنامه نویس PHP هستم. برنامه نویسی و وقت گذرونی با کامپیوتر تنها کاریه که خسته ام نمی کنه.