Índice
Este guia tem por objetivo auxiliar os usuários a seguir o passo a passo necessário para identificação dos pontos onde é necessária a revisão e atualização do código, por conta da atualização de libs que tivemos, Mais uma medida para reforçar ainda mais a segurança do Fluig.
Identificação do que precisa ser ajustado
Com a inclusão do plugin de migração do jQuery, no console do navegador são exibidas mensagens que vão auxiliar neste processo.
- Abrir a ferramenta de desenvolvedor no seu browser
- No Chrome ou Firefox pressionar F12
- Na ferramenta de desenvolvedor, acionar a aba Console
- Nesta aba serão exibidos os logs da página. Todos os log que possuem o prefixo 'JQMIGRATE: ...' exigem a atenção.
As mensagens apresentadas no log após a inclusão do plugin de migração, estarão disponíveis apenas enquanto o plugin estiver instalado. Nas atualizações futuras iremos remover este plugin fazendo com que essas mensagens no log não sejam mais apresentadas.
Atenção
O Fluig também está passando por esse processo de atualização, então é possível que alguns desses LOG's sejam do próprio código do Fluig. Estes não exigirão sua atenção.
Exemplo de LOG que pode ser exibido: “JQMIGRATE: jQuery.fn.blur() event shorthand is deprecated” (Isto diz que este código já não é mais compatível)
Como era escrito antes:
$(element).blur(function() {});
Como deve ser escrito agora:
$(element).on('blur', function() {});
E como encontrar esses impactos?
Primeiramente, você precisa identificar todas as mensagens que estão como "is deprecated" e caso seja plugins ou libs não precisam ser tratadas nesse momento, porém exigem atenção no futuro.
Exemplos de código que não estão mais compatíveis
- Trocar $('<div/>') para $('<div></div>')
Como era antes
$('<div/>')
Como deve ficar
$('<div></div>')
- Trocar .size() para .length
Como era antes
$('.selector1).size()
Como deve ficar
$('.selector').length
- Trocar $.parseJSON para JSON.parse
Como era antes
$.parseJSON(data);
Como deve ficar
JSON.parse(data);
- $(function) não é mais assíncrono
$(function () {
console.log('ready');
});
console.log('outside ready');
- Trocar .load() para .on(‘load’) e trocar .unload() para .on(‘unload’)
Como era antes
$('<IFRAME-SELECTOR>').load(...)
Como deve ficar
$('<IFRAME-SELECTOR>').on('load',...)
- Trocar .load() para .on(‘load’) e trocar .unload() para .on(‘unload’)
Como era antes
$('<IFRAME-SELECTOR>').load(...)
Como deve ficar
$('<IFRAME-SELECTOR>').on('load',...)
- Deprecied: trocar .click() para escutar evento .on(‘click’) e disparar evento .trigger(‘click’)
Como era antes
$('.selector').click(...)
Como deve ficar
$('.selector').on('click',...)
$('.selector').trigger('click')
- Deprecated: trocar .bind para .on
- Deprecated: trocar .unbind para .off
Como era antes
$('.selector').bind('click',...)
Como deve ficar
$('.selector').on('click',...)
Mais alguns pontos de atenção
Bibliotecas de terceiros escritas em jQuery podem trazer impactos na atualização. Confira alguns exemplos:
- jquery.mask.js
- jquery.treeview.js
- jquery.fileupload.js
Esses plugins podem não estar compatíveis com a nova versão. Caso seja esse o cenário, temos algumas opções:
- Atualizar o plugin para uma versão mais recente compatível com a versão 3.x (mais recomendado)
- Alterar o código fonte do plugin (menos recomendado)
Para mais informações acesse o release notes oficial do jQuery