Embed Size (px)
DESCRIPTION
Mini-curso desenvolvido por programadores da ODIG Soluções Digitais com o objetivo de disseminar conhecimentos e capacitar a equipe.
Citation preview
DOM - Document Object ModelCriado 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;
DOM - Document Object ModelEsta 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.
DOM - Document Object ModelCaso 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;
DOM - Document Object ModelIsso 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.
ReflowsReflow é 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.
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;
RepaintRepaint é 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.
DOM - Document Object ModelMexer 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
ECMAScriptECMAScript é 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.
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;
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
JavaScript - Boas Práticasuse: function(){
var x = 0, y;if(x > 1)
y = 'Javascript';}
ao invés de:function(){
var x = 0;if(x > 1)
var y = 'Hoisting';}
JavaScript - Boas Práticasconsole.log() Envia mensagens;console.dir() Registra um objeto navegável;console.warn() Registra warnings;console.error() Registra msg de erro;
Framework jQueryjQuery é um framework, é uma abstração que une códigos comuns para prover uma funcionalidade genérica;
jQuery 1.8.0 - ChangeLogMELHORADOAgora é 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)
jQuery - Iniciando$(document).ready(function() {console.log('pronto!');});$(function() {console.log('pronto!');});
$ == jQueryvar meujQuery = jQuery.noConflict();var meujQuery = $.noConflict();(function($) {
// seu código aqui, usando o $})(jQuery);
$.fn.jquery == "1.8.0"
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
jQuery UIjQuery 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;
jQuery MobileWeb 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.
