0

Todas as janelas modais do meu sistema abrem via ajax e estas possuem códigos JS próprios com variáveis e funções. Afim de evitar problemas com as variáveis e funções das telas que chamam estes modais, pensei em adotar a seguinte estratégia no JS das modais:

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();
});

Segue link para teste. Vocês já tiveram que fazer algo como este? Tem alguma ideia melhor? Não gostei de ter que criar uma variável (thisLocal) só para me referenciar ao objeto fora do escopo dele.

2 Respostas 2

1

Para não causar conflitos de sobrescrita de variáveis globals (que eu não recomendo usar muitas, geralmente só se usa algumas para serem pontos de acesso), você pode encapsular o comportamento dos JS das suas modals em uma IIFE (Immediately-Invoked Function Expression). Como no JS a palavra reservada var aplica escopo por função efetuando hoisting, se você usar o IIFE e o Module Pattern para expor um módulo você consegue garantir que variáveis declaradas dentro da IIFE não vão possuir conflitos com variáveis externas. Considere o exemplo:

// tela principal
// {

var show = function() {
  console.log('show - global');
};

var hide = function() {
  console.log('hide - global');
};

show();
hide();

// }

// tela modal
// {


(function() {
  var show = function() {
    console.log('show - modal');
  };

  // variável local, não sobreescreveu a global
  show();

  // variável global, visto que não foi criada uma interna
  hide();
}()); // IIFE

show(); // não foi sobreescrito
hide();

// }

Eu ainda recomendo que todas as variáveis que estejam sendo utilizadas dentro da IIFE sejam passadas por dependência, para ficar explícito essa dependência externa e para que eventuais sobrescritas não afetem o código externo.

var hide = function() {
  console.log('hide - global');
};

(function() {
  // se não usar `var`, sobrescreve a variável global
  hide = function() {
    console.log('hide - local');
  };
})();

hide();

var hide = function() {
  console.log('hide - global');
};

(function(hide) {
  // como `hide` foi injetado na `IIFE` e agora é um parâmetro,
  // ela se torna uma variável local, então a sobrescrita
  // não afeta a global
  hide = function() {
    console.log('hide - local');
  };
})(hide);

hide();

4
  • Como o IIFE é auto executável, vc aconselharia colocar dentro dele o $(document).ready ? E como eu chamaria o hide (local) fora dele?
    – Onaiggac
    Commented 5/09/2016 às 18:45
  • Eu lhe aconselho que o $(document).ready fique dentro do IIFE, pois o IIFE é imediato, enquanto o ready é um registro de evento que espera o document ser carregado. Commented 5/09/2016 às 18:57
  • Todo o seu código deveria ficar dentro do IIFE, logo hide seria acessível a todos ali. Commented 5/09/2016 às 18:58
  • 1
    O bom é que desta forma todo o meu código fica exatamente igual, com a diferença de estar dentro do (function(){ código })();
    – Onaiggac
    Commented 5/09/2016 às 19:19
1

Ter uma referência de this para ser usada em outro escopo onde há outro this não gera conflitos. Nunca é preciso o navegador fazer uma referência de this ligar para outro this. this, além disso, é uma referência de um objeto.

Vocês já tiveram que fazer algo como este? Tem alguma ideia melhor?

Já, quando eu tentava fazer editores de mapas para um jogo. Seria melhor fazer nome_da_tela como instância de uma interface. Pelo menos ajudaria à guardar menos informações na memória do navegador.

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;

Outra alternativa que não serve muito: criar uma referência do objeto que será declarado em nome_da_tela usando um escopo (anônimo).

var nome_da_tela = (function() {
    var me = {};
    return me;
})();
4
  • Neste caso eu teria uma interface para cada tela? Usando duas variáveis, uma com o nome da interface e a outra instanciada?
    – Onaiggac
    Commented 5/09/2016 às 15:29
  • 1
    Não serve muito? Module Pattern/Factory Functions no JS (considerando somente ES5) é uma opção mais segura do que trabalhar com Function Constructor, que geralmente o pessoal esquece que precisa usar o operador new para instanciar e usar a função, justo por causa disto é necessário poluir o código com uma programação defensiva, que justamente é feito na primeira linha da function tela. Cada técnica tem sua vantagem, mas não saia afirmando que "não serve muito", sendo que as maiorias dos benefícios andam ao lado de factory functions. Commented 5/09/2016 às 16:00
  • @GabrielKatakura Eu concordo, mas isso não vai mudar o futuro do código, se estiver protegido. Isso diz porque é comúm criar classes, apesar de ter várias vantagens para a performance.
    – user37626
    Commented 5/09/2016 às 20:15
  • @Onaiggac Você pode construir a interface quando quiser e atribuir em qualquer valor do JavaScript. Olha um exemplo: alert(new tela().varUm); // vai ser undefined porque tela().init não foi executado
    – user37626
    Commented 5/09/2016 às 20:17

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 .