Download - Criando plugins jQuery

Transcript
Page 1: Criando plugins jQuery

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.

Page 2: Criando plugins jQuery

Criando Plugins jQuery

Ricardo CoelhoNexy Informática

Page 3: Criando plugins jQuery

J o quê?

Page 4: Criando plugins jQuery

O que é o jQuery?

Page 5: Criando plugins 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);}

Page 6: Criando plugins jQuery

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');

Page 7: Criando plugins jQuery

Encadeamento

$('body').addClass('ninja').hide();

Page 8: Criando plugins jQuery

Porque criar um plugin?

Testes

SeletoresPacote

Reuso

GeneralizaçãoDevolverà comunidade

Page 9: Criando plugins jQuery

Porque criar um plugin?

Testes

SeletoresPacote

Reuso

GeneralizaçãoDevolverà comunidade

Fama eFortuna

Page 10: Criando plugins jQuery

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

Page 11: Criando plugins jQuery

Criar plugins é tarefa para jedi?

NÃO.

Se você já usou jQuery,já tem a metade de um plugin!

Page 12: Criando plugins jQuery

Qualquer um pode criar um plugin

Page 13: Criando plugins jQuery

Até esse cara!

/** * Prugin do Abestado * * Ela me çeduis! */

$('#florentina').filter('.dejesus').addClass('çedutora');

Page 14: Criando plugins jQuery

Um plugin pode estender jQuery

● Ao definir uma nova função utilitária

● Ao definir um novo comando

Page 15: Criando plugins jQuery

Código básico

$(function () {

});

Page 16: Criando plugins jQuery

Código básico

function uma_funcao(){}

jQuery(uma_funcao);

Page 17: Criando plugins jQuery

Código básico

uma_funcao = function () {}

jQuery(uma_funcao);

Page 18: Criando plugins jQuery

Código básico

jQuery(function () {

});

Page 19: Criando plugins jQuery

Código básico

$ é um apelido para jQuery.

$(function () {

});

Page 20: Criando plugins jQuery

Algumas regras básicas

jquery.meuplugin-1.0.js

Page 21: Criando plugins jQuery

Algumas regras básicas

Proteja o $

Page 22: Criando plugins jQuery

Algumas regras básicas

Preserve o encadeamento

Page 23: Criando plugins jQuery

Vamos ver um exemplo de efeito

Page 24: Criando plugins jQuery

Reuso da solução

Page 25: Criando plugins jQuery

Criando o plugin de fato

Page 26: Criando plugins jQuery

Preservando o encadeamento

Page 27: Criando plugins jQuery

Minificadores

● JSMin (Douglas Crockford)● Shrink Safe (Dojo)● Packer (Dean Edwards)● Compressor Rater (Arthur Blake)● YUICompressor (Yahoo)

Page 28: Criando plugins jQuery

Exemplo YUICompressor

Page 29: Criando plugins jQuery

Referências

● http://www.slideshare.net/1Marc/jquery-essentials● http://developer.yahoo.com/yui/compressor/● http://docs.jquery.com● jQuery em ação

Page 30: Criando plugins jQuery

Obrigado!

Contatos

Ricardo Coelho

[email protected]

http://www.nexy.com.br

@ramcoelho

Page 31: Criando plugins jQuery

Dúvidas?

Slides em:

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