Penso no Jquery
como um Framework JavaScript
com intuito de otimizar a escrita, o Ajax
é um bom exemplo.
- Além da escrita facilitada, existe diferença entre ambos?
- Quais as vantagens e desvantagens em usar jQuery?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePenso no Jquery
como um Framework JavaScript
com intuito de otimizar a escrita, o Ajax
é um bom exemplo.
jQuery é JavaScript.
Ou seja jQuery é uma biblioteca escrita/construida com a linguagem JavaScript.
Existem duas razões principais para ter uma biblioteca como jQuery:
Pensando na biblioteca jQuery como uma ferramenta para facilitar a vida ao programador, a ideia é poupar trabalho, em extensão de código necessário escrever e minimizar possiveis erros.
Por exemplo uma chamada ajax para ir buscar um JSON seria assim em jQuery:
$.getJSON('/o/meu/url', function(data) {
});
para fazer o mesmo em JavaScript nativo seriam precisas mais linhas:
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// tudo correu bem!
var data = JSON.parse(request.responseText);
// aqui é o mesmo que o interior do exemplo com jQuery
} else {
// este pedaço é corrido se houver algum erro
}
};
request.onerror = function() {
// este pedaço é corrido se houver algum erro
};
request.send();
Na prática o jQuery tem essas linhas todas escritas na sua biblioteca (no ficheiro JavaScript que temos de carregar com a página) mas mostra ao programador somente os métodos que constrói e simplificam as coisas como mostrei no primeiro exemplo.
jQuery nem sempre é preciso, aliás já não é tão importante como foi em tempos. Um site interessante com funcionalidades comuns que se fazem bem em JavaScript nativo hoje em dia: http://youmightnotneedjquery.com/
Quando programamos uma aplicação, e os utilizadores usam o nosso programa em browsers diferentes corremos o risco de o JavaScript que escrevermos não funcionar em alguns browsers. Isto porque cada um implementa as coisas com ligeiras diferenças, ou porque uns são mais modernos que outros. O papel de bibliotecas como o jQuery é criar uma camada de abstração para só usarmos a sua API, e não JavaScript nativo. Assim, dentro da biblioteca, fazem-se as correções e ajustes necessários para um código jQuery como $(document).on('click', ...
seja decomposto no JavaScript que um dado browser entende e proporcionar a mesma funcionalidade.
Um exemplo clássico é a maneira de amarrar auscultadores de eventos nas versões antigas do Internet Explorer.
A maneira moderna é elemento.addEventListener
mas o IE tinha elemento.attachEvent
. Para evitar escrever uma data de código como este (fonte):
//addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
if(win.addEventListener)return; //No need to polyfill
function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
function addEvent(on, fn, self){
return (self = this).attachEvent('on' + on, function(e){
var e = e || win.event;
e.preventDefault = e.preventDefault || function(){e.returnValue = false}
e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
fn.call(self, e);
});
}
function addListen(obj, i){
if(i = obj.length)while(i--)obj[i].addEventListener = addEvent;
else obj.addEventListener = addEvent;
return obj;
}
addListen([doc, win]);
if('Element' in win)win.Element.prototype.addEventListener = addEvent; //IE8
else{ //IE < 8
doc.attachEvent('onreadystatechange', function(){addListen(doc.all)}); //Make sure we also init at domReady
docHijack('getElementsByTagName');
docHijack('getElementById');
docHijack('createElement');
addListen(doc.all);
}
})(window, document);
usamos jQuery, que tem mais ou menos isso dentro do seu ficheiro .js
e usamos a sua camada de abstração (API) que fica somente:
$(elemento).on('nome-do-evento', ...
Mais informação:
addEventListener
. Eu achava que a maneira que as empresas de Browsers escrevem seus js
seguiam um padrão. Então posso dizer que o jQuery é mais do que necessário?
JavaScript
é uma linguagem, enquanto jQuery
é uma biblioteca focada na manipulação de elementos do DOM. Bibliotecas são feitas com base em uma linguagem e frameworks são feitos geralmente com base em uma biblioteca.
O que acontece é que o javascript
é uma linguagem antiga e o desenvolvimento com ela é um pouco trabalhosa e as vezes é necessário escrever muito código. Então o jQuery
é um framework, ou seja, é o próprio javascript
redefinido de uma maneira mais moderno, simples de usar e com o uso de menos código.
Uma diferença que deve ser destacada é de que o JavaScript
roda nativamente no browsers enquanto que para o jQuery
deve ser adicionada uma referência a sua biblioteca no HTML.Por exemplo:
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
Acesso direto a qualquer componente do DOM, ou seja, não há necessidade de várias linhas de código para acessar determinados pontos no DOM.
O uso de regras de estilo não sofre qualquer tipo de limitação devido as inconsistências dos navegadores. Mesmo os seletores CSS3 podem ser usados sem qualquer restrição.
Manipulação de conteúdos, sem limitações, com algumas poucas linhas de código. Suporte para toda a gama de eventos de interação com o usuário sem limitações impostas pelos navegadores.
Possibilidade de inserir uma grande variedade de efeitos de animação com uma simples linha de código.
Uso simplificado e sem restrições com AJAX e linguagens de programação, como PHP e ASP.
Simplificação na criação de scripts.
Emprego cross-browser.
É possível selecionar elementos com maior facilidade, maior
compatibilidade, e com menos código. Veja um exemplo de um codigo em JavaScript
e do mesmo em jQuery
:
- Em JavaScript:
var botao = document.getElementById("botao");
if (botao.attachEvent) {
botao.attachEvent("onclick", function(event) {
alert("Você clicou no botão, usuário do IE!");
});
} else if (botao.addEventListener) {
botao.addEventListener("click", function(event) {
alert("Você clicou no cabeçalho!")
}, false);
}
<button type="button" id='botao'>Clique</button>
- Em jQuery:
$("#botao").click(function (event) {
alert("Você clicou no botao!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id='botao'>Clique</button>
Note como a sintaxe do jQuery é bem menor.
jQuery
tem perda de performance. Esse tipo de perda é inerente a quaisquer abstrações, mas é acentuado pela quantidade de recursos extras envolvidos.
A implementação em si também é menos otimizada quando comparada a
implementações que já vem do próprio core do Javascript. É bom evitar a
utilização de jQuery, pelo menos, em loops muito extensos ou aninhados
onde uma penalidade de performance pode se multiplicar ou até crescer
exponencialmente.
jQuery
é uma biblioteca, então possui outros concorrentes. Se você
estiver usando um framework como o Angular que possui o seu próprio
jqLite, não haverá necessidade de usar jQuery. Saber JavaScript,
entretanto, sempre será útil.
Referências:
otimizar a escrita
Nem sempre.....