-
Notifications
You must be signed in to change notification settings - Fork 0
FCO/Acumulator
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
Acumulator.js =============== Acumulator.js é uma biblioteca javascript para agrupar eventos. Com ele é possivel agrupar de diversas formas... talvez seja melhor um exemplo: Se quisermos, por exemplo, usar um <input> de texto e ao digitarmos numeros nele quisermos alterar o conteudo de um <spam> para a soma de todos os numeros do <input>. Podemos fazer assim (http://fco.github.io/Acumulator/examples/sum_numbers_wout_acumulator.html): <code> <input onkeyup="var nums = this.value.split(' '); var sum = 0; for(var i = 0; i < nums.length; i++) sum += nums[i]; document.querySelector('spam#soma').innerHTML = sum"><br /> Soma: <spam id=soma></spam> </code> Mas assim, a cada caracter q vc digitar (não só caracteres, qq tecla), executará todo esse onkeyup. Com o Acumulator.js vc pode fazer assim (http://fco.github.io/Acumulator/examples/sum_numbers_with_acumulator_1.html): <code> <script src=../Acumulator.js></script> <script> document.addEventListener("DOMContentLoaded", function() { window.acum = new Acumulator({ _agregator_func: "the_last_one", _callback: function(data) { var sum = 0; for(var i = 0; i < data.length; i++) { sum += parseInt(data[i]); } document.querySelector('spam#soma').innerHTML = sum; }, _waiting_time: 300 }); }); </script> <input onkeyup="window.acum.push(this.value.split(' '))"><br /> Soma: <spam id=soma></spam> </code> Pois bem... vamos linha a linha: <script src=../Acumulator.js></script> Importa a biblioteca <script> document.addEventListener("DOMContentLoaded", function() { Executa o script apos o load da DOM window.acum = new Acumulator({ Cria um novo objeto Acumulatos, passando um objeto de configurações. _waiting_time: 300, Toda chave desse objeto de configuração começadas por "_" tem um significado especial Neste caso, _waiting_time indica qtos usecs deve esperar antes de chamar o callback _agregator_func: "the_last_one", _agregator_func é qual função deve ser usada para agregar os valores passados _callback: function(data) { var sum = 0; for(var i = 0; i < data.length; i++) { sum += parseInt(data[i]); } document.querySelector('spam#soma').innerHTML = sum; } _callback define a função a ser chamada após as agregações e o tempo do _waiting_time }); }); </script> <input onkeyup="window.acum.push(this.value.split(' '))"><br /> push() envia o dado (' ') para ser agregado Soma: <spam id=soma></spam> Uma forma melhor de fazer isso seria assim (http://fco.github.io/Acumulator/examples/sum_numbers_with_acumulator_2.html): <code> <script src=../Acumulator.js></script> <script> document.addEventListener("DOMContentLoaded", function() { new Acumulator({ _waiting_time: 300, _agregator_func: "the_last_one", _callback: function(data) { var sum = 0; for(var i = 0; i < data.length; i++) { if(data[i] == null || data[i] == "") break; sum += parseInt(data[i]); } document.querySelector('spam#soma').innerHTML = sum; }, _push_data_on_event: { obj: "input#numbers", event: "keyup", data: function(evt) { return document.querySelector("input#numbers").value.split(' '); } }, }); }); </script> <input id="numbers"><br /> Soma: <spam id=soma></spam> </code> Dessa forma, a delegação do evento fica delegada ao Acumulator.js, desacoplando seu script do HTML A parte nova é essa: _push_data_on_event: { _push_data_on_event diz ao Acumulator,js para observar 1 ou mais eventos em 1 ou mais objetos passando um dado, que pode ser simplesmente uma string, um objeto ou uma função, caso seja uma função, ela será executada no momento do evento e seu retorno será usado como dado obj: "input#numbers", O objeto a ser "ouvido" pode ser uma string (querySelectorAll), um objeto, um Array de objetos ou um NodeList event: "keyup", string do nome do evento data: function(evt) { return document.querySelector("input#numbers").value.split(' '); } },
About
No description, website, or topics provided.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published