Jquery - Best way to select the same element

Question

My system works in the form of SPA (Single Page Application), I load all the functions that I will use in the system in a single file (which is light by the way), the problem is that every time I load a page, I need to redeem inputs with Jquery, my doubt is the following: I won’t be overloading the browser by calling several times the same element in Jquery?

Here’s an example of my code:

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

File that will be loaded several times by jQuery.load();

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

<input id="#element">

I would be overloading the system every time I load the page, since I call the editContact() function every time?

Answer 1

I won’t be overloading the browser by calling several times the same element in Jquery?

Not necessarily, depending on the complexity of the project, in this particular case I think it is unnecessary to use the code in this way.

What happens when the code new editContact(); is executed:

1. A new object is created, inheriting from editContact.
2. The function of the manufacturer editContact is called with the arguments specified, and thereby linked to the newly created object. The new editContact is equivalent to the new editContact(), that is, if no argument list is specified, editContact is called without arguments.
3. The object returned by the constructor function becomes the result of the whole new expression. If the constructor function does not return explicitly an object, the object created in the first step is used instead of this. Typically, constructors do not return a value, but can choose to do so if they wish to replace the normal creation of the object. _{(Read more about the operator new)}

There are best practices or ways to approach this?

The way I see it, I think you could just do this:

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

Or

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

That both ways will perform the functions when the page is ready (equivalent to $(document).ready()). The only difference is that in the second option you can reuse this same function in other places, for example:

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>

Answer 2

The jQuery function $ does a page search every time, and yes, this search can be time consuming depending on how your page is formed.

An alternative to not using it is to use window.element or window['element'] where is element is the id of the element you want.
Modern browsers create reference variables for their elements.