Jquery - Best way to select the same element

Navigation
1

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 it is all Once I load a page, I need to retrieve the inputs with Jquery, my doubts are as follows:  Will not I be overloading the browser by calling several times the same element in Jquery?

Here is 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?

    
asked by anonymous 17.04.2017 / 04:41

2 answers

1
  

I will not 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 new editContact(); code is executed:

  • A new object is created, inheriting from editContact .
  • The function of constructor editContact is called with arguments specified, and thus bound 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.
  • The object returned by the constructor function becomes the result of whole new expression. If the constructor function does not return explicitly an object, the object created in step 1 is used instead of this. Typically, constructors do not return a value, but can opt to do so if they wish to replace the normal creation of the object. ( Read more about the new )

    • Are there best practices or ways to address this?

    In my opinion, 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 functions when the page is ready (equivalent to $(document).ready() ). The only difference is that in the second option you can reuse the 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><inputid="element">
<div id="resultado"></div>
        
    17.04.2017 / 08:00
    -1

    The jQuery function $ does a page fetch 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 element is the id of the element you want. Modern browsers create reference variables for their elements.

        
    17.04.2017 / 05:17
    Magic mouse is skipping the sections when I scroll reCaptcha in lightbox