Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Javascript, DOM e jQuery

Javascript, DOM e jQuery

Tonin Bolzan

June 03, 2013
Tweet

More Decks by Tonin Bolzan

Other Decks in Programming

Transcript

  1. DOM - Document Object Model Criado pelo W3C, O DOM

    é uma API independente de linguagem que representa como as marcações em HTML e XML são organizadas; Disposto em forma de árvore; Nos navegadores a API é JavaScript; Manipular o layout HTML é manipular o DOM;
  2. DOM - Document Object Model Esta estrutura não é o

    que se "vê" (o layout em si); O DOM é a base para uma outra árvore que é o que realmente um browser monta na tela, a Árvore de Renderização (Render Tree); Render Tree possui também objetos que não possuem nós na árvore DOM, como scripts e folhas de estilos.
  3. DOM - Document Object Model Caso um elemento da árvore

    DOM tenha uma propriedade "display:none", este elemento e seus nós filhos não serão criados na Render Tree. Ao contrário do uso de "visibility:hidden"; O DOM tem um comportamento ligeiramente diferente com páginas HTML5;
  4. DOM - Document Object Model Isso acontece por que, quando

    o browser não reconhece um elemento, ele posiciona o elemento desconhecido como um nó filho de <BODY>. Por isso devemos usar modernizr ou HTML5shiv, para que o browser reconheça elementos HTML5 e monte a árvore DOM corretamente.
  5. Reflows Reflow é o resultado de um evento que desencadeia

    mudanças na disposição dos elementos de uma página, modificando a maneira como ela vai ser renderizada na página. Esse processo toma tempo para o cálculo e reposicionamento dos elementos.
  6. O que causa os Reflows • Atualizar, remover ou atualizar

    o DOM; • Esconder nós com display: none; • Mover ou animar o DOM na página; • Adicionar CSS que mude o comportamento dos elementos; • Redimensionar janelas; • Alterar tamanho de fontes;
  7. Repaint Repaint é o resultado de um evento que desencadeia

    mudanças na apresentação dos elementos de uma página sem alterar a disposição do elementos. Ao contrário do Reflow, o Repaint não modifica a posição dos elementos na página.
  8. DOM - Document Object Model Mexer no DOM é "caro",

    pois causa Reflows e/ou Repaints, mas principalmente pelo DOM ser uma API independente; Temos uma ponte para atravessar com um pedágio aonde o preço é dado em desempenho; DOM --------------------- JavaScript
  9. ECMAScript ECMAScript é uma linguagem de programação baseada em scripts,

    padronizada pela Ecma Internacional na especificação ECMA-262. Javascript, JScript e ActionScript não são nada mais que dialetos de ECMAScript.
  10. JavaScript - Boas Práticas • Sempre utilize "var" para declarar

    variáveis; • Variáveis locais são acessadas mais rápidamente; • Evite a instrução "with"; • Evite o uso de loops "for-in", a menos que necessário; • Evite ao máximo o uso de "eval"; • Use "[]" e "{}" ao invés de "new Array()" e "new Object()"; • Sempre minifique o script que irá para a produção;
  11. use: for(var i=0, l=vetor.length ; i<l ; i++); ao invés

    de: for(var i=0 ; i<vetor.length ; i++); e se der: for(var i=vetor.length ; i-- ; ); JavaScript - Boas Práticas
  12. JavaScript - Boas Práticas use: function(){ var x = 0,

    y; if(x > 1) y = 'Javascript'; } ao invés de: function(){ var x = 0; if(x > 1) var y = 'Hoisting'; }
  13. JavaScript - Boas Práticas console.log() Envia mensagens; console.dir() Registra objetos

    navegáveis; console.warn() Registra warnings; console.error() Registra msg de erro;
  14. Framework jQuery jQuery é um framework, é uma abstração que

    une códigos comuns para prover uma funcionalidade genérica;
  15. jQuery 1.8.0 - ChangeLog MELHORADO Agora é modularizado: pode-se remover

    módulos ajax, css, effects, etc...; Sizzle reestruturado: motor de seletores mais rápidos; Atualizaram e limparam o código de animações da biblioteca; Prefixos CSS, como -webkit, -moz e -ms são adicionados automaticamente; IE 6,7 e 8 continuam a ser suportados, teve mais de 160 correções de bugs; O tamanho total da nova versão diminuiu algumas centenas de bytes; REMOVIDO $(element).closest(Array) retornando Array (Usado para o ".live()") $.curCSS : Era um alias para jQuery.css() $.attrFn : Utilizada para definir quais os métodos podem ser usados em conjunção com $(html, props)
  16. jQuery - Iniciando $(document).ready(function() {console.log('pronto!');}); $(function() {console.log('pronto!');}); $ == jQuery

    var meujQuery = jQuery.noConflict(); var meujQuery = $.noConflict(); (function($) { // seu código aqui, usando o $ })(jQuery); $.fn.jquery == "1.8.0"
  17. jQuery - Boas Práticas $('#id').filter('ul li') ao invés de $('#id

    ul li') $('.data td.gonzalez') ao invés de $('div.data .gonzalez') $('.data td.teste') ao invés de $('.data table.blabla td.teste') $('.buttons').children() ao invés de $('.buttons > *') $('.gender input:radio') ao invés de $('.gender :radio') .on() ao invés de .live() .bind() .delegate() .on('click',function(){}) ao invés de .click(function(){}) .trigger('click') ao invés de .click() $.GET deve ser usado para operações não-destrutivas $.POST deve ser usado para operações destrutivas
  18. jQuery UI jQuery UI (User Interface) é uma extensão do

    framework jQuery que fornece funcionalidades de interface com o usuário, como animações, efeitos, temas, etc. Algumas funcionalidades: Widgets - accordion, datepicker, dialog, progress bar, slider, tabs; Interações - draggable, droppable, resizable, sortable, selectable;
  19. jQuery Mobile Framework Javascript criado sobre os frameworks jQuery e

    jQuery UI voltado para Smartphones e Tablets (otimizado para eventos de toque). Suporte a temas e vários widgets comuns em interfaces de dispositivos móveis.