[Tutorial] Criando uma mini biblioteca Javascript - Básico

Eae pessoal..

A primeira coisa a ser esclarecida aqui é: Isso é a versão básica de uma mini biblioteca, é necessário entender o básico (que seria nossa base para estudos mais avançados) antes de evoluirmos para algo mais complexo, em breve eu posto o método mais complexo (que é mais rápido, otimizado, etc..)

A ideia de se usar uma mini biblioteca é diminuir o tamanho do seu código, usar na prática o lema do jQuery, "Write less, do more..", nem sempre elas são úteis, se for um código de poucas linhas provavelmente você só vai aumentar o tamanho do seu código, mas se por exemplo for um código grande como um aqui da própria Forumeiros (que vou mostrar adiante), deveria sim ser usada alguma técnica semelhante de otimização.

Vamos parar para analisar este código encontrado em todos os fóruns Forumeiros
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (usem um beautifier qualquer...)


Parem e analisem, o que poderiamos mudar ai para otimizar?

Antes de continuar, ja quero deixar claro, meu objetivo não é criticar a Forumeiros ou qualquer coisa do tipo, apenas estou falando que essas coisas poderiam ser otimizadas, ok?

A lógica se usar uma linguagem de programação é deixar as coisas mais fáceis para nós humanos, fazer ela pensar e fazer a parte "chata" por nós, não é??

Por exemplo, quando o Brendan Eich estava la criando o Javascript ele pensou "e se os programadores que vão usar a linguagem precisarem mostrar dados mais de uma vez?", é ai que surgiram as nossas queridas funções e variáveis (é uma afirmação hipotética e ilustrativa, ok?).

Elas nos ajudam a fazer as tarefas por nós, deixar nosso código mais reutilizável e de fácil manutenção em caso necessidade de alteração.

Quando estamos programando objetivo é deixar nosso arquivo o mais rápido e leve possível, não? É por isso que por exemplo não fazemos isso:

Código:

document.write('Este é um teste' + 'e este é outro teste' + 'mais um teste' + 'olha outro teste aqui' + 'e para finalizar um ultimo teste');

Vejam quantas vezes a palavra teste é repetida.. E se quisessemos alterar teste para exemplo?
Vamos ter que escrever tudo denovo? Procurar cada palavra teste e substituir por exemplo?

No caso do código acima, sim! Mas vejam este:

Código:

var a = 'teste';
document.write('Este é um ' + a + 'e este é outro ' + a + 'mais um ' + a + 'olha outro ' + a + ' aqui' + 'e para finalizar um ultimo ' + a );

Vejam que armazenamos o valor de teste dentro da variável a, assim se precisarmos mudar os dados não temos que procurar um por um, e sim apenas mudamos o valor da nossa variável!

Querem um exemplo prático? Voltem no código passado no começo (da Forumeiros) e abram em um editor qualquer que mostre o número de palavras encontradas (matches). Estou usando o Brackets e nele pesquisei pela palavra document (muito usada no Javascript para encontrar elementos) e ela é repetida nada mais nada menos do que 353 vezes!

Agora, digamos que por alguma loucura os caras resolvam alterar a syntaxe da linguagem e por exemplo troquem document por doc? (novamente um exemplo hipotético), perceberam a importância do uso de variáveis? Não somente isso, pensem quantos kb's de memória nós ganharíamos se substituíssemos o document por doc.. Cada kb de memória economizado é precioso nos dias de hoje!

Novamente deixo claro, meu objetivo não é atacar, denegrir a moral ou qualquer coisa do tipo do serviço Forumeiros, estou apenas mostrando um exemplo que todos podem ver na prática!

Não somente document, muitos seletores poderiam ser reaproveitados, vou pegar um bem simples como exemplo

Código:

#find_username

Neste caso aparece 3 vezes, poderia ser usado em uma variável e reaproveitado de maneira a fica com fácil manutenção e é claro nos dar alguns kb's a mais.

Sabendo disso, me respondam, qual seria uma boa práticas para grandes códigos?

Armazenar nossos valores que serão repetidos mais de uma vez em uma variável não? [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Vamos fazer isso para iniciar o desenvolvimento da nossa mini biblioteca:

Código:

var quandoObjetoDocumentCarregarUsoEssaVariavel = document;

Perfeito né? [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Não!! Lembrem-se do que foi dito acima, o objetivo de se armazenar dados em variáveis é ganhar memória, não perder [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Então como poderiamos otimizar isso?

Código:

var d = document;

Bem melhor não? [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Certo, agora que temos nosso código otimizado, qual a próxima parte?

Primeiro passo é escolher a função que gostariamos de otimizar, vou usar essa como exemplo:

Código:

document.getElementById()

Novamente voltemos ao código da Forumeiros e vamos procurar por

Código:

document.getElementById

99 matches aqui, podemos otimizar né? Mas como fazemos?

Antes de tudo, precisamos para pensar, o que nosso código faz? Qual a função dele?

No caso do getElementById ele simplesmente retorna um valor para nós, retorna o que? O ID do elemento, então vamos voltar a quando estavamos estudando funções, como fazemos para retornar algum valor?

Código:

function func(){
return 'valor';
}
func()

Então tudo que temos que fazer é achar alguma maneira para nossa função retornar o ID do elemento não é? Como fazemos?

Código:

function func(){
return document.getElementById('element')
}
func()

Ta, mas lembra que nós somos legais e reutilizamos nosso código? [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Código:

var d = document;
function func(){
return d.getElementById('element')
}
func()

Um pouquinho melhor assim.

Mas vamos parar para pensar, qual o objetivo de criar essa função? Diminuir o código usado né? Se estamos usando para isso porque ele está recebendo um ID fixo que é o element?

Precisamos arrumar isso, novamente voltem ao começo dos aprendizados e lembrem, como podemos pegar valores recebidos de uma função? Como se chamam esses valores?

É ai que nos aos parâmetros, que são dados que podemos passar através de nossas funções. Vamos fazer isso?

Código:

var d = document;
function func(parametro){
return d.getElementById()
}

Legal, mas temos um erro ai não? Conseguem identificar?

Isso mesmo, a função está recebendo o parâmetro, mas não está retornando ele! Vamos arrumar isso?

Código:

var d = document;
function func(parametro){
return d.getElementById(parametro)
}
func('element')

Pronto, nossa mini biblioteca ja está funcionando.. Mas vamos melhorar ela?

Código:

var d = document;
function byId(e){
return d.getElementById(e);
}
byId('element');

Show de bola né?

Agora toda vez que formos usar

Código:

document.getElementById()

Podemos usar nossa mini biblioteca assim:

Código:

byId()

Bacana né? [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Isso é só uma base de estudos para vocês, podem usar isso para as mais diversas funções (claro que algumas são diferentes, mas ai vai de você pesquisar).

Espero que seja útil a vocês, e em breve lanço uma forma melhor de fazer isso, ok? [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Até uma próxima, abraços...

Como voces os brasileiros dizem nossa cara que código tão grande as pessoas são incriveis como conseguem trabalhar para fazer um código desses que deve demorar tantos dias.
mas primeiro o que é um beautifier??
E por o que entendi entao basta ter algo como var a = 'teste'; no exemplo de cima para simplificar as coisas no caso da palavra teste é isso?
Eles se calhar não optimizam porque não sabem xD

Olha, as vezes é por preguiça, ou por não saberem mesmo... Mas enfim, não to aqui pra julgar eles né kkkkkkkkkk

E sim, variáveis armazenam vários tipos de dados, sejam eles strings, numbers, floats e por ai vai..

Mas cada caso é um caso, você não pode por exemplo simplificar assim:

Código:

var get = getElementById

Com certeza vai ter um erro ao usar a função...

Mas não me respondeste o que é um beautifier?
Estou a ver que afinal programaçao é muito mais complexa do que se julga penso que é preciso estudar muito mesmo para conseguir ser bom naquilo que se faz ao ver isso tudo mais parece uma criatura dificil de vencer

Olá, esqueci disto kkk

Beautifiers são ferramentas/plugins que fazem com que seu código fique legível para humanos, afinal é meio complicado ler isso aqui né? xD


Com o uso de um beautifier o código fica bem legível.

E quanto a programação ser uma criatura dificil.. Bem, realmente é, mas como em qualquer coisa na vida com dedicação você vence
(As vezes precisa da ajuda de uns amigos, mas vence kkkk)

Bacana..
Se não estivesse atolado de coisas iria começar um curso..

Eu acredito que tudo seja um bicho de 7 cabeças.. quando a pessoa não tem interesse em aprender 'aquilo'..

Quando a pessoa tem um interesse, pode ser complicado no começo, mas se aprende até rápido...

Indo desde aprender um simples código JS, entender a sedução, entender as moléculas.. ou até arranjar um trabalho....
Precisa ter interesse no que se vai fazer..