Busca

fim de expediente

by rafa soares

Tag

javascript

da série ‘pesadelos do desevolvedor alheio’: chainability

Título confuso? Deixe-me explicar:

Sabe aquele código que você faz que é lindo, perfeito, funcional e limpo, mas que só você entende (pelo menos de primeira). Não que o código seja mal-feito. Simplesmente é confuso para quem não tem a mesma linha de raciocínio que você. Por isso, pesadelo do desenvolvedor alheio.

Título explicado, vamos lá…

Episódio de hoje:

Chainability

Em primeiro lugar, o que é esse bicho de nome feio? É capacidade de, digamos, “acorrentar” o código, criando uma cadeia de comandos na mesma tacada.

Exemplo prático:

// Codigo comum
var texto = document.formulario.textbox.value;
texto = texto.replace( 'A', 'a' );
texto = texto.replace( 'abc', 'nonono' );

// Usando uma "corrente" de comandos
var texto = document.formulario.textbox.value.replace( 'A', 'a' ).replace( 'abc', 'nonono' );

Os dois códigos produzem o mesmo resultado, mas o 2º, para um desenvolvedor que não está acostumado, pode ficar confuso.

Mas qual o fundamento da chainability (traduzindo literalmente, “habilidade de acorrentar”)? É simples, eu tenho um método ou propriedade que retorna um valor, logo posso chamar qualquer método ou propriedade que pertenca ao tipo do valor em questão. No exemplo, value é do tipo string. Eu chamo o método “replace” que retorna outra string. E assim vai.

Os frameworks de javascript, como jQuery e Prototype, se vangloriam dessa capacidade que, na verdade, é nativa a várias linguagens. (já comprovei no JS e no C#).

Realmente a prática economiza várias linhas de código. (duas, no meu exemplo trivial)

Mas quando usá-la, questione-se como vai se sentir o desenvolvedor alheio. 😉

Anúncios

unnamed feeling

Obs: post feito às 23h05m…

Não sei o que dizer sobre o que estou sentindo agora.
Uma mistura de raiva, revolta, alegria, satisfação. E tudo pelo mesmo motivo!

Gastei as últimas 4/5h buscando na internet um jeito de fazer algo essencial, mas mal documentado: Inserir um texto em algum campo, mas no ponto de inserção (aka cursor).

Procurei em fóruns, sites de busca, mailing lists e nada. O que eu encontrava ou não era exatamente o que eu queria, ou não funcionava plenamente.

Encontrei algo que poderia ser o caminho para a salvação:

pos = $("texto").selectionStart;

Isso me daria a posição do cursor. Já é um começo. A partir daí eu iria dividir o texto entre “antes” e “depois” do cursor e enfiar o que eu queria no meio. Trabalhoso, mas já resolveria o meu problema.
Mas tem um pequenino detalhe: não funciona no Internet Explorer.
Bah! Que novidade… 😦 Me diz o que é que funciona nessa inhaca? E ainda tem 83% do mercado… ¬¬

Como diz o Ruppel:

Para usuário Internet Explorer: mude de navegador.

Pior do que atender só a minoria, minha solução não atendia o meu público alvo

Então volto a camelar… Já sem esperanças… Então tive um lampejo e só para constar: às 22h30, combinando uma dica de um fórum com uma tentativa desesperada e uma olhadinha na Referência do Dreamweaver, cheguei às seguintes mágicas linhas:

$("idtextarea").focus();
var range = document.selection.createRange();
range.text = "texto";

Obs: se você desconhece o comando $("idtextarea") é a mesma coisa que document.getElementById("idtextarea");
Para saber mais, dê uma olhada em http://www.metzen.com.br/freedom/. 😉

E é isso. Essas 3 linhazinhas. Simples assim.
Pior que eu já tinha tentado o document.selection.createRange(); antes, mas o macete está em dar foco no campo antes (no caso, a textarea). Aí vai do gosto do freguês: pelo ID, através do document.formulario.campo ou pelo document.forms['formulario'].elements['campo']Não interessa. O importante é o campo estar com foco antes de você criar o range.

Chato, não?
E eu aqui perdendo horas de sono…
Aliás, deixa eu ir dormir! 😀
Boa noite! o/

Acima ↑