0
Indo além com jQuery#jQuery.fn / #jQuery.factoryMarcos Sousafalecomigo@marcossousa.com@marcos_sousawww.marcossousa.com
Desenvolvimento de aplicações WEBDesde 2004Java, .NET, Ruby, Javascript, HTML, CSS e SQL
Introdução ao jQuery Motivação/ Histórico/ Características básicas/ Boas práticas
Porque usar jQuery?
Acessível através da variável globaljQuery.myFunctionGoesHere();ou através do alias$.myFunctionGoesHere();
Seletores jQuery$(“#my-element-id”) // busca pelo ID$(“.my-element-class”) // seleciona pela classe CSS$(“div:has(input:ch...
Criando custom selectors$.expr[“:”].withRel = function(obj){    var $this = $(obj);    return ($this.attr("rel") != "")});...
Criando elementos$("<p alt=‘Dynamic content’>My text </p>")   .click(function(){  // some click logic })   .attr("id", "te...
Definindo eventos ao elemento$(“my-cool-div”).bind(“click”, awesomeClick)$(“ul”).one(“mouseover”, notifyUser)$(“ul”).deleg...
Namespace em eventos$("div").bind("click.widget", clickFunction); $("div").bind("mouseout.widget", mouseFuncion); $("div")...
Eventos personalizados$("div").bind("drop.widget", dropFn); $("div").trigger("drop");
Evitando comportamentos padrãoevent.preventDefault(); 
Interrompendo propagação de eventosevent.stopPropagation(); 
Carregando diretamente conteúdo$("div").load("/users/list #online",               "‘group’: ‘all’",               function...
Nível mais baixo - $.ajax$.ajax({    type: "POST",    url: "/user/create",    data: "{‘username’: ‘foo’, ‘pwd’: ‘test’}", ...
Filtrando requestsvar currentRequests = {};$.ajaxPrefilter(function(opts, originalOpts,jqXHR){    if (currentRequests[ opt...
Criando plugins Motivação/ Principais/ $.fn.extend vs $.extend/ Demo
O que são?São funções customizadas adicionadasdinamicamente ao objeto jQuery para manipularelementos DOM
Motivação Reutilização de código Encapsulamento Fácil de criar e usar
Exemplos plugins jQuery Validation (http://jquery.bassistance.de/validate) Autocomplete (http://bassistance.de/jquery-plug...
Criando o plugin com $.fn.method(function($) {    $.fn.capitalize = function(options) {        // implementation goes here...
ou através do $.fn.extend(function($) {    $.fn.extend({      capitalize : function(options) {        // implementation go...
Importante saber...  this no contexto do plugin já é um objeto jQuery  usar each ao manipular ou extrair informações objet...
Importante saber...     this no contexto do plugin já é um objeto jQuery     usar each ao manipular ou extrair informações...
WTF jQuery.extend?$.extend({    saySomething : function() {      console.log(“I have to say #ASGATAPIRA!”);	   }});
Na prática....$(“label”).capitalize();$.capitalize();$.saySomething();$(“label”).saySomething();
Capitalize Plugin demohttps://github.com/marcossousa/bhjs-examples/tree/demo1
Trabalhando com parâmetrosvar defaults = {     forceLowerCase : false};var options = $.extend(defaults, options);
Mantendo compatibidade(function($) {  ...})(jQuery);
Ops... 2 plugins?jQuery.fn.extend({    capitalize : function(options) {        // implementation goes here    },    uncapi...
Crie namespace e encapsule a chamadavar methods = {    init : function(options) {        // implementation goes here    },...
Delegar a chamada para os métodos$.fn.capitalize = function(method) {    if(methods[method]) {        options = Array.prot...
Capitalize with namespace demo    https://github.com/marcossousa/bhjs-examples/tree/demo2
Widgets UIMotivação/ $.widget/ Características/ Templates
Gerenciar plugins é difícil  Reverter ao estado inicial  Permitir os usuários interagir com eventos gerados  Alterar confi...
Widget FactoryFactories são usadas para criardiferentes objetos por meio de umainterface genérica                         ...
Widget FactoryJQuery UI Widget Factory cria,baseado em um nome e objeto, umplugin jQuery e uma “Classe” para              ...
Algumas conveniências do $.widget Cria um namespace (jQuery.gcom) Encapsula a classe (jQuery.gcom.foo.prototype) Extende o...
Na prática....;(function ( $, window, document, undefined) {    $.widget( “gcom.foo” , {        options: {            some...
Capitalize demohttps://github.com/marcossousa/bhjs-examples/tree/demo3
Métodos “privados” Métodos precedidos com underscore (_foo : function(){}) Não são acessíveis pela API  $(“#results”).tabl...
Fica fácil trabalhar com eventos  Permite gerar eventos para o usuário do plugin   callbackname - Nome do evento que desej...
Fica fácil trabalhar com eventos     Permite gerar eventos para o usuário do plugin      callbackname - Nome do evento que...
Customizando widgets existentes$.widget(“ui.dialog”, .ui.dialog, {    close : function() {      if(confirm(“Do you really ...
usando templates em plugins<script id="layout" type="text/x-jquery-tmpl">    <ul id="related-profiles">      {{template $c...
Importante saber... O namespace “ui” é reservado para os plugins oficiais Jquery UI.
O que fará do seu plugin um sucesso?
Qualidade                Código bem escrito:http://docs.jquery.com/JQuery_Core_Style_Guidelines
Compatilidade“é compatível com versões mais novas?”
ConfiançaBem testado, com suite confíavel, CI (QUnit, Jasmine, etc)
PerfomanceConsumir o mínimo de recurso (http://jsperf.com/)
Tamanho do códigoNão passar de alguns KBs minificado e comprimido
DocumentaçãoFacilite a vida de quem for usar sucinta e concisa
Manutençãoresponda dúvidas, corrija bugs e aprimore-o
Mais sobre o assuntohttp://docs.jquery.com/Plugins/Authoringhttps://github.com/addyosmani/jquery-plugin-patterns/http://do...
Indo alem jquery3
Indo alem jquery3
Upcoming SlideShare
Loading in...5
×

Indo alem jquery3

1,886

Published on

Apresentando técnicas de criações de plugins usando Jquery. Foram apresentados formas de criar plugins com o jQuery.fn e o Widget Factory

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,886
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Indo alem jquery3"

  1. 1. Indo além com jQuery#jQuery.fn / #jQuery.factoryMarcos Sousafalecomigo@marcossousa.com@marcos_sousawww.marcossousa.com
  2. 2. Desenvolvimento de aplicações WEBDesde 2004Java, .NET, Ruby, Javascript, HTML, CSS e SQL
  3. 3. Introdução ao jQuery Motivação/ Histórico/ Características básicas/ Boas práticas
  4. 4. Porque usar jQuery?
  5. 5. Acessível através da variável globaljQuery.myFunctionGoesHere();ou através do alias$.myFunctionGoesHere();
  6. 6. Seletores jQuery$(“#my-element-id”) // busca pelo ID$(“.my-element-class”) // seleciona pela classe CSS$(“div:has(input:checked)”) // combinando funções$(“li:even”).css(“background-color:#333”) //li ímpar$(“ul#my-list li:first”) // primeiro li$(“ul#my-list li:last”) // último li
  7. 7. Criando custom selectors$.expr[“:”].withRel = function(obj){ var $this = $(obj); return ($this.attr("rel") != "")});// usage$(“a:withRel”).css(“background-color:#999”)
  8. 8. Criando elementos$("<p alt=‘Dynamic content’>My text </p>")   .click(function(){  // some click logic })   .attr("id", "test")   .addClass("clickable");
  9. 9. Definindo eventos ao elemento$(“my-cool-div”).bind(“click”, awesomeClick)$(“ul”).one(“mouseover”, notifyUser)$(“ul”).delegate(“li”, “click”, makeItWork)
  10. 10. Namespace em eventos$("div").bind("click.widget", clickFunction); $("div").bind("mouseout.widget", mouseFuncion); $("div").unbind(".widget");
  11. 11. Eventos personalizados$("div").bind("drop.widget", dropFn); $("div").trigger("drop");
  12. 12. Evitando comportamentos padrãoevent.preventDefault(); 
  13. 13. Interrompendo propagação de eventosevent.stopPropagation(); 
  14. 14. Carregando diretamente conteúdo$("div").load("/users/list #online", "‘group’: ‘all’", function(){   // some work to do after load});
  15. 15. Nível mais baixo - $.ajax$.ajax({ type: "POST", url: "/user/create", data: "{‘username’: ‘foo’, ‘pwd’: ‘test’}", beforeSend: function( xhr ) { xhr.overrideMimeType( "application/json" ); }}).done(function(){   // some work to do after load});
  16. 16. Filtrando requestsvar currentRequests = {};$.ajaxPrefilter(function(opts, originalOpts,jqXHR){ if (currentRequests[ opts.url ]) { jqXHR.abort(); } currentRequests[ opts.url ] = jqXHR;});
  17. 17. Criando plugins Motivação/ Principais/ $.fn.extend vs $.extend/ Demo
  18. 18. O que são?São funções customizadas adicionadasdinamicamente ao objeto jQuery para manipularelementos DOM
  19. 19. Motivação Reutilização de código Encapsulamento Fácil de criar e usar
  20. 20. Exemplos plugins jQuery Validation (http://jquery.bassistance.de/validate) Autocomplete (http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete) Tip tip (http://code.drewwilson.com/entry/tiptip-jquery-plugin) Uniform (http://uniformjs.com) Masked Input (http://digitalbush.com/projects/masked-input-plugin) Price Format (http://jquerypriceformat.com) Custom File Upload (https://github.com/filamentgroup/jQuery-Custom-File-Input)
  21. 21. Criando o plugin com $.fn.method(function($) { $.fn.capitalize = function(options) { // implementation goes here };})(jQuery);
  22. 22. ou através do $.fn.extend(function($) { $.fn.extend({ capitalize : function(options) { // implementation goes here }; }})(jQuery);
  23. 23. Importante saber... this no contexto do plugin já é um objeto jQuery usar each ao manipular ou extrair informações objeto this Seletor pode retornar mais de 1 objeto retornar este objeto jQuery para não perder a fluência usar namespace para métodos, dados e bind de eventos
  24. 24. Importante saber... this no contexto do plugin já é um objeto jQuery usar each ao manipular ou extrair informações objeto this Seletor pode retornar mais de 1 objeto retornar este objeto jQuery para não perder a fluência usar namespace para métodos, dados e bind de eventosreturn this.each(function(){   $(this) // this here isn’t jQuery Object});
  25. 25. WTF jQuery.extend?$.extend({ saySomething : function() { console.log(“I have to say #ASGATAPIRA!”); }});
  26. 26. Na prática....$(“label”).capitalize();$.capitalize();$.saySomething();$(“label”).saySomething();
  27. 27. Capitalize Plugin demohttps://github.com/marcossousa/bhjs-examples/tree/demo1
  28. 28. Trabalhando com parâmetrosvar defaults = {   forceLowerCase : false};var options = $.extend(defaults, options);
  29. 29. Mantendo compatibidade(function($) { ...})(jQuery);
  30. 30. Ops... 2 plugins?jQuery.fn.extend({ capitalize : function(options) { // implementation goes here }, uncapitalize : function(options) { // implementation goes here }});
  31. 31. Crie namespace e encapsule a chamadavar methods = { init : function(options) { // implementation goes here }, restore : function() { // implementation goes here }}
  32. 32. Delegar a chamada para os métodos$.fn.capitalize = function(method) { if(methods[method]) { options = Array.prototype.slice.call(arguments, 1); return methods[method].apply(this, options); } else if ( typeof method == “object”) { return methods.init.apply(this, arguments); } else { $.error(“The method ” + method + “ doens’t exist”); }};$(“#my-div”).capitalize(“restore”);
  33. 33. Capitalize with namespace demo https://github.com/marcossousa/bhjs-examples/tree/demo2
  34. 34. Widgets UIMotivação/ $.widget/ Características/ Templates
  35. 35. Gerenciar plugins é difícil Reverter ao estado inicial Permitir os usuários interagir com eventos gerados Alterar configurações após ser chamado Evitar múltiplas instâncias para um mesmo elemento Encapsular tarefas comuns
  36. 36. Widget FactoryFactories são usadas para criardiferentes objetos por meio de umainterface genérica Que tal usar uma fábrica?
  37. 37. Widget FactoryJQuery UI Widget Factory cria,baseado em um nome e objeto, umplugin jQuery e uma “Classe” para Que tal usar uma fábrica?encapsular as funcionalidades
  38. 38. Algumas conveniências do $.widget Cria um namespace (jQuery.gcom) Encapsula a classe (jQuery.gcom.foo.prototype) Extende o plugin jQuery (jQuery.fn.foo) Estrutura para setup, teardown e alterar opções Fácil de chamar callbacks: .trigger(“evento”) Métodos acessíveis via: .foo(“metodo”) ou .metodo() Permite métodos “privados”
  39. 39. Na prática....;(function ( $, window, document, undefined) { $.widget( “gcom.foo” , { options: { someValue: null }, _create : function() { }, _destroy: function() { }, foo: function( event ) { }, _setOption: function( key, value ) { } });})( jQuery, window, document );
  40. 40. Capitalize demohttps://github.com/marcossousa/bhjs-examples/tree/demo3
  41. 41. Métodos “privados” Métodos precedidos com underscore (_foo : function(){}) Não são acessíveis pela API $(“#results”).table(“_hover”); // não funciona Para quase tudo na vida dá-se um jeitinho $(“#results”).data(“table”)._hover(); //OK $.gcom.table.prototype._hover();
  42. 42. Fica fácil trabalhar com eventos Permite gerar eventos para o usuário do plugin callbackname - Nome do evento que deseja lançar eventObject - mock do evento original userObject - objeto contendo propriedades úteis
  43. 43. Fica fácil trabalhar com eventos Permite gerar eventos para o usuário do plugin callbackname - Nome do evento que deseja lançar eventObject - mock do evento original userObject - objeto contendo propriedades úteisthis.trigger(“hover”, e, { hovered: myObject} );$(“#my-div”).foo( {hover: function() {} } );
  44. 44. Customizando widgets existentes$.widget(“ui.dialog”, .ui.dialog, { close : function() { if(confirm(“Do you really want to?”) { this.super(“close”); console.log(“OH GOD IF I CATCH U”); } }});
  45. 45. usando templates em plugins<script id="layout" type="text/x-jquery-tmpl">    <ul id="related-profiles"> {{template $child}}    </ul></script> <script id="layout" type="text/x-jquery-tmpl">Paul Benigeri pegou todas, menos a ${username} porque estáno Canadá!</script> render( "layout", { $child: "content", username: "Luiza" } );
  46. 46. Importante saber... O namespace “ui” é reservado para os plugins oficiais Jquery UI.
  47. 47. O que fará do seu plugin um sucesso?
  48. 48. Qualidade Código bem escrito:http://docs.jquery.com/JQuery_Core_Style_Guidelines
  49. 49. Compatilidade“é compatível com versões mais novas?”
  50. 50. ConfiançaBem testado, com suite confíavel, CI (QUnit, Jasmine, etc)
  51. 51. PerfomanceConsumir o mínimo de recurso (http://jsperf.com/)
  52. 52. Tamanho do códigoNão passar de alguns KBs minificado e comprimido
  53. 53. DocumentaçãoFacilite a vida de quem for usar sucinta e concisa
  54. 54. Manutençãoresponda dúvidas, corrija bugs e aprimore-o
  55. 55. Mais sobre o assuntohttp://docs.jquery.com/Plugins/Authoringhttps://github.com/addyosmani/jquery-plugin-patterns/http://docs.jquery.com/JQuery_Core_Style_Guidelineshttp://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×