1

Meu sistema funciona na forma de SPA (Aplicação de Única Página), faço o carregamento de todas as funções que irei usar no sistema em um unico arquivo(Que é leve por sinal), o problema é que é o seguinte, toda vez que faço o load de uma pagina, eu preciso resgatar os inputs com o Jquery, a minha duvida é a seguinte: Não vou estar sobrecarregando o navegador chamando diversas vezes o mesmo elemento no Jquery?

Aqui está um exemplo do meu codigo:

var editContact = function(){
    $("#element").mask();
    //Call Google Maps
}

Arquivo que vai ser carregado diversas vezes pelo jQuery.load();

<script>
    new editContact();
</script>

<input id="#element">

Eu estaria sobrecarregando o sistema, toda vez que faço o load na pagina, já que eu chamo a função editContact() toda vez?

2 Respostas 2

1

Não vou estar sobrecarregando o navegador chamando diversas vezes o mesmo elemento no Jquery?

Não necessariamente, dependendo da complexidade do projeto, neste específico caso penso que é desnecessário utilizar o código desta maneira.

O que acontece quando o código new editContact(); é executado:

  1. Um novo objeto é criado, herdando de editContact.
  2. A função do construtor editContact é chamada com os argumentos especificados, e com isso ligado ao objeto recém-criado. O novo editContact é equivalente ao novo editContact(), ou seja, se nenhuma lista de argumento é especificado, editContact é chamado sem argumentos.
  3. O objeto retornado pela função do construtor torna-se o resultado de toda a nova expressão. Se a função do construtor não retornar explicitamente um objeto, o objeto criado na 1ª etapa é usado em vez disso. Normalmente, os construtores não retornam um valor, mas podem optar por fazê-lo se quiserem substituir o processo normal da criação do objeto. (Ler mais sobre o operador new)

Existem melhores práticas ou formas de abordar isto?

A meu ver, acho que podias simplesmente fazer isto:

(function () {
    // $('#element').mask();
    alert('Olá Mundo!');
})();

Ou

function editContact() {
    // $('#element').mask();
    alert('Olá Mundo!');
}
editContact(); // irá executar a função automaticamente

Que ambas as maneiras irão executar as funções quando a página estiver pronta (equivalente a $(document).ready()). A única diferença é que na segunda opção podes reutilizar esta mesma função em outros lugares, como por exemplo:

function editContact() {
    // $(this).mask();
    $('#resultado').html('resultado do input: '+ $('#element').val());
}
editContact(); // executa a função quando a página estiver pronta

// Abaixo, quando o elemento é modificado ou despois de carregar em uma tecla...
$(document).on('change keyup', '#element', function () {
    editContact(); // chama a função
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<input id="element">
<div id="resultado"></div>

4
  • O problema é que essa parte: "<input id="element"> <div id="resultado"></div>" não está no documento ainda, pois ela vai ser carregada futuramente quando o usuário clicar no link.
    – Kol
    17/04/2017 às 11:22
  • Meu index seria algo assim: <body><div class="page"></div></body> e sempre que o usuário clica em outra pagina ela carrega essa pagina editcontact.php e chama essa função no jQuery
    – Kol
    17/04/2017 às 12:36
  • Se for uma outra página diferente, então o script será carregado da mesma maneira, pois ele está para ser executado quando a página estiver pronta. Se é uma plataforma apenas de uma única página podes acionar a .mask() quando o click para chamar a outra secção acontece. Ou então usar o ultimo exemplo que postei, que irá criar o .mask() (até mesmo para elementos criados dinamicamente) quando alguma coisa no input mudar ou uma tecla é primada $(document).on('change keyup'... . Por isso que já pus aí de propósito esse exemplo
    – Chun
    18/04/2017 às 0:01
  • Entendi, muito obrigado CHUN
    – Kol
    18/04/2017 às 2:00
-1

A função jQuery $ faz uma busca na página sempre, e sim, essa busca pode ser demorada dependendo de como sua página é formada.

Uma alternativa para não utilizá-la é usar window.element ou window['element'] onde está element é o id do elemento que você deseja.
Os browsers modernos criam variáveis de referência para os seus elementos.

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .