O que há de novo no jQuery 3 - 10 Coolest Features
jQuery 3.0, o novo lançamento principal do jQuery finalmente foi lançado. A comunidade de desenvolvedores web esperou por essa importante etapa desde outubro de 2014, quando a equipe da jQuery começou a trabalhar na nova versão principal até junho de 2016, quando a último lançamento está fora.
A nota de lançamento promete mais magro e mais rápido jQuery, com compatibilidade com versões anteriores em mente. Neste post, vamos dar uma olhada em alguns dos novos recursos do jQuery 3.0 para dar uma visão geral sobre como ele muda o cenário do JavaScript.
Onde começar
Se você deseja baixar o jQuery 3.0 para experimentar por si mesmo, vá direto para a página de download. Também vale a pena dar uma olhada no Guia de atualização ou no código-fonte.
Se você quiser testar como o seu projeto existente funciona com o jQuery 3.0, você pode tentar o plugin jQuery Migrate que identifica problemas de compatibilidade em seu código. Você também pode dar uma olhada nos futuros marcos.
Este artigo não cobre todos os novos recursos do jQuery 3.0, apenas os mais interessantes: melhor qualidade de código, integração de novos recursos do ECMAScript 6, uma nova API para animações, um novo método para escape de strings, maior suporte a SVG, melhor retorno de chamadas assíncronas, melhor compatibilidade com sites responsivos e maior segurança.
1. Soluções antigas do IE foram removidas
Um dos principais objetivos do novo grande lançamento foi fazer com que mais rápido e mais elegante, portanto, os hacks antigos e soluções alternativas relacionadas ao IE9- foi removido. Isso significa que, se você quiser ou precisar dar suporte ao IE6-8, terá que continuar usando as últimas 1,12 lançamento, como até mesmo o 2.x série não tem suporte total para Internet Explorers mais antigos (IE9-). Confira as notas sobre o suporte ao navegador nos documentos.
Note que também existem muitos recursos obsoletos em jQuery 3. Uma grande desvantagem do Guia de atualização é que os recursos preteridos - a partir de junho de 2016 - não estão agrupados. Portanto, se você tiver interesse neles, precisará pesquisá-los com a ferramenta de pesquisa do seu navegador ( Ctrl + F.
2. jQuery 3.0 é executado no modo estrito
Como a maioria dos navegadores suportados pelo jQuery 3 suporta o modo estrito, a nova versão principal foi criada com esta diretiva em mente.
Embora o jQuery 3 tenha sido escrito em modo estrito, é importante saber que seu código não é necessário para ser executado no modo estrito, então você não precisa reescrever seu código jQuery existente se você quiser migrar para jQuery 3. JavaScript estrito e não estrito pode coexistir feliz.
Há uma exceção: algumas versões do ASP.NET que - por causa do modo estrito - são não compatível com jQuery 3. Se você está envolvido com o ASP.NET, você pode dar uma olhada nos detalhes aqui nos documentos.
3. Para… de Loops é Introduzido
O jQuery 3 suporta o for… of statement, um novo tipo de para loop, introduzido no ECMAScript 6. Ele fornece uma maneira mais direta de loop sobre objetos iteráveis, como matrizes, mapas e conjuntos.
Em jQuery, o para de loop pode substituir o antigo $ .each (...) sintaxe, e pode facilitar o loop através dos elementos de uma coleção jQuery.
Note que o para de loop vai apenas trabalho ou em um ambiente que suporta ECMAScript 6, ou se você use um compilador JavaScript como Babel.
4. Animações tem uma nova API
O jQuery 3 usa a API requestAnimationFrame () para executar animações, fazendo animações correr mais suave e mais rápido. A nova API é usada apenas em navegadores que a suportam; para navegadores mais antigos (ou seja, IE9) jQuery usa sua API anterior como um método de fallback para exibir animações.
RequestAnimationFrame está fora por um tempo, se você está interessado no que sabe ou porque você deve usá-lo, CSS Tricks tem um bom post sobre isso.
5. Novo método para escapar de strings com significado especial
O novo jQuery.escapeSelector () método permite que você escape de strings ou caracteres que significa outra coisa em CSS a fim de poder use-o em um seletor de jQuery; sem escapar do intérprete JavaScript não pode entendê-lo corretamente.
Os documentos nos ajudam a entender melhor esse método com o seguinte exemplo:
“Por exemplo, se um elemento na página tiver um id de “abc.def” não pode ser selecionado com $ ("# abc.def") porque o seletor é analisado como “um elemento com id 'abc' que também tem aula 'def'. No entanto, pode ser selecionado com $ ("#" + $ .escapeSelector ("abc.def")).”
Não sei com que frequência esse caso acontece, mas se você topar com um problema como este, agora você tem uma maneira fácil de corrigi-lo rapidamente.
6. Métodos de Manipulação de Classe Suporte SVG
Infelizmente, o jQuery 3 ainda não suporta totalmente o SVG, mas os métodos jQuery que manipulam nomes de classes CSS, como .addClass () e .hasClass (), agora pode ser usado para documentos SVG de destino também. Isso significa que você pode modificar (adicionar, remover, alternar) ou encontrar classes com jQuery em gráficos vetoriais escaláveis, em seguida, estilize as classes com CSS.
7. Objetos adiados agora são compatíveis com promessas JS
Promessas JavaScript - objetos usados para cálculos assíncronos - foram padronizados no ECMAScript 6; seu comportamento e características são especificados nos padrões Promises / A +.
Na jQuery 3, Objetos diferidos foram compatíveis com os novos padrões Promises / A +. Os diferidos são objetos de corrente que tornam possível criar filas de retorno.
O novo recurso muda como as funções de retorno de chamada assíncronas são executadas; Promessas permitir que os desenvolvedores escrevam código assíncrono que seja mais próximo na lógica do código síncrono.
Veja exemplos de código no Guia de atualização ou, veja este ótimo tutorial sobre as noções básicas de JavaScript Promises..
8. jQuery.when () interpreta multi-argumentos de forma diferente
o $. quando () método fornece uma maneira de executar funções de callback. Faz parte do jQuery desde a versão 1.5. É um método flexível. ele também funciona com zero argumentos e pode aceitar um ou mais objetos como argumentos também.
jQuery 3 muda a maneira como os argumentos de $. quando () são interpretados quando eles contêm o $ .then () método com o qual você pode passar retornos de chamada adicionais como argumentos para o $. quando () método.
No jQuery 3, se você adicionar um argumento de entrada com o então() método para $. quando (), o argumento será interpretado como um "razoável" compatível com a Promessa.
Isso significa que o $ .quando método será capaz de aceitar uma gama de inscrições de pensionista, como promessas ES6 nativas e promessas Bluebird, que torna possível escrever retornos de chamada assíncronos mais sofisticados.
9. Nova Lógica Show / Hide
Para aumentar compatibilidade com design responsivo, o código relacionado a mostrando e escondendo elementos foi atualizado no jQuery 3.
De agora em diante, o .exposição(), .ocultar(), e .alternancia() métodos incidirá sobre estilos inline, em vez de estilos computados, dessa forma eles melhor respeitar as alterações na folha de estilo.
O novo código respeita o exibição valores de folhas de estilo sempre que possível, o que significa que as regras CSS podem mudar dinamicamente em eventos como reorientação de dispositivos e redimensionamento de janelas.
Os documentos afirmam que o resultado mais importante será:
"Como resultado, os elementos desconectados são não mais considerado oculto a menos que eles tenham inline Mostrar nenhum;, e, portanto, .alternancia() vai não os diferencie mais de elementos conectados a partir do jQuery 3.0. "
Se você quiser entender melhor o resultados da nova lógica show / hide, aqui está uma discussão interessante sobre o Github.
Os desenvolvedores do jQuery também publicaram uma tabela do Google Docs sobre como o novo comportamento funcionará em diferentes casos de uso.
10. Proteção extra contra ataques XSS
jQuery 3 adicionado uma camada extra de segurança contra ataques Cross-Site Scripting (XSS), exigindo que os desenvolvedores especifiquem dataType: "script" nas opções do $ .ajax () e a $ .get () métodos.
Em outras palavras, se você deseja executar solicitações de script entre domínios, deve declarar isso nas configurações desses métodos.
De acordo com os documentos, o novo requisito é útil quando um "site remoto" entrega conteúdo não roteiro mas depois decide servir um script que tenha intenções maliciosas". A mudança não afeta o $ .getScript () método, como define o dataType: "script" opção explicitamente.
