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

Obrigado!

Contatos

Ricardo Coelho

ricardo@nexy.com.br

http://www.nexy.com.br

@ramcoelho

Dúvidas?

Slides em:

http://www.slideshare.net/ram.coelho