Índice
| Índice |
|---|
| maxLevel | 4 |
|---|
| outline | true |
|---|
| exclude | .*ndice |
|---|
| style | none |
|---|
|
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.
| 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 |