Criando Plugins jQuery

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

Transcript

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. Criando Plugins jQuery Ricardo Coelho Nexy Informática
3. J o quê?
4. O que é o jQuery?
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. 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. Encadeamento $('body') .addClass('ninja') .hide();
8. Porque criar um plugin? Testes Seletores Pacote Reuso Generalização Devolver à comunidade
9. Porque criar um plugin? Testes Seletores Pacote Reuso Generalização Devolver à comunidade Fama e Fortuna
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. Criar plugins é tarefa para jedi? NÃO. Se você já usou jQuery, já tem a metade de um plugin!
12. Qualquer um pode criar um plugin
13. Até esse cara! /** * Prugin do Abestado * * Ela me çeduis! */ $('#florentina') .filter('.dejesus') .addClass('çedutora');
14. Um plugin pode estender jQuery • Ao definir uma nova função utilitária • Ao definir um novo comando
15. Código básico $(function () { });
16. Código básico function uma_funcao() { } jQuery(uma_funcao);
17. Código básico uma_funcao = function () { } jQuery(uma_funcao);
18. Código básico jQuery(function () { });
19. Código básico $ é um apelido para jQuery. $(function () { });
20. Algumas regras básicas jquery.meuplugin-1.0.js
21. Algumas regras básicas Proteja o $
22. Algumas regras básicas Preserve o encadeamento
23. Vamos ver um exemplo de efeito
24. Reuso da solução
25. Criando o plugin de fato
26. Preservando o encadeamento
27. Minificadores • JSMin (Douglas Crockford) • Shrink Safe (Dojo) • Packer (Dean Edwards) • Compressor Rater (Arthur Blake) • YUICompressor (Yahoo)
28. Exemplo YUICompressor
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. Obrigado! Contatos Ricardo Coelho ricardo@nexy.com.br http://www.nexy.com.br @ramcoelho
31. Dúvidas? Slides em: http://www.slideshare.net/ram.coelho