Apresentação
● Ricardo Coelho
● Graduado em Ciência da Computação;
● Fundador do grupo PHP-Maranhão;
● Representante do Ma...
Criando Plugins jQuery
Ricardo Coelho
Nexy Informática
J o quê?
O que é o jQuery?
Código Javascript Convencional
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new Activ...
Código jQuery
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microso...
Encadeamento
$('body')
.addClass('ninja')
.hide();
Porque criar um plugin?
Testes
SeletoresPacote
Reuso
GeneralizaçãoDevolver
à comunidade
Porque criar um plugin?
Testes
SeletoresPacote
Reuso
GeneralizaçãoDevolver
à comunidade
Fama e
Fortuna
Plugins existentes
4200+
jQuery UI, Forms, Masked Input,
JCarrousel, JCrop, JEditable, JsTree...
Em http://plugins.jquery....
Criar plugins é tarefa para jedi?
NÃO.
Se você já usou jQuery,
já tem a metade de um plugin!
Qualquer um pode criar um plugin
Até esse cara!
/**
* Prugin do Abestado
*
* Ela me çeduis!
*/
$('#florentina')
.filter('.dejesus')
.addClass('çedutora');
Um plugin pode estender jQuery
● Ao definir uma nova função utilitária
● Ao definir um novo comando
Código básico
$(function () {
});
Código básico
function uma_funcao()
{
}
jQuery(uma_funcao);
Código básico
uma_funcao = function () {
}
jQuery(uma_funcao);
Código básico
jQuery(function () {
});
Código básico
$ é um apelido para jQuery.
$(function () {
});
Algumas regras básicas
jquery.meuplugin-1.0.js
Algumas regras básicas
Proteja o $
Algumas regras básicas
Preserve o encadeamento
Vamos ver um exemplo de efeito
Reuso da solução
Criando o plugin de fato
Preservando o encadeamento
Minificadores
● JSMin (Douglas Crockford)
● Shrink Safe (Dojo)
● Packer (Dean Edwards)
● Compressor Rater (Arthur Blake)
●...
Exemplo YUICompressor
Referências
● http://www.slideshare.net/1Marc/jquery-essentials
● http://developer.yahoo.com/yui/compressor/
● http://docs...
Obrigado!
Contatos
Ricardo Coelho
ricardo@nexy.com.br
http://www.nexy.com.br
@ramcoelho
Dúvidas?
Slides em:
http://www.slideshare.net/ram.coelho
Próximos SlideShares
Carregando em…5
×

Criando plugins jQuery

2.868 visualizações

Publicada em

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

Publicada em: Tecnologia
1 comentário
3 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.868
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
45
Comentários
1
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

×