Arquivo da categoria: JavaScript

Como interceptar uma função em JavaScript ?

Boa tarde !

Está difícil de postar com frequência, mas esses dias descobri algo tão interessante que me motivou a tirar as teias de aranha daqui mais uma vez.
Bom, vamos logo ao assunto.

Um dia desses no trabalho me vi obrigado a interceptar a execução de uma função JavaScript de terceiros.
Mas o que eu quis dizer com “interceptar” ?!

No geral, eu precisava executar códigos meus antes e depois que uma determinada função (que não era minha) fosse executada, mas mantendo a chamada da função.
Após quebrar um pouco a cabeça e brincar com contextos de função, cheguei a uma solução limpa e que fez o trabalho pra mim.

Vamos supor que a função que eu gostaria de interceptar se chamasse bar().
Vou postar um código para termos como exemplo, mas a função não precisa ter sido criada por você:

var bar = function(){
  for (var i = 1; i <= 3; i++)
    alert(i);
};

Agora o código para interceptar essa função:

var foo = bar; // Note que não podemos colocar aqui os parênteses "()" na função "bar"
bar = function() {
  alert('Esse comando será executado ANTES da função original');
  foo.apply(this, arguments); // Chamada da função original
  alert('Esse comando será executado DEPOIS da função original');
};

Como puderam notar, a mágica está em atribuir a função para outra variável, e então criar outra função que execute a função original. O comando “apply” está presente em todas as funções e permite executar outra função em um contexto diferente, passando um array de parâmetros (que em todas as funções podem ser acessadas pela variável “arguments”).
Nesse caso então, podemos executar quaisquer comandos antes ou depois do apply que chama a função original encaminhando os parâmetros recebidos para a função original.

Espero que tenha sido útil !

Até mais !

“A mente é um fogo a ser aceso, não um vaso a preencher.”
– Plutarco

Afinal de contas: O quê é, e pra que serve o jQuery ?! – Parte 1

Boa noite leitores! rs

hoje irei abordar um tema que gera muitas dúvidas em pessoas que estão começando a desvendar o maravilhoso mundo do desenvolvimento web: jQuery !

Como o assunto é um pouco extenso, vou dividir o artigo em duas partes. Nessa primeira parte irei abordar o conceito por cima, e no próximo me aprofundarei um pouco mais.

Muito se houve falar hoje em dia em jQuery, mas para muitos ainda é um tremendo mistério. Ouvimos e lemos diariamente sobre as fantásticas feitiçarias funcionalidades que ele possui, que mais parecem ser coisa de outro mundo!

Vou começar então com uma afirmação que pode desapontar a muitos: jQuery é APENAS JAVASCRIPT, e não é capaz de fazer NADA que o javascript não possa fazer !
Bom, quebramos aqui então um mito muito comum onde muitas pessoas acreditam que o jQuery é mágico, e que realiza milagres (em alguns casos pode até facilitar, mas não tanto… rs).
O JavaScript possui algumas limitações (até por questão de segurança) como por exemplo, não acessa arquivos da máquina (como uma foto que está no seu C:), não acessa hardware nenhum da máquina, como CD, webcam, etc. Uma exceção fica por conta do microfone, que pode ser acessado mas apenas pelo Google Chrome (artifício da Google para facilitar as buscas, utilizando voz). Necessidades atuais, tais como Sistemas Operacionais na nuvem e Webapps podem mudar esse cenário em breve, mas isso é um outro tópico.

Você deve estar se perguntando: Então pra que raios eu preciso desse jQuery ai ?!
A resposta é simples: jQuery é uma biblioteca para JavaScript, ou seja ele é um conjunto de códigos que facilita a programação! Com o jQuery, códigos que teriam antes centenas ou milhares de linhas tem apenas dezenas ou menos, e essa é a sua mágica. Não é a toa que o slogan do projeto é: “Escreva menos, faça mais”. Essencialmente, o jQuery ficou famoso também por uma funcionalidade que na verdade é “terceirizado” do Sizzle.js (apesar de as duas terem o mesmo criador) que são os seletores. Para  exemplificar, vou começar a mostrar um pouco de códigos.

O que torna os seletores do jQuery extremamente fáceis, é que eles utilizam os padrões do tão famoso CSS3 e alguns recursos a mais que melhoram ainda mais as possibilidades.

Para começar pelo simples temos que ter em mente que uma página html é um documento estruturado, formado por tags, como div, span, table, etc. Para conhecer melhor a estrutura html visite este site. Quando queremos manipular algum desses elementos, utilizamos o JavaScript como nosso aliado. Para selecionar uma div pelo atributo id (um atributo id deve se único no documento html) nós precisamos realizar o comando:

Com jQuery, esse código seria reduzido para apenas:

Percebem que já existe uma redução no tamanho do código? Isso, ao longo do projeto, ajuda DEMAIS na codificação, porque facilita na criação e na manutenção do código.

No próximo artigo darei mais detalhes e comandos desse tão falado jQuery ai… 😀

 

Quando vires um homem bom, tenta imitá-lo; quando vires um homem mau, examina-te a ti mesmo.
– Confúcio