Mootools – Options

Através dos conceitos de reutilização de código, as funções JavaScript de hoje contém opções e mais opções para o usuário definir (ou não). Verificar cada uma dessas opções manualmente dá muito trabalho, mas a Mootools nos ajuda. Vamos ver o suporte dessa incrível biblioteca, através da classe Options.

O que faz?

A classe Options define as opções passadas pelo usuário para alguma classe. Essa definição é feita sobrescrevendo os valores padrão (caso esses sejam definidos pelo usuário) e os mantendo quando nenhuma opção correspondente é passada.

Lógico, nada muito espetacular. Isso poderia ser feito através da função $merge, da própria Mootools. Mas há mais que isso. Além de definir opções, a classe Options também vasculha-as em busca de opções que comecem com “on”, e automaticamente adicionam-as como um evento, caso a classe Events esteja implementada. É mais que apenas um $merge disfarçado…

Implementando

Mais uma vez, antes de podermos utilizar essa classe extra, devemos implementá-la em nossa classe. Novamente, utilizamos o método Class.implement.

Caso você queira utilizar o suporte a eventos, também implemente a classe Events, na mesma declaração.

myClass.implement(new Options, new Events);

Definindo Opções

Antes de tudo, é necessário definir as opções que serão utilizadas por padrão. Essas opções padrão devem estar em this.options, sendo this a nossa classe.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0
	},
	"initialize": function() {}
});

Para fazer a “escolha” das opções, basta utilizar o método Options.setOptions, levando como parâmetro as opções que devem sobrescrever as opções padrão. Após a chamada ao método, todas as opções estarão disponíveis em this.options. Se o usuário definir opções que não estão definidas como padrão, elas também serão adicionadas.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0
	},
	"initialize": function(options) {
		this.setOptions(options);
	}
});
var mySlideShow = new SlideShow({
	"slides": [$("slide-1"), $("slide-2")],
	"wrap": true
});
mySlideShow.options["startSlide"]; // 0
mySlideShow.options["wrap"]; // true, também foi adicionada

Definindo Eventos

Não há diferença quanto a adicionar opções comuns ou eventos, os dois são adicionados da mesma maneira.

var mySlideShow = new SlideShow({
	"slides": [$("slide-1"), $("slide-2")],
	"wrap": true,
	"onStart": function() {}
});

No caso de eventos, não é necessário definir uma opção padrão, já que os eventos são chamados apenas se estiverem definidos, não causando erros. Caso você considere necessário, pode-se usar Class.empty como padrão. Class.empty é apenas uma função vazia, apenas para não precisarmos nos preocupar em definir algo a ser executado.

var SlideShow = new Class({
	"options": {
		"slides": [],
		"startSlide": 0,
		"onStart": Class.empty
	},
	"initialize": function(options) {
		this.setOptions(options);
		this.fireEvent("onStart", this.options.startSlide, 10);
	}
});

Assim como as outras classes, a própria biblioteca faz grande uso de Options. É o espírito da reutilização, tanto na própria biblioteca quanto para os desenvolvedores. Até a próxima!

Posts Relacionados

Postado em janeiro 20, 2008 às 13:47

Comentários

  1. Bernardo Rufino

    Ótimo, tomara que continue com a série de posts sobre a Mootools, terei aonde consultar!


  2. Rodrigo Fante

    Opa, mais uma, estão muito bons os artigos sobre o mootools…


  3. ShowYes

    Posta mais sobre mootools, tô gostando…


  4. JulioGreff

    @Bernardo: Sim, a série vai continuar. Mais alguns posts no forno…
    @Rodrigo: Obrigado!
    @ShowYes: Claro! Breve…


Deixe seu comentário