Fichas
jQuery Tips and Tricks
Fichas del conjunto (37)
- 1Quais são os beneficios de se utilizar um CDN (Content Delivery Network)?- Caching de Scripts, então se a pessoa que está acessando seu site já visitou outro site anteriormente com o mesmo cdn que o seu, é bem provavel que esses arquivos já estejam no cache do browser o que deixe a navegação ainda mais rápida.
- Support para http:// e https://. Lembrar de não definir o protocolo para que ele seja passado automaticamente de acordo com o protocolo do site que fez a request. src="//cdn.link" - 2Como fazemos fallbacks para CDN's? Caso eles não sejam carregados, carregamos os arquivos localmente.Adicionamos isso abaixo do nosso CDN, o que ele vai fazer é verificar se existe window.jQuery, se não existir ele vai fazer o document.write que é incluir o jquery de arquivos locais.
window.jQuery || document.write(''); - 3O que é e como fazemos para utilizar caching e chaining em nosso jQuery code?Caching consite na pratica de não fazer multiplas queries em nosso scritps, sempre que precisamos chamar um elemento mais de uma vez em nossos script devemos criar uma variável para ele, para que ele fique armazenado e possa ser reutilizado.
chaining é a tecnica de não chamar a variável multiplas vezes para ações seguidas, então no lugar de termos:
$('.display').addClass('processed');
$('.display').fadeIn(500);
vamos criar uma variavel para fazer o caching:
var display = $('.display');
display.addClass('processed')
.fadeIn(500);
então para fazer o processo de chaining nos não terminamos a linha com ';', nos pulamos a linha e adicionamos .metodo(); dessa forma a ação será feira no ultimo elemento em executação. - 4Como podemos definir o contexto em seletores ?Podemos fazer isso de duas formas:
var emailDiv = $('#emailContainer');
getPanels(emailDiv);
function getPanels(containerDiv) {
var panels = containerDiv.find('.panel');
}
dessa forma nossa containerDiv provem o contexto da nossa busca, podemos também passar como segundo parâmetro.
var panels = $('.panel', containerDiv ) - 5Como fazemos para criar nosso proprio pseudo seletor em jQuery ? como :odd :even :checked...Na primeira linha estamos basicamente dizendo ao jQuery que queremos criar nosso seletor:
$.extend($.expr[":"], {
hasArialFont: function(element) {
return $(element).css("font-family") === "Arial";
}
});
Na função que criamos, o nome do método é o nome de como chamamos nosso pseudo seletor, toda vez que ele for chamado ele vai performar essa função no elemento ao qual ele está atrelado, então agora podemos utilizar nosso método:
$('div:hasArialFont').click(function(){
alert("element has Arial font");
}); - 6Porque e como devemos limitar o número de interações que o jQuery faz com o DOM?Dependendo do tamanho do conjunto de dados, utilizar algumas técnicas de limitação de interações pode ajudar a diminuir o tempo de carregamento em segundos.
2 técnicas - exemplo, existem outras -
var divs = "";
for (var i = 0; i < total; i++) {
divs += '' + i + '
';
}
$('#emailList').html(divs);
OU
var divs = []; -
DENTRO DO LOOP
divs.push('' + i + '
');
FORA DO LOOP
Então APÓS o loop nos adicionamos ao DOM, isso diminui e muito o numero de interações dependendo do tamanho do conjunto de dados o que torna nosso script mais rapido:
$('#targetDiv').html(divsjoin("")); - 7Como podemos verificar se um elemento existe em jQuery?var link = $('#mainLink');
if (link.length) {
//element exists
} else {
//element don't exist
} - 8Como fazemos para criar uma função ou método que podemos utilizar em nosso jQuery?jQuery.fn.exists = function() {
return this.length > 0;
}
Dessa forma criamos a função .exists(), que retorna se um elemento está vazio ou não, por exemplo. - 9Quando usamos .filter() ao invés de .find()?Elijah
Elijah
Elijah
var $names = $('#people li');
var $pubs = $names.find('.publisher');
// Não vai retonar nada, por que find busca PELOS FILHOS do ELEMENTO ALVO.
var $pubs2 = $names.filter('.publisher');
// Returna todos os elementos li com a classe publisher, porque filter vai avaliar todos os elementos que estão no array. - 10Porque quando atribuímos uma variável a um elemento jQuery devemos utilizar o '$' na frente?Apenas para boas praticas, para deixar já uma 'dica' de que esse elemento já é uma seleção jQuery, então vamos ter:
var $my_div = $('div');
var $paragraph = $('p');
e assim por diante. - 11Quando trabalhamos com function chanining devemos como podemos ir de um contexto para outro contexto, qual função podemos utilizar?Utilizamos o método .end, então quando estamos fazendo chaning :
$('
')
.find('span') //get to span
.attr('title', cust.name)
.data(cust)
.end() //get back to span's parent div
.appendTo('#divContainer'); - 12O que podemos fazer para fazer multiplas modificações no .attr() atributo sem precisar chamar multiplas vezes o método ?Podemos utilizar um javascript object com todas as configurações que precisamos e passar para o método attr():
$('a.main').attr({
"href" : "value",
"title", "value2"
}); - 13Como podemos fazer um event handler para mouse enter e mouse leave e identificar em nosso método toggleClass em qual momento é para adicionar a classe e qual momento é para remover a classe.$('div').on('mouseenter mouseleave', function(e) {
$(this).toggleClass('highlight', e.type === 'mouseenter');
// e.type = "mouseenter", identifica o momento que devemos adicionar a classe - caso esteja acontecendo algum comportamento inexperado.
}); - 14como podemos ver se um elemento contém ou não algum event handler no google dev tools ?Utilizamos o método:
jQuery.data($0, 'events');
$0 é o elemento selecionado em questão, mas também podemos selecionar manualmente. - 15O que acontece quando retornamos 'false' em um event delegation?return false é e.preventDefault() e e.stopPropagation();
// É desencorajado o uso de return false, devemos sempre ser o mais descritivo possível em nosso codigo. - 16O que e.stopPropagation(); faz?ele para todas as outras instancias de eventos relacionados ao elemento.
- 17Porque as vezes é interessante adicionar eventos antes do DOM ficar READY?- Mesmo antes do DOM ficar pronto nos podemos delegar eventos ao 'documento'.
- Essa técnica utiliza o tempo perdido entre o carregamento do jQuery e o loading do DOM.
$(document).on('click', '#members li a', function(){
});
Assim utilizamos o tempo para já carregar alguns manipuladores de eventos. - 18Quando queremos fazer uma função reutilizável em jQuery, como podemo utilizar o $this do elemento selecionado?O que podemos fazer são 2 processos, se temos uma função dentro de um protypo o this a qual ela vai se referir não vai ser o objeto em questão mais sim o elemento do DOM que gerou isso, para alterar o 'this' podemos utilizar 2 tecnicas no prototype, a primeira é definir o this antes da função para utilizar a variavel this fora do contexto da função.
Outra solução possível é utilizar o método $.proxy() para redefinir o valor do this na hora de chamar a função event handler. - 19Como fazemos para criar e utilizar custom events em jquery?Nos utilizamos .on('customName'), o nome pode ser qualquer coisa que não esteja reservado a linguagem.
para ativar esse evento que criamos devemos utilizar o método .trigger(); - 20Como podemos verificar o input do usuario ?devemos passar como parâmetro em nosso event handler function(e);
então poderemos utilizar:
e.which; //return the key pressed for the user.
e.altKey, e.ctrlKey, e.shiftKey, verifica se alguma dessas teclas foi precionada.
Para verificar o posicionamento do mouse em uma localização na pagina, na tela ou relativo a um elemento, vamos ter os seguintes métodos:
(e.pageX, e.pageY);
(e.screenX, e.screenY);
(e.offsetX, e.offsetY); - 21Como podemos aproveitar o tempo e melhorar o desempenho do nosso site com 'Just in Time Initialization'?Aqui nos vamos buscar se existe algum 'sinalizador' de que será necessário algum event handler ou algo do gênero.
por exemplo se temos um datapicker
em nosso document.ready function, mas ele só precisa carregar quando o usuario clickar no elemento input, então podemos manipular o evento para que ele só seja carregado nesse momento.
$(document).on('focus', 'input.data:not(.hasDatapicker)', function) - 22O que é uma 'promise' in ajax?Uma 'promise' é um objeto que ajuda a lidar com diferentes resultados, essas promises são tipicamente utilizadas em asynchrounous operations.
Um cenário exemplo para usar uma promise:
1) O cliente chama uma função asynchronous nomeada de getAccount()
2) getAccount() imediatamente retorna um objeto promise
3) O cliente usa o objeto promise para ativar um sucess/error callback function
4) get_Account() continues to execute in the background
5) Client callback(s) roda uma vez que getAccount() retorne os resultados. - 23Cite exemplos de utilização de 'promises'?function getCustomers() {
return $.getJSON('http://localhost/api/customers');
}
getCustomers()
.done(function(){
//process data
})
.fail( function(data) { alert(data.statusText);
});
um método:
podemos utilizar também no lugar de .done() ou .fail() o .then(fuctionDONE(){}, functionFAIL() ); passando 2 funções como parâmetro a primeira para a request efetuada com exito e a segunda para a request efetuada com erro, essas requests manipulam a resposta 'promice' - 24Como podemos fazer o refactoring de uma $.getJSON() para utilizar promices?getCustomerData = function(){
return $.getJSON(urlBase);
}
getCustomer = function(){
getCustomerData()
.done(function(customer){
})
}
.fail(function(){
aleart('Unable to get customers');
})
// Assim então adicionamos nosso manipulador de eventos.
$('element').on('click', function(){
getCustomer();
}); - 25Como podemos fazer o refactoring de uma $.ajax({}) para utilizar promices?Primeiramente temos nosso manipulador de eventos:
$('#update_customer').on('click', function(){
updateCustomer();
});
updateCustomerData = function(cust) {
return $.ajax({
url: urlBase + '/' + cust.ID,
data:cust,
type: 'PUT'
});
}
var updateCustomer = function(){
var cust = {
ID: 2,
FistName: "Victor",
LastName: "Bini" };
}
//Passamos nossos dados na função
updateCustomerData(cust)
.done()
.fail(function(jqXHR, textStatus, err) {
})
} - 26O que é e como podemos utilizar os métodos de multiplas $.ajax() em jQuery?$.when( ajaxCall1(), ajaxCall2(), ajaxCall3() )
.done(function (c1Data, c2Data, c3Data) {
//Process data
})
.fail(function(jqXHR, statusText, err){
//Handle error
});
Caso qualquer uma das 3 request do exemplo apresentem erro, ele vai rodar a promise para o .fail(); - 27Em uma $.when() conjunto de requests, como acessamos os dados que voltam de uma 'promice' bem sucedida?A promise retorna um array para cada request, entõa não podemos simplesmente acessar
.done(function(data1, data2 ){
data1.firstName; //Wrong
//Como ela retorna arrays:
data1[0].firstname vai retornar o correto, para acessar normalmente devemos definir uma nova variável para data1[0], assim podemos utilizar normalmente os dados.
}); - 28Como fazemos para enviar uma request com autenticação na header?authenticate = function (authToken) {
return $.ajax({
url: '/api/authentication',
type: 'POST',
beforeSend: function(request){
request.setRequestHeader('AuthToken', authToken);
}
});
}
//Assim o token que passamos como parametro para a request é passado na header para o servidor.
$('#targetItem').on('click', function(){
var authToken = "OKSA34032KJFOI";
authenticate()
.success(function(data, statusText, jqXHR) {
$('#targetElement')html(jqXHR.getResponseHeader('AuthToken'));
//Assim recebemos as informações do servidor
})
});
nossas promisses aqui serão um pouco diferentes. - 29Como podemos modificar os dados de uma AJAX request antes de ela responder com os dados?Criando uma AJAX Conversores
Conversores customizados devem ser adicionados globalmente em uma aplicação usando $.ajaxSetup();
$.ajaxSetup({
converters: {
'json jsond': function(data){
return data && data.hasOwnProperty("d") ? data.d : data; }
}
})
então em nossa AJAX request dataType: jsond;
na forma do exemplo nos estamos dizendo que qualquer dado que tenha propriedade d deve voltar só como dado, mas podemos fazer muito mais, eliminando itens desnecessários da request ou customizando a forma que eles vão chegar a nossa callback. - 30Se por exemplo vamos fazer uma AJAX request, e queremos fazer cache em alguns itens que não serão mostrados no momento, mais que podem vir a ser mostra-dos, como fazemos isso?atráves do método .data();
dentro da nossa promisse sucess:
awesoer
$variableHOLD.data('uniqueidentifier', datacoletion to be cached);
em outra função no momento que precisamos chamar esses dados:
var variablewithdata = $(this).data('uniqueIdentifier');
Assim podemos utilizar os arquivos cacheados no momento apropriado e evitar fazer uma segundo AJAX request. - 31Quais as melhores formas de acessar a propriedade 'data' no HTML5?.attr('dataName');
.attr('dataName', 'newValue');
//Attr é recomendado quando não queremos fazer cache dos dados.
.data('dataName');
.data('dataName', 'newValue');
//.data é recomendado quando queremos fazer cache dos dados. - 32.attr() vs .data()Quando usar attr():
- You want to get or set HTML5 data-* attribute values
- Attribute values need to be accessed as strings
Use data() quando:
- Você está ok com data-* atributos sendo colocados depois da primeira chamada do .data() - mas não depois disso.
- Você precisa fazer um cache de valores simples ou complexos
- Você quer date-* values serem automaticamente convertidos para um objecto javascript ( bool, number, object, etc. ..)
** O problema de modificar as variaveis ocorre quando mixamos os dois métodos, devemos uitlizar OU um OU OUTRO ! - 33Como funciona o método $.grep?Ele funciona como um buscador dentro de arrays exemplo:
var people = [
{"firstName": "John", "lastName": "Doe", "age": 35},
{"firstName": "John", "lastName": "Doe", "age": 35},
{"firstName": "John", "lastName": "Doe", "age": 3}
]
people = $.grep(people, function(person) { return person.age > 18; });
então em nossa coleção de arrays só terão elementos com person.age > 18 - 34Nativamente a função tipeof() do javascript apresenta alguns problemas, qual função de jQuery consegue retornar o tipo correto dos items?$.type();
- 35Como podemos detectar as ferramentas que o navegador do usuário atual tem ou não tem?Modernizr.feature
// return a boolean value
podemos utilizar tbm o modernizar para carregar alguma livraria externa caso algo esteja faltando.
modernizr.load({
test: Modernizr.input.placeholder,
nope: ['jquery.placeholder.min.js'],
complete: function() { $('input,textarea').placeholder() }
}); - 36Como fazemos para rodar 2 funções ao mesmo tempo com os mesmos parâmetros?Utilizamos o $.Callback object
var calculator = {
add: function(operand1, operand2) { console.log(operand1 + operand2 )}
};
var multiply: function (operant1, operant2 ) {
console.log(operand1 * operand2 )}
}
var callbacks = $.Callbacks();
callbacks.add(calculator.add);
callbacks.add(calculator.multiply);
callbacks.fire(3,3);
vai rodar as duas funções e retornar o 3+3 e 3*3 no console.log. - 37Como utilizamos o método $.extend?
Información
- Descripción
- asa (JavaScript / jQuery) Technical Skills Fichas sobre jQuery Tips and Tricks, creado por Victor Bini el 08/06/2017.
- Creado por
- Victor Bini · jun 2017
- Actualizado
- 13 jun 2017
- Visitas
- 0
- Valoración