Criando plugins jQuery

2,847 views
2,738 views

Published on

Palestra apresentada durante a PHPConference 2010 sobre criação de plugins jQuery.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,847
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
45
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Criando plugins jQuery

  1. 1. Apresentação ● Ricardo Coelho ● Graduado em Ciência da Computação; ● Fundador do grupo PHP-Maranhão; ● Representante do Maranhão em eventos nacionais; ● Representante do Maranhão no PHP Brasil Comunidades; ● Professor de Programação Web (Faculdade Pitágoras); ● Auditor certificado NBR ISO/IEC 27001:2006 ● Perito forense digital ● CTO da Nexy, empresa de auditoria de segurança e tecnologia financeira com soluções SaaS em PHP.
  2. 2. Criando Plugins jQuery Ricardo Coelho Nexy Informática
  3. 3. J o quê?
  4. 4. O que é o jQuery?
  5. 5. Código Javascript Convencional var http = false; if(navigator.appName == "Microsoft Internet Explorer") { http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); } function replace() { http.open("GET", "test.txt", true); http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById('foo').innerHTML = http.responseText; } } http.send(null); }
  6. 6. Código jQuery var http = false; if(navigator.appName == "Microsoft Internet Explorer") { http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); } function replace() { http.open("GET", "test.txt", true); http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById('foo').innerHTML = http.responseText; } } http.send(null); } $('#foo').load('test.txt');
  7. 7. Encadeamento $('body') .addClass('ninja') .hide();
  8. 8. Porque criar um plugin? Testes SeletoresPacote Reuso GeneralizaçãoDevolver à comunidade
  9. 9. Porque criar um plugin? Testes SeletoresPacote Reuso GeneralizaçãoDevolver à comunidade Fama e Fortuna
  10. 10. Plugins existentes 4200+ jQuery UI, Forms, Masked Input, JCarrousel, JCrop, JEditable, JsTree... Em http://plugins.jquery.com você encontra as seguintes categorias de plugins: Ajax, Animation and Effects, Browser, Tweaks, Data, DOM, Drag-and-Drop, Events, Forms, Integration, JavaScript, jQuery, Extensions, Layout, Media, Menus, Metaplugin, Navigation, Tables, User, Interface, Utilities, Widgets, Windows and Overlays
  11. 11. Criar plugins é tarefa para jedi? NÃO. Se você já usou jQuery, já tem a metade de um plugin!
  12. 12. Qualquer um pode criar um plugin
  13. 13. Até esse cara! /** * Prugin do Abestado * * Ela me çeduis! */ $('#florentina') .filter('.dejesus') .addClass('çedutora');
  14. 14. Um plugin pode estender jQuery ● Ao definir uma nova função utilitária ● Ao definir um novo comando
  15. 15. Código básico $(function () { });
  16. 16. Código básico function uma_funcao() { } jQuery(uma_funcao);
  17. 17. Código básico uma_funcao = function () { } jQuery(uma_funcao);
  18. 18. Código básico jQuery(function () { });
  19. 19. Código básico $ é um apelido para jQuery. $(function () { });
  20. 20. Algumas regras básicas jquery.meuplugin-1.0.js
  21. 21. Algumas regras básicas Proteja o $
  22. 22. Algumas regras básicas Preserve o encadeamento
  23. 23. Vamos ver um exemplo de efeito
  24. 24. Reuso da solução
  25. 25. Criando o plugin de fato
  26. 26. Preservando o encadeamento
  27. 27. Minificadores ● JSMin (Douglas Crockford) ● Shrink Safe (Dojo) ● Packer (Dean Edwards) ● Compressor Rater (Arthur Blake) ● YUICompressor (Yahoo)
  28. 28. Exemplo YUICompressor
  29. 29. Referências ● http://www.slideshare.net/1Marc/jquery-essentials ● http://developer.yahoo.com/yui/compressor/ ● http://docs.jquery.com ● jQuery em ação
  30. 30. Obrigado! Contatos Ricardo Coelho ricardo@nexy.com.br http://www.nexy.com.br @ramcoelho
  31. 31. Dúvidas? Slides em: http://www.slideshare.net/ram.coelho

×