...
Deck of Cards |
---|
|
Card |
---|
| - Abrir a ferramenta de desenvolvedor no seu browser
- No Chrome ou Firefox pressionar F12
|
Card |
---|
| - 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.
Painel |
---|
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. |
Nota |
---|
| 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: Bloco de código |
---|
$(element).blur(function() {}); |
Como deve ser escrito agora: Bloco de código |
---|
$(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.
Painel |
---|
borderColor | #f2f2f2 |
---|
bgColor | #f2f2f2 |
---|
|
Exemplos de código que não estão mais compatíveis Painel |
---|
borderColor | #000000 |
---|
bgColor | #f2f2f2 |
---|
| - Trocar $('<div/>') para $('<div></div>')
Como era antes $('<div/>') Como deve ficar $('<div></div>') |
Painel |
---|
borderColor | #000000 |
---|
bgColor | #f2f2f2 |
---|
| - Trocar .size() para .length
Como era antes $('.selector1).size() Como deve ficar $('.selector').length |
Painel |
---|
borderColor | #000000 |
---|
bgColor | #f2f2f2 |
---|
| - Trocar $.parseJSON para JSON.parse
Como era antes $.parseJSON(data); Como deve ficar JSON.parse(data); |
Painel |
---|
borderColor | #000000 |
---|
bgColor | #f2f2f2 |
---|
| - $(function) não é mais assíncrono
$(function () { console.log('ready'); }); console.log('outside ready'); |
Painel |
---|
borderColor | #000000 |
---|
bgColor | #f2f2f2 |
---|
| - Trocar .load() para .on(‘load’) e trocar .unload() para .on(‘unload’)
Como era antes $('<IFRAME-SELECTOR>').load(...) Como deve ficar $('<IFRAME-SELECTOR>').on('load',...) |
Painel |
---|
borderColor | #000000 |
---|
bgColor | #f2f2f2 |
---|
| - Trocar .load() para .on(‘load’) e trocar .unload() para .on(‘unload’)
Como era antes $('<IFRAME-SELECTOR>').load(...) Como deve ficar $('<IFRAME-SELECTOR>').on('load',...) |
Painel |
---|
borderColor | #000000 |
---|
bgColor | #f2f2f2 |
---|
| - 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') |
Painel |
---|
borderColor | #000000 |
---|
bgColor | #f2f2f2 |
---|
| - 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)
Dica |
---|
Para mais informações acesse o release notes oficial do jQuery |