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.
Criando Plugins jQuery
Ricardo CoelhoNexy Informática
J o quê?
O que é o jQuery?
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);}
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');
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 eFortuna
Plugins existentes
4200+
jQuery UI, Forms, Masked Input,JCarrousel, JCrop, JEditable, JsTree...
Em http://plugins.jquery.com você encontraas 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
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)● YUICompressor (Yahoo)
Exemplo YUICompressor
Referências
● http://www.slideshare.net/1Marc/jquery-essentials● http://developer.yahoo.com/yui/compressor/● http://docs.jquery.com● jQuery em ação
Dúvidas?
Slides em:
http://www.slideshare.net/ram.coelho