Olá novamente! Hoje vou trazer uma técnica interessante para otimização de recursos de sua aplicação javascript. A técnica conhecida como Init-Time Branching ou Ramificação em tempo de inicialização consiste em você fazer verificações (sniffing) no seu ambiente (browser por exemplo), a fim de verificar se alguns recursos são suportados.
Basicamente quando você sabe que uma certa condição da sua aplicação não vai mudar de acordo com a execução da mesma, você não precisa verificar certos atributos, recursos mais de uma vez, apenas na inicialização do processo. Ficou meio confuso, ainda?
Exemplifica aí..
Eu vou exemplificar textualmente com o exemplo clássico, utilizando os métodos addEventListener, removeEventListener, attachEvent e detachEvent. Ambos são utilizados para adicionar eventos em elementos, porém, não são encontrados em todos os browsers, logo, uma verificação precisa ser feita antes de utilizá-los. No Internet Explorer, você normalmente utilizaria o attachEvent e o detachEvent para adicionar e remover listeners respectivamente. Já na maioria dos browsers, o addEventListener e o removeEventListener são os nomes da vez.
Para uma explicação mais técnica, eu criei uma pequena lib, onde vamos aprender este conceito de otimização salvando informações locais, utilizando localStorage ou cookies!
Digamos que eu preciso de uma biblioteca no meu website/aplicação, onde vou precisar salvar informações locais no browser mesmo, pois não necessito de um SGBD externo ou ainda, realmente minha aplicação é 100% local. Bom, eu poderia simplesmente utilizar o localStorage como storage por ser muito mais simples de manipular, porém, e se meu usuário estiver rodando minha aplicação onde não há suporte para localStorage?
Aí que entra a lib. Ela fará uma contrapartida (fallbkack) para a aplicação, utilizando localStorage ou Cookies para armazenamento de dados. O melhor é que você não precisa se preocupar como os dados serão salvos, uma vez que os métodos de Salvar e Retornar serão os mesmos durante toda a aplicação.
Vamos ao código!
Viajou muito?
O código está bem comentado para o entendimento geral, mas, como eu estou disposto a escrever hoje, eu vou “reinventar a roda” e “re-explicar” em poucas palavras como foi utilizado a técnica de Init-Time Branching na lib.
Como você pode ver, eu tenho a criação de um objeto literal keyValueDatabase dentro do meu escopo da função anônima, com dois atributos: “get” e “set”, sendo ambos setados como “null” inicialmente.
Logo após estes atributos, eu tenho a definição de um método que faz a verificação se existe o suporte para localStorage, e o mesmo não existindo, o método também verifica a presença do suporte a Cookies.
Em ambos, ao encontrar o suporte ideal (seja localStorage ou Cookies), os atributos inicialmente setados como “null”, são redefinidos como métodos para funcionar exatamente da mesma maneira, só que com o armazenamento de dados em background, diferenciado.
Para utilizar os métodos você só precisaria chamar:
keyValueDatabase.set('indice', 'valor');
// Retornando
var valorSalvo = keyValueDatabase.get('indice');
console.log(valorSalvo);
Desta forma, você estaria armazenado seus dados de forma única e a lib fez todo o trabalho para que você salvasse ou com localStorage ou com cookies.
Uma dica final: Você pode ter notado que mesmo não passando por localStorage e Cookies, ainda existe no código o “else” final, onde não haverá suporte para nenhuma das duas opções. Previna este tipo de situação! Lembre-se que não é por que um browser não tem suporte a uma tecnologia que todos os outros são provavelmente terão! Lembre-se disso!
E aí? Gostou?
Ainda tá com dúvidas?
Comenta aí!