Ниже предлагаются советы от Ryan Florence и David Walsh, как правильно использовать MooTools скрипты и писать свои.

 

1. Собственная сборка или Google AJAX Libraries

Одно из важных преимуществ использования MooTools - его модульность. Вы можете включить в сборку только те классы Core и More, которые вы используете. Для определения необходимых классов используйте сервис mooDeps.

В противном случае пользуйтесь Google AJAX Libraries.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

или

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  
	google.load("mootools", "1.2.4"); //или более ранние версии
</script>  

Это увеличит скорость загрузки фреймворка.

2. Поиск готового решения

Я уже писал о поиске готовых решений в интернете. Безусловно, это сэкономит ваше время. Если готовая реализация не совсем удовлетворяет вашим требованиям, свяжитесь с ее автором, возможно, он поможет вам.

3. jQuery и MooTools

При использовании этих фреймворков вместе, jQuery работает с методом $, а MooTools использует document.id.

<script type="text/javascript" src="jquery-1.4.js" />
<script type="text/javascript" src="mootools.js" /> 
<script type="text/javascript">
	$('a').css('color','red');	// код jQuery
	document.id('content').setStyle('background','pink'); // код MooTools
	(function($) { // код MooTools с $
		$('content').setStyle('background','pink');
	})(document.id);
</script>

4. Выполнение методов существующих объектов

MooTools позволяет расширять функциональность базовых классов Natives, Element, Elements и т.д., добавляя новые методы. Следующий пример переводит строку в формат твиттера.

String.implement({
	toTweet: function() {
		 return this.replace(/(https?:\/\/\S+)/gi,'<a href=""></a>').replace(/(^|\s)@(\w+)/g,'<a href="http://twitter.com/">@</a>').replace(/(^|\s)#(\w+)/g,'<a href="http://search.twitter.com/search?q=%23">#</a>');
	}
});

Теперь вы можете вызывать метод toTweet к любой строке.

var el = $('myElement');
el.set('html',el.get('html').toTweet());

alert('Yo @NetTuts, check out my #MooTools website: http://davidwalsh.name'.toTweet());
// сообщение:  Yo <a href="http://twitter.com/nettuts">@NetTuts</a>, check out my <a href="http://search.twitter.com/search?q=%23MooTools">MooTools</a> website: <a href="http://davidwalsh.name">http://davidwalsh.name</a>

5. Расширение существующих классов

Скорее всего, вы пишете скрипты следующим образом. Так делал и я, но после написания этой статьи, думаю, исправлюсь:

initialize: function(element) {
	this.tween = new Fx.Tween(element,{
		duration: 'some-horrible-hard-coded-options',
		transition: this.namespaced.options.that.are.lame
	});

	// ...

	this.tween.start(0,100);
}

Если расширить Fx.Tween, вы получите все его опции и методы. Это избавит вас от повторения кода.

var Fx.Tween.Toggle = new Class({
	Extends: Fx.Tween
});

Extends, в отличие от Implements, наследует класс, перегружая и добавляя новые методы. В то время, как Implements только добавляет методы без наследования.

6. Class.toElement

Добавление метода toElement к вашему классу позволяет использовать этот класс как элемент.

var myClass = new Class({

	Implements: [Options],

	initialize: function(container,options) {
		this.container = $(container);
	},

	toElement: function() {
		return this.container;
	}
});

var myInstance = new MyClass('myElement');
myInstance.setStyle('color','#f00').set('html','This is my element!');

7. Собственные псевдо-селекторы

MooTools позволяет вам создавать собственные псевдо-селекторы. Приведенный ниже пример делает выборку всех неактивных элементов.

Selectors.Pseudo.disabled = function() {
	return this.disabled;
}

var disabledInputs = $$('input:disabled');

Просто добавьте ваш селектор к объекту Selectors.Pseudo. Если функция возвращает true, элемент удовлетворяет выборке.

8. Собственные события

MooTools позволяет создавать не только собственные селекторы, но и события. Приведенный ниже пример обрабатывает Alt+Click. При добавлении/удалении события меняется курсор мыши.

Element.Events.altClick = {
	base: 'click', // базовое событие
	condition: function(event) {
		return event.alt; // нажата клавиша alt?
	},
	onAdd: function() {	// событие добавлено
		if(this.setStyle) {
			this.store('original-cursor',this.getStyle('cursor'));
			this.setStyle('cursor','pointer');
		}

	},
	onRemove: function() {	// событие удалено
		if(this.setStyle) {
			this.setStyle('cursor',this.retrieve('original-cursor'));
		}
	}
};

$(document.body).addEvent('altClick',function() {
	alert('You alt-clicked me!');
});

9. Делегирование событий

Делегирование событий - это автоматическое добавление событий элемента-родителя элементам-потомкам. Преимущество заключается в том, что вам не приходится вручную назначать события новым элементами. То есть, вместо

$$('a').addEvent('click',function() {
	// индивидуальное событие
});

вы пишете

$('myContainer').addEvent('click:relay(a)',function() {
	// событие назначается элементу-родителю
})

10. Коллекции элементов

Не нужно использовать метод .each() для обхода всего набора элементов.

$$('a').each(function(a) {
	a.addEvents({
		mouseenter: function() {
			if(!a.retrieve('oPad')) { a.store('oPad',a.getStyle('padding-left')); }
			a.tween('padding-left',30);
		},
		mouseleave: function() {
			a.tween('padding-left',a.retrieve('oPad'));
		}
	});	
});

Многие методы можно применять сразу к набору элементов. При этом ключевое слово this относится к текущему элементу, а не к набору.

$$('a').addEvents({
	mouseenter: function() { //animate to the right
		if(!this.retrieve('oPad')) { this.store('oPad',this.getStyle('padding-left')); }
		this.tween('padding-left',30);
	},
	mouseleave: function() { //animate back to the left
		this.tween('padding-left',this.retrieve('oPad'));
	}
});

11. Добавление/удаление событий с помощью attach и detach

Используйте метод attach для добавления и detach - для удаления событий. Такой подход может быть полезен при работе с несколькими объектами, в этом случае изменение событий одного элемента не будет влиять на поведение других.

initialize: function(element){
	this.element = document.id(element);
	this.bound = this.someMethod.bind(this);
},

attach:function(){
	this.element.addEvent('click', this.bound);
	return this;
},

detach: function(){
	this.element.removeEvent('click', this.bound);
	return this;
}

12. Создание элементов с помощью метода build

Используйте метод build (или к примеру buildMenu) для создания новых элементов. При этом для добавления событий применяйте отдельные методы (attach).

build: function(){
	this.wrapper = new Element('div').inject(this.element);
	return this;
}

13. this.element и this.elements для главных элементов

Даже если этот элемент является контейнером. В этом случае все ваши скрипты будут написаны в одном стиле.

initialize: function(element){
	this.element = document.id(element);
}

14. this всегда должен указывать на экземпляр класса

Всегда.

15. Один метод для одной функции

Какова будет ваша реакция, если вы открываете скрипт и видите 200 строчек кода в конструкторе или какой-либо другой метод, который реализует весь функционал?

16. Возвращайте this для большинства методов

Это позволит вам писать цепочку методов вашего класса. Конечно, методы могут возвращать другие значение, в остальных случаях, вам следует возвращать this.

doSomethingAwesome: function(){
	// do cool stuff
	return this;
},

doSomethingImportant: function(){
	// do important stuff
	return this;
}

myInstance.attach().doSomethingImportant().doSomethingAwesome().detach();