Avoiding conflicts between variables in Javascript

Question

Avoiding conflicts between variables in Javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

All modal windows in my system open via ajax, and these have their own JS codes with variables and functions. In order to avoid problems with the variables and functions of the screens that call these modal, I thought of adopting the following strategy in the modal JS:

HTML

<button id="btn">
Valor
</button>
<button id="btnSetar">
Setar
</button>

JS

var nome_da_tela = {
    init: function(){
        this.varUm = null;
        var thisLocal = this; 

        $("#btn").click(function(){
           alert(thisLocal.varUm);
        });

        $("#btnSetar").click(function(){
          thisLocal.SetarValor();
        });
    },
    SetarValor:function(){
        var thisLocal = this
        $.get('/echo/json/',{},function(data){
            thisLocal.varUm = data
        });
    }
}

$(document).ready(function(){
    nome_da_tela.init();
});

Follow link for testing. Have you ever had to do something like this? Do you have any better ideas? I did not like having to create a variable (thisLocal) just to reference the object outside its scope.

javascript ajax

asked by anonymous 05.09.2016 / 16:37

2 answers

How to erase GridView image? Detect destkop & mobile

score 1 · Accepted Answer

1

In order not to cause global variables overwriting conflicts (which I do not recommend using many, usually only some are used as access points), you can encapsulate the behavior of JS of your modals to a IIFE (Immediately-Invoked Function Expression) . As in JS the reserved word var applies scope by function by doing

05.09.2016 / 18:15

1

Having a reference of this to be used in another scope where there is another this does not generate conflicts. It is never necessary for the browser to make a reference of this connect to another this . this , in addition, is a reference of an object.

Have you ever had to do something like this? Do you have any better ideas?

Already, when I tried to make map editors for a game. It would be best to nome_da_tela as an interface instance. At least it would help save less information in the browser's memory.

var tela = function() {
    // se não foi declarado 'new', retorna uma nova tela
    if (!(this instanceof tela)) return new tela;
};

tela.prototype = {

    init: function() {
        this.varUm = null; // se não fosse null, seria undefined
    },


    setarValor: function() {
        // this se refere à instância
        var me = this;
    }
};

var nome_da_tela = new tela;

Another not-so-useful alternative: create an object reference that will be declared in nome_da_tela using an (anonymous) scope.

var nome_da_tela = (function() {
    var me = {};
    return me;
})();

05.09.2016 / 17:12