4

Estou criando um plugin simples com jQuery e Bootstrap, e em meu JavaScript tenho o seguinte trecho:

$.fn.myPlugin = function(options) {
   var element = this;

   var settings = $.extend({
       param1: null,
       param2: null,
       minhaLabel1: $.fn.myPlugin.defaults.translate_MINHA_LABEL_1,
       // Sequência de parâmetros
   }, options);

   // Funções de validação
   // ...

   // Eventos
   // ...

   // Funções privadas
   // ...

   // Funções Públicas
   element.clearAll = function (){
       console.debug('Elemento para ser limpo:', $(this));
       // ...
   };
   // ...

   // Start do Plugin
   // ... 

};

$fn.myPlugin.defaults = {
   translate_MINHA_LABEL_1: 'Minha Label 1',
   // ...
}


Ao usar o plugin tudo tem funcionado bem.

$('#minhaDiv').myPlugin({
   param1: 'alguma_coisa',
   param2: 'outra_coisa',
   // ...
});


Gosto de setar todas as traduções na página de _Layout, por isso criei a propriedade defaults em myPlugin, e tudo tem funcionado bem!

$.fn.myPlugin.defaults.translate_MINHA_LABEL_1 = '@Html.Raw(RESOURCES.LABEL_1)';


Agora eu gostaria de chamar a função clearAll para elementos que já instanciaram myPlugin de qualquer outro arquivo .js.

Imagine o seguinte trecho:

Obs: Insiro uma nova classe pra cada elemento que chama myPlugin.

$(".myPlugin").each(function(){
   $(this).clearAll();
});

Bem, nesse caso tenho um erro, como se clearAll não tivesse sido definido.

Então acrescentei o seguinte trecho abaixo de minha função pública clearAll no arquivo do myPlugin:

element.data({ clearAll: element.clearAll});

Agora eu posso executar a função da seguinte forma:

$(".myPlugin").each(function(){
   $(this).data('clearAll')();
});


Mesmo tendo funcionado corretamente, achei um pouco feio. E gostaria de uma abordagem como:

$(this).myPlugin.clearAll();

Tentei então fazer da forma como estou usando os resources:

$.fn.myPlugin.clearAll= function () {
    $(this).data('clearAll')();
};

Mas toda vez que chamo o trecho acima, o plugin é executado como se eu quisesse criar um novo myPlugin.

4
  • 1
    a variável element está privada brother... 29/12/2016 às 13:22
  • Muito obrigado! mas mesmo com a alteração para um contexto global, eu não consigo usar uma sintaxe mais "bonita". 29/12/2016 às 13:33
  • Algo parecido aqui: pt.stackoverflow.com/questions/100091/… 29/12/2016 às 14:00
  • Na parte "start do plugin", você está retornando .each(...)? Precisa.
    – bfavaretto
    29/12/2016 às 14:20

3 Respostas 3

1

Pode não ser bonito como você deseja, mas uma abordagem para se trabalhar com métodos públicos seria:

(function($){
$.fn.meuPlugin = function(opcoes) {
    // variáveis privadas
    var punzim = '';
    
    // métodos privados   
    var punzaum = function() {
        //...
    }
    
    // métodos públicos       
    this.flatus = function() {
        //...
        return this;
    };

    this.pum = function() {
        alert("Pum!");
    };
    
    return this.flatus();
}
})(jQuery);

var meuPlugin = $('#metano').meuPlugin();

$(".peristaltar").on("click", function(){
	meuPlugin.pum();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="metano">
  <a href="" class="peristaltar">Executar Pum</a>
</div>

1

Aqui vai uma sugestão:

Encontrei uma maneira genérica de fazer isso, funciona de modo bem simples:

Na função myPlugin você usa o elemento puro e define uma propriedade a ele chamada "myPluggin-attached" com valor true:

$.fn.myPlugin = function(params) {

  // .. código

  this.get(0)['myPluggin-attached'] = true;
};

Já na função clearAll verifica se o elemento aplicado possui a propriedade definida no "myPlugin" com valor true:

$.fn.clearAll = function(param) {
    if(this.get(0)['myPluggin-attatched'] == true){
        // ..código

    }
};

Demo

Usando o .myPlugin antes:

var myPlugin = function(params) {
  var elementMasterValue = $(this).data('teste');
  console.log('Teste myPlugin', elementMasterValue);
  this.get(0)['myPluggin-attatched'] = true;
};

$.fn.myPlugin = myPlugin;
$.fn.clearAll = function(param) {
	if(this.get(0)['myPluggin-attatched'] == true){
    var elementValue = $(this).data('teste');
    console.log('Teste clearAll:', elementValue);
  }
};


// Instanciando plugin
$(".myPlugin").each(function() {
  $(this).myPlugin();
});

// Testando limpeza
$(".myPlugin").each(function() {
  $(this).clearAll();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myPlugin" data-teste="1"></div>
<div class="myPlugin" data-teste="2"></div>

Não usando o .myPlugin antes:

var myPlugin = function(params) {
  var elementMasterValue = $(this).data('teste');
  console.log('Teste myPlugin', elementMasterValue);
  this.get(0)['myPluggin-attatched'] = true;
};

$.fn.myPlugin = myPlugin;
$.fn.clearAll = function(param) {
	if(this.get(0)['myPluggin-attatched'] == true){
    var elementValue = $(this).data('teste');
    console.log('Teste clearAll:', elementValue);
  }
};

/*
// Instanciando plugin
$(".myPlugin").each(function() {
  $(this).myPlugin();
});
*/
// Testando limpeza
$(".myPlugin").each(function() {
  $(this).clearAll(); // Nada é logado
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myPlugin" data-teste="1"></div>
<div class="myPlugin" data-teste="2"></div>

10
  • muito obrigado, perfeito! só tem um pequeno detalhe, dentro da função clearAll como consigo ter acesso a minha div? Pois quando uso this, ele me retorna a primeira função. 29/12/2016 às 14:08
  • @JedaiasRodrigues, Ah, claro, erro meu. Vou corrigir e edito a resposta. 29/12/2016 às 14:09
  • @JedaiasRodrigues, editado, veja se funciona. 29/12/2016 às 14:21
  • cara, a chamada está perfeita! Muito obrigado pela ajuda com o this também, mas tem um probleminha... Olhe no console desse Fiddle, perceba que em um contexto de vários elementos, ele guarda apenas o ultimo. 29/12/2016 às 16:30
  • 1
    @JedaiasRodrigues, não consegui fazer dessa maneira, agora estou um pouco sem tempo, mas depois posso tentar. 29/12/2016 às 18:17
1

Isto seria meio que errado no contexto do elemento selecionado, pois assim:

$.fn.myPlugin.clearAll= function () {
    $(this).data('clearAll')();
};

Você estará selecionando a função e não o contexto do objeto, para selecionar o contexto o mais apropriado seria fazer um return, ficando assim:

$("seletor").myPlugin().clearAll();

Ou assim:

var selecioandos1 = $("seletor 1").myPlugin();
var selecioandos2 = $("seletor 2").myPlugin();

$("a.removetodos").click(function() {
     selecioandos1.clearAll();
     selecioandos2.clearAll();
});

A função seria:

$.fn.myPlugin = function(options) {
   var element = this;

   var settings = $.extend({
       param1: null,
       param2: null,
       minhaLabel1: $.fn.myPlugin.defaults.translate_MINHA_LABEL_1,
       // Sequência de parâmetros
   }, options);

   return {
       "clearAll": function() {
             $(element).each(function() {
                  //Ação para cada elemento selecionado
             });
        }
   }
};

Todos plugins que usei usam algo parecido quando tem um método remove

Note também que pode ser até possível usar .myPlugin.clearAll sem passar o objeto, mas você vai ficar limitado ao ultimo elemento selecionado (da chamada anterior), ou seja não terá haver com a nova chamada $("selector")., o que pode causar várias inconsistências.

Outra sugestão que acredito ser mais limpa seria:

$.fn.myPlugin = function(type, params) {
    switch(type) {
        case "create":
            $(this).each(function() {
                var elementMasterValue = $(this).data('teste');
                console.debug('Teste myPlugin', elementMasterValue);
            });
        break;
        case "clear":
            $(this).each(function() {
                var elementMasterValue = $(this).data('teste');
                console.debug('Teste clear', elementMasterValue);
            });
        break;
    }
};

// Instanciando plugin
$(".myPlugin").myPlugin("create", {});


// Testando limpeza
$(".myPlugin").myPlugin("clear");

Note que coloquei o .each dentro da função, assim poderá usar:

 $(".seletor").myPlugin();

E:

 $(this).myPlugin();
1
  • 1
    Boa solução! Pensei em retornar o objeto mas preferi não executar novamente a função a cada chamada. Mas olhando agora, talvez não seja uma má ideia. 29/12/2016 às 19:51

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 .