Google Chrome
Smashing Magazine
CSS-Tricks
MooTools چیست؟
25 اسفند 1388 ساعت 01:52
موتولز
آنچه خوبان همه دارند، تو بیشترشون رو داری!
MooTools یک فریم ورک برای زبان جاوااسکریپته. کاربرها بخاطر APIهای خوب و پلاگینهاش سراغش میان ولی در واقع این فریم ورک بیشتر از این صحبتها میتونه مفید باشه.
MooTools توابع مفیدی برای کار با DOM داره، توابعی برای انیمیشن سازی و افکتهای متفاوت فراهم کرده. Ajax رو بصورت ساده و استاندارد درآورده و این به همراه توابعی برای اشیاء کاربردی جاوااسکریپت مثل String و Array و Function و غیره است. همه اینها البته بصورت Cross Browser! توی همه مرورگرها نتیجه یکسان داره.
خلاصه MooTools کار با جاوااسکریپت رو خیلی ساده می کنه. وقتی مثلا میخوایم برای یک سیستم نسبتا بزرگ جاوااسکریپت تعریف کنیم که به کدهای زیادی نیاز داره، MooTools واقعا ارزشمنده و کمک می کنه. زمانیکه توابع و کارکرد این فریم روک رو بشناسیم، خیلی خیلی کم پیش میاد که برای کاری مجبور بشیم از توابع و مشخصه های عادی جاوااسکریپت استفاده کنیم. تقریبا همیشه MooTools کافیه. البته نباید فراموش کرد برای کار با موتولز، بلد بودن اصول زبان جاوااسکریپت اهمیت داره چون همونجور که گفتم، این فریم ورک برای برنامه نویسی جاوااسکریپته.
از ویژگیهای این فریم ورک، ساختن ساده Extension های انعطاف پذیره. MooTools امکانی داره که میشه باهاش شیء رو مشابه زبانهای معروفی مثل PHP و Java ایجاد کرد یعنی توسط کلاس. این اشیاء قابلیتهای Extend و Implement و construct__ و امکان نمونه گیری و توسعه دارند.
طریقه نصب کاملا شبیه بقیه فریم ورکهاست به این ترتیب که آخرین نسخه MooTools رو از بخش دریافت MooTools میگیریم. یک فایل txt است که با تغییر فرمتش به js، توسط تگ <SCRIPT> به بخش <HEAD> صفحه اضافه می کنیم و کدهای شخصی خودمون رو هم توسط یک <SCRIPT> دیگه، بعد از <SCRIPT> قبلی در صفحه قرار میدیم:
<!DOCTYPE html> <html> <head> ... <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> // Our MooTools codes here </script> ... </head> ... </html>یه نکته ای وجود داره بعضی جاها میگن MooTools رو بجای <HEAD>، در آخر <BODY> بذاریم. می دونی که اون فایل mootools حدود 70 کیلوبایته و وقتی در <HEAD> قرار بگیره تا کامل لود و پردازش نشه، ادامه صفحه و <BODY> نمایش داده نمیشه و برای سرعتهای پایین، مدت زمانی وجود داره که باید صفحه سفید تماشا کنند اما وقتی این فایل در آخر <BODY> بذاریم، صفحه مسلما زودتر ظاهر میشه. اما این روش استاندارد و همیشه خوبی نیست. چون اولا یه استانداردی میگه همه تگهای <SCRIPT> باید در <HEAD> قرار بگیرند و دوما اینکه تصور کن ما کدهایی رو در جی کوئری نوشتیم که قراره با شروع صفحه دیده بشن و صفحه طولانی باشه اونوقت کاربر باید منتظر بمونه تا همه صفحه کامل لود شه و بعد بتونه افکتها و امکانات جی کوئری رو استفاده کنه که اصلا جالب نیست. در کل این بستگی به ساختار صفحه و سایت داره که کدوم روش براش بهتره.
اشیاء اصلی MooTools به ترتیب زیر هستند:
Core: توابع کاربردی که همگی با $ شروع می شوند و Global هستند. مانند type$ که نوع پارامتر رو میده یا merge$ که Objectها رو با هم ترکیب می کنه و غیره.
var firstObj = {
'name': 'John',
'lastName': 'Doe'
};
var secondObj = {
'lastName': 'Dorian'
};
$extend(firstObj, secondObj);
//firstObj is now: { 'name': 'John', 'lastName': 'Dorian' };
Browser: یک Object شامل اطلاعاتی برای تشخیص نوع و ویژگیهای مرورگر. برای مثال true بودن Browser.Platform.win به منزله اینه که کاربر داره از ویندوز استفاده می کنه یا Browser.Engine.trident5 نشاندهنده اینه که کاربر داره سایت رو با Internet Explorer7 میبینه و غیره.
if(Browser.Engine.presto950)
alert('You are using Opera 9.5');
Array: توسعه شیء Array در جاوااسکریپت. با توابعی مثل each بجای حلقه For یا contains برای چک کردن وجود یک مقدار خاص در آرایه و غیره.
['apple', 'banana', 'lemon'].each(function(item, index){
alert(index + " = " + item);
}); //Alerts "0 = apple", "1 = banana", "2 = lemon"
Function: توسعه شیء Function. با توابعی مثل attemp برای اجرای یک تابع یا bind برای تغییر scope در تابع (که خیلی کاربردیه) و غیره.
var myFunc = function() {
alert(this);
}
myFunc(); // Alerts [object DOMWindow]
var myFuncBind = myFunc.bind('hello');
myFuncBind(); // Alerts hello
Number: توسعه شیء Number با توابعی مثل toFloat و toInt که برای Number و String کار می کنه و غیره.
(12.45).round() //Returns: 12 (12.45).round(1) //Returns: 12.5 (12.45).round(-1) //Returns: 10
String: توسعه شیء String شامل توابعی مثل trim و contains برای جستجو در رشته یا hexToRgb و غیره.
"#112233".hexToRgb(); //returns "rgb(17,34,51)" "I-like-cookies".camelCase(); //returns "ILikeCookies" " i like cookies \n\n".clean(); //returns "i like cookies"
Hash: توسعه شیء Object در جاوااسکریپت. شیء Object به خودی خود قابل توسعه نیست. Hash روی Object های نرمال اعمال میشه و شیء جدیدی میسازه که قابل توسعه است. توابعی هم داره set و get برای تعیین و گرفتن مقدار از Hash یا extend برای اضافه کردن مقدار به شیء و غیره.
var hash = new Hash({
first: "Sunday",
second: "Monday",
third: "Tuesday"
});
hash.each(function(value, key){
alert("the " + key + " day of the week is " + value);
});
//Alerts "the first day of the week is Sunday",
// "the second day of the week is Monday", etc.
var hash = new Hash({'a': 'one', 'b': 'two', 'c': 'three'});
hash.has('a'); //returns true
hash.has('d'); //returns false
var myHash = new Hash({apple: "red", lemon: "yellow"});
myHash.toQueryString(); //returns "apple=red&lemon=yellow"
var timesTwo = new Hash({a: 1, b: 2, c: 3}).map(function(item, index){
return item * 2;
});// timesTwo now holds an object containing:{a: 2, b: 4, c: 6};
Event: توسعه شیء Event با امکاناتی برای کنترل رویدادها در MooTools. این توسعه شامل نمونه استاندارد event و دکمه های کیبورده.
$(document.body).addEvent('click', function(event){
var target = $(event.target);//Cross Browser target element
alert(target.get('tag'));//Alerts tag name of clicked element
});
$('myLink').addEvent('keydown', function(event){
alert(event.key);//Returns the lowercase letter pressed
alert(event.shift); //Returns true if the key pressed is shift
if (event.key == 's' && event.control)
alert('Page saved.');//Executes if the user hits Ctr+S
});
در موتولز میشه رویدادهای اختصاصی ساخت و توسط توابع خودش اجرا کرد مثل onClickDiv یا هر چیز دیگه ای. در بخش آموزش Event ها بیشتر توضیح میدم (انشاءالله). همچنین موتولز رویدادی اختصاصی برای شیء window داره به نام domready. این رویداد خیلی مهم موقع تکمیل ساختار DOM در صفحه فراخوانی میشه. با قرار دادن کدهامون در این رویداد مطمئن میشیم که کدها درست بعد از ایجاد شدن همه Nodeها اجرا میشن.
window.addEvent('domready', function() {
alert('DOM is ready!');
});
Class: شیءای برای تعریف توسعه از اشیاء موجود. این اصلی ترین بخش MooTools می تونه باشه که قابلیتهای توسعه و ارث بری رو توش ایجاد کرد. نمونه یک کلاس رو در زیر میشه مشاهده کرد:
var Cat = new Class({
initialize: function(name){
this.name = name;
}
});
var myCat = new Cat('Micia');
alert(myCat.name); //alerts 'Micia'
/* Extends Example: */
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = new Class({
Extends: Animal,
initialize: function(name, age){
this.parent(age); //will call initalize of Animal
this.name = name;
}
});
var myCat = new Cat('Micia', 20);
alert(myCat.name); //Alerts 'Micia'.
alert(myCat.age); //Alerts 20.
/* Implements Example */
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = new Class({
Implements: Animal,
setName: function(name){
this.name = name
}
});
var myAnimal = new Cat(20);
myAnimal.setName('Micia');
alert(myAnimal.name); //Alerts 'Micia'.
Element: توسعه Elementهای DOM. این شیء با روشهای متنوعی از قبیل توابع $ و $$ یا ساختن Element توسط خود موتولز ایجاد میشه. در نسخه های جدید MooTools (در این تاریخ)، هر Element که بازیابی بشه، خودبخود در این شیء قرار میگیره. در نســــخه های جدید، متد document.id کاملا مشابه $ عمل می کنه.
var myElement = $('myElementID');
var myElement = document.id('myElementID');
var myExternalLinks = $$('#myID span.myClass a[href^=http://');
var myLink = new Element('a', {
href: 'http://Boplo.ir',
title:'Boplo.ir',
html: 'Lovely Boplo.ir'
});
// New versions: myElement is a valid MooTools Element
var myElement = document.getElementById('myElementID');
توابع خیلی زیادی برای این شیء وجود داره که همه اش کاربردیه:
//Returns the myInput element's value.
var value = $('myInput').get('value');
// Puts myDiv in body
$('myDiv').inject(document.body);
// Adds someClass class to myDiv
$('myDiv').addClass('someClass');
// Sets color CSS property of myDiv to #323232
$('myDiv').setStyle('color', '#323232');
// Gets color CSS property of myDiv
$('myDiv').getStyle('color');
// Gets First Parent of myDiv
var parent = $('myDiv').getParent();
// Gets First Parent of myDiv which has 'block' class name
var parent = $('myDiv').getParent('.block');
// Gets Children of myDiv which are span
var spanChildren = $('myDiv').getChildren('span');
// Gets Selected options of mySelect <select> tag
var selected = $('mySelect').getSelected();
// Gets src attribute of myImage
var imgProps = $('myImage').getProperty('src');
// Gets dynamic src attribute of myImage
var imgProps = $('myImage').get('src');
// Sets src attribute of myImage
var imgProps = $('myImage').set('src', 'images/somePic.png');
// Adds text to end of myDiv
$('myDiv').appendText(' Blah Blah.');
// Removes myDiv
$('myDiv').destroy();
توابعی مخصوص کار با رویدادها:
$('myElement').addEvent('click', function(){
alert('clicked!');
});
$('myLink').addEvent('mouseover', function(){
alert(this.href);
});
var destroy = function() {
alert('Boom: ' + this.id); // this refers to the Element.
}
$('myElement').addEvent('click', destroy); // Add Event
$('myElement').fireEvent('click'); // Fire Event
$('myElement').removeEvent('click', destroy); // Remove Event
و و و و ....
Fx: شامل توابعی اساسی برای ایجاد انیمیشن سازی در MooTools. خود این شیء تابع عمومی و پرکابردی نداره بلکه در زمان ساختن انیمیشن استفاده میشه ولی زیرمجموعه های این شیء در صفحه خیلی می تونن کاربردی باشند.
var myTween = new Fx.Tween(element);
// Transitions the Element's color to #f00
myTween.start('color', '#f00');
// Transitions the Element's width from 200px to 300px
myTween.start('width', 200, 300);
// Transitions the Element's width from current to 300px
myTween.start('width', 300);
var myMorph = new Fx.Morph('myElement');
myMorph.start({//Same as Tween but for more than 2 properties
'height': [10, 100],
'width': [900, 300],
'opacity': 0,
'background-color': '#00f'
});
// Transitions the Element's styles
// to myClassName CSS class styles
// And alerts when transitions is completed
var myMorph = new Fx.Morph('myElement', {
duration:1000,
onComplete: function() {
alert("alert");
}
});
myMorph.start('.myClassName');
Request: برای ارسال درخواستهای AJAX.
var myRequest = new Request({
url: 'page.html',
method: 'POST',
data: 'a=1&b=2&c=3',
// On Loading
onRequest: function() {
$('myDiv').set('html', 'Loading...');
},
// On Successful Finishing
onSuccess: function(responseText) {
$('myDiv').set('html', responseText);
},
// On Exceptions
onFailure: function(xhr) {
$('myDiv').set('html', 'Error Occured: ' + xhr.responseText);
}
});
myRequest.start(); // Sending AJAX Request
اینها اشیاء اصلی بودند. همراه اینها اشیاء دیگه ای مثل Selector برای ایجاد امکان انتخاب Elementها توسط Selectorهای CSS، توابعی برای ترجمه JSON، کار با Cookieها و فلش و غیره وجود داره.
به همراه این موارد که بصورت خلاصه لیست شد، اشیاء و توسعه های دیگه ای هم هستند مثل توسعه شیء Date که چون زیاد پرکاربرد نیستند، در بخش More سایت قرار گرفتند. همچنین در اونجا پلاگینهایی هم توسط خود تیم MooTools تهیه شده که چون خیلی پرطرفدار هستند اونجا دیده میشوند. پلاگینهایی برای Slide و Drag & Drop و Tooltips و غیره.
پلاگینهای بیشتر در بخش Forge که اخیرا (در این تاریخ) راه اندازی شده قرار میگیرند.
تمام بخشهایی که در بالا دیدی، خلاصه و معرفی بود. سعی می کنم در بخش موتولز همه اش رو مفصل آموزش بدم. اینها همه نظرات و دیدگاه شخص من از MooTools بود. میتونه کامل و عالی، ناقص و پیش پا افتاده یا غلط باشه. برای اطلاعات صحیح و بروز به سایت خود موتولز مراجعه کنید.
MooTools در حال توسعه است و در آدرس http://MooTools.net قابل دسترسی و دریافت است. بخش دریافت امکانی داره که میشه اشیاء رو. انتخاب کرد. مثلا من احتیاجی به شیء Number ندارم، تیکش رو برمی دارم و اصلا توی فایلی که داونلود می کنم نیست. البته ابن بستگی به پیش نیازها داره یعنی اگر Element رو انتخاب کنم و Element به Number نیاز داشته باشه، نمیشه انتخابش نکرد. این امکان در صفحه Download و قسمت Core Builder و More Builder قرار گرفته.
و اما آینده:
من چند سالی هست MooTools رو میشناسم. این فریم ورک کاربر خیلی زیادی نسبت به jQuery نداشت ولی اخیرا دارند حرکتهایی می کنند که کاربرهای بیشتری جذب کنند. زمانی که تعداد کاربران بیشتر بشه، توسعه های بیشتر و بهتری از این فریم ورک خواهیم دید. این یعنی موتولز داره رشد می کنه. همچنین MooTools نسخه 2.0 که قراره به زودی بیاد، داره بهینه میشه و قراره از یه Selector فوق سریع به نام Slick که خودشون دارند روش کار می کنند استفاده بشه.
درباره این سوال احتمالی که آیا موتولز چند سال دیگه به دردم میخوره یا نه، باید بگم که ساختار موتولز طوری ساخته شده که خیلی عالی و تمیز توسعه پیدا می کنه (توسط سینتکس Class). این یعنی برای استفاده از امکانات جدید کافیه پلاگینها یا اشیاء بروز شده رو آپدیت کنیم. ساختار چنان باز و خوب ایجاد شده که تا بینهایت میشه توسعه سالم درش ایجاد کرد. این به نظر من بزرگترین نقطه قوت MooTools می تونه باشه. چون از این نظر که خیلی اهمیت داره، محدودیتی توش دیده نمیشه.
خلاصه MooTools یک فریم ورک کاملا آینده دار و قابل پیشرفته.
همچنین بخوانید:
پیروز باشید
امیرحسین
امیرحسینم. اسمم رو دوست دارم، خودم رو دوست دارم. تهران زندگی می کنم. دانشجوی رشته صنایع هستم شغل درست و حسابی ندارم. طراحی وب می کنم ولی همه اش واسه سرگرمی بوده. برنامه نویس PHP هستم. برنامه نویسی و وقت گذرونی با کامپیوتر تنها کاریه که خسته ام نمی کنه.
تو چی فکر می کنی؟