Problema com module pattern Jquery

vinitf · Maio 12, 2017

Olá, pessoal. Há um tempo atrás eu mostrei esse código aqui e ele colocava os dados de uma url ashx em um gráfico pie, foi resolvido o problema com a orientação do forum. Agora preciso aplicar Module Pattern nele para plotar o gráfico, sendo que meu método deve ser privado. Nunca havia mexido com esse tipo de coisa, então deve haver alguns erros, peço ajuda de vocês.

<div class ="container">
  <body>
<div><canvas id="grafico" width="80" height="15"></canvas> </div> 
    <div id="lista"></div>  
  </body>
</div>

var module = $(document).ready(function() {
  var metodoprivado = function() {
    $.ajax({
      url: "http://servicosweb.ibge.gov.br/GetStatus.ashx",
      success: function verstatus(data) {
        var servicos = _.countBy(data, function(x) {
          return x.Status === true ? "on" : "off";
        });
        $.each(data, function imprimirdados(index, item) {
          // $("<div>").html(item.Nome + ": " + (item.Status ? "ON" : "OFF") + "</p>").insertAfter($("#grafico"));
          if ((item.Status = true)) {
            $("<div>")
              .html(item.Nome + ": " + (item.Status = "ON") + "</p>")
              .insertAfter($("#grafico"));
          } else {
            $("<div>")
              .html(item.Nome + ": " + (item.Status = "OFF") + "</p>")
              .insertAfter($("#grafico"));
          }
        });
      }
    });
  };
  return {
    metodopublico: function() {
      document.getElementById("lista").innerHTML;
      var resultado = [servicos.on, servicos.off];
      var ctx = document.getElementById("grafico").getContext("2d");
      myChart = new Chart(ctx, {
        type: "pie",
        data: {
          labels: ["Serviços online", "Serviços offline"],
          datasets: [
            {
              backgroundColor: ["#FF9900", "#23238E"],
              data: resultado,
              options: {
                animation: {
                  animateScale: true
                }
              }
            }
          ]
        }
      });
      return {
        //metodoprivado: metodoprivado,
        metodopublico: function() {
          metodoprivado();
        }
      };
    }
  };
});
//isso eu acho que está errado
module.metodoprivado();
module.metodopublico();

William Bruno · Maio 12, 2017

isso aqui:

var module = $(document).ready(function() {

não faz sentido.

e nem isso aqui:

 metodopublico: function() {
          metodoprivado();
        }

se ele era privado, você não deveria expo-lo através de um publico. Ai perdeu todo o sentido do módule pattern em si.

Veja:

var myModule = (function(){
    function metodopublico() {
        console.log('public');
    }
    function metodoprivado() {
        console.log('private');
    }
    return {
        metodopublico: metodopublico
    }
}());
myModule.metodopublico(); //public;
myModule.metodoprivado(); //error=TypeError: myModule.metodoprivado is not a function

repare que eu *nunca* exponho o privado, porque se não ele deixa de ser privado.
porque você precisa disso? qual o problema real?

vinitf · Maio 15, 2017

Entendi melhor com sua explicação, amigo. A ideia seria colocar somente a função de plotar o gráfico como pública, e não como privada como tinha dito antes, me confundi. Mas ainda tenho problemas no método público. Veja:

var module = $(function() {
  function metodoprivado() {
    $.ajax({
      url: "http://servicosweb.ibge.gov.br/GetStatus.ashx",
      success: function verstatus(data) {
        var servicos = _.countBy(data, function(x) {
          return x.Status === true ? "on" : "off";
        });
        $.each(data, function imprimirdados(index, item) {
          // $("<div>").html(item.Nome + ": " + (item.Status ? "ON" : "OFF") + "</p>").insertAfter($("#grafico"));
          if ((item.Status = true)) {
            $("<div>")
              .html(item.Nome + ": " + (item.Status = "ON") + "</p>")
              .insertAfter($("#grafico"));
          } else {
            $("<div>")
              .html(item.Nome + ": " + (item.Status = "OFF") + "</p>")
              .insertAfter($("#grafico"));
          }
        });
      }
    });
    
  };
   function metodopublico() {
      document.getElementById("lista").innerHTML;
      var resultado = [servicos.on, servicos.off];
      var ctx = document.getElementById($("grafico")).getContext("2d");
      myChart = new Chart(ctx, {
        type: "pie",
        data: {
          labels: ["Serviços online", "Serviços offline"],
          datasets: [
            {
              backgroundColor: ["#FF9900", "#23238E"],
              data: resultado,
              options: {
                animation: {
                  animateScale: true
                }
              }
            }
          ]
        }
      });
      return {
       // metodoprivado: metodoprivado,
        metodopublico: metodopublico
      }
    };
});
module.metodoprivado();
module.metodopublico();

vinitf · Maio 17, 2017

Alguma ideia de como plotar o gráfico e chamar as funções?

William Bruno · Maio 17, 2017

qual o problema?

está meio confuso do que você tá querendo fazer.

se o método é privado, só o objeto que o declara que pode chamá-lo. No caso, o teu público pode chamar internamente o privado, mas nunca expor o privado diretamente.

ps: `module` é um nome ruim, porque é uma palavra reservada, tente ser mais específico no seu problema na hora de nomear objetos.

wootzor · Maio 18, 2017

Esta condição, assim como está, vai ser sempre verdadeira, já que estás a fazer uma atribuição:

if ((item.Status = true)) {
   //(...)
}

Para fazer uma comparação, usa == ou ===.

Entrar

Arquivado

Problema com module pattern Jquery

Recommended Posts

vinitf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

vinitf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vinitf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wootzor 103

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Arredondar Valor para cima

PHP - Atualizar INPUT com função moeda

PHP - Atualizar INPUT com função moeda

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante