Indo além com jQuery

Marcos Sousafalecomigo@marcossousa.com@marcos_sousawww.marcossousa.com

#jQuery.fn / #jQuery.factory

Desenvolvimento de aplicações WEB

Desde 2004

Java, .NET, Ruby, Javascript, HTML, CSS e SQL

Introdução ao jQueryMotivação/ Histórico/ Características básicas/ Boas práticas

Porque usar jQuery?

jQuery.myFunctionGoesHere();

ou através do alias

$.myFunctionGoesHere();

Acessível através da variável global

$(“#my-element-id”) // busca pelo ID$(“.my-element-class”) // seleciona pela classe CSS$(“div:has(input:checked)”) // combinando funções$(“li:even”).css(“background-color:#333”) //li ímpar$(“ul#my-list li:first”) // primeiro li$(“ul#my-list li:last”) // último li

Seletores jQuery

Criando custom selectors

$.expr[“:”].withRel = function(obj){ var $this = $(obj); return ($this.attr("rel") != "")});// usage$(“a:withRel”).css(“background-color:#999”)

Criando elementos

$("<p alt=‘Dynamic content’>My text </p>")   .click(function(){  // some click logic })   .attr("id", "test")   .addClass("clickable");

Definindo eventos ao elemento

$(“my-cool-div”).bind(“click”, awesomeClick)$(“ul”).one(“mouseover”, notifyUser) $(“ul”).delegate(“li”, “click”, makeItWork)

Namespace em eventos

$("div").bind("click.widget", clickFunction); $("div").bind("mouseout.widget", mouseFuncion); $("div").unbind(".widget");

Eventos personalizados

$("div").bind("drop.widget", dropFn); $("div").trigger("drop");

Evitando comportamentos padrão

event.preventDefault(); 

Interrompendo propagação de eventos

event.stopPropagation(); 

Carregando diretamente conteúdo

$("div").load("/users/list #online", "‘group’: ‘all’", function(){   // some work to do after load});

Nível mais baixo - $.ajax$.ajax({ type: "POST", url: "/user/create", data: "{‘username’: ‘foo’, ‘pwd’: ‘test’}",

beforeSend: function( xhr ) { xhr.overrideMimeType( "application/json" ); }}).done(function(){   // some work to do after load });

Filtrando requests

var currentRequests = {};$.ajaxPrefilter(function(opts, originalOpts,jqXHR){ if (currentRequests[ opts.url ]) { jqXHR.abort(); } currentRequests[ opts.url ] = jqXHR;});

Criando pluginsMotivação/ Principais/ $.fn.extend vs $.extend/ Demo

O que são?

São funções customizadas adicionadas

dinamicamente ao objeto jQuery para manipular

elementos DOM

Motivação

Reutilização de código

Encapsulamento

Fácil de criar e usar

Exemplos plugins

jQuery Validation (http://jquery.bassistance.de/validate)

Autocomplete (http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete)

Tip tip (http://code.drewwilson.com/entry/tiptip-jquery-plugin)

Uniform (http://uniformjs.com)

Masked Input (http://digitalbush.com/projects/masked-input-plugin)

Price Format (http://jquerypriceformat.com)

Custom File Upload (https://github.com/filamentgroup/jQuery-Custom-File-Input)

Criando o plugin com $.fn.method

(function($) { $.fn.capitalize = function(options) { // implementation goes here };})(jQuery);

ou através do $.fn.extend

(function($) { $.fn.extend({ capitalize : function(options) { // implementation goes here }; }})(jQuery);

Importante saber...

this no contexto do plugin já é um objeto jQuery

usar each ao manipular ou extrair informações objeto this

Seletor pode retornar mais de 1 objeto

retornar este objeto jQuery para não perder a fluência

usar namespace para métodos, dados e bind de eventos

Importante saber...

this no contexto do plugin já é um objeto jQuery

usar each ao manipular ou extrair informações objeto this

Seletor pode retornar mais de 1 objeto

retornar este objeto jQuery para não perder a fluência

usar namespace para métodos, dados e bind de eventos

return this.each(function(){   $(this) // this here isn’t jQuery Object});

WTF jQuery.extend?

$.extend({ saySomething : function() { console.log(“I have to say #ASGATAPIRA!”); }});

Na prática....

$(“label”).capitalize();$.capitalize(); $.saySomething();$(“label”).saySomething();

Capitalize Plugin demohttps://github.com/marcossousa/bhjs-examples/tree/demo1

Trabalhando com parâmetros

var defaults = {   forceLowerCase : false};var options = $.extend(defaults, options);

Mantendo compatibidade

(function($) { ...})(jQuery);

Ops... 2 plugins?

jQuery.fn.extend({ capitalize : function(options) { // implementation goes here }, uncapitalize : function(options) { // implementation goes here }});

Crie namespace e encapsule a chamada

var methods = { init : function(options) { // implementation goes here }, restore : function() { // implementation goes here }}

Delegar a chamada para os métodos$.fn.capitalize = function(method) { if(methods[method]) { options = Array.prototype.slice.call(arguments, 1); return methods[method].apply(this, options); } else if ( typeof method == “object”) { return methods.init.apply(this, arguments); } else { $.error(“The method ” + method + “ doens’t exist”); }};$(“#my-div”).capitalize(“restore”);

Capitalize with namespace demohttps://github.com/marcossousa/bhjs-examples/tree/demo2

Widgets UIMotivação/ $.widget/ Características/ Templates

Gerenciar plugins é difícil

Reverter ao estado inicial

Permitir os usuários interagir com eventos gerados

Alterar configurações após ser chamado

Evitar múltiplas instâncias para um mesmo elemento

Encapsular tarefas comuns

Widget Factory

Factories são usadas para criar

diferentes objetos por meio de uma

interface genéricaQue tal usar uma fábrica?

Widget Factory

Que tal usar uma fábrica?

JQuery UI Widget Factory cria,

baseado em um nome e objeto, um

plugin jQuery e uma “Classe” para

encapsular as funcionalidades

Algumas conveniências do $.widget

Cria um namespace (jQuery.gcom)

Encapsula a classe (jQuery.gcom.foo.prototype)

Extende o plugin jQuery (jQuery.fn.foo)

Estrutura para setup, teardown e alterar opções

Fácil de chamar callbacks: .trigger(“evento”)

Métodos acessíveis via: .foo(“metodo”) ou .metodo()

Permite métodos “privados”

Na prática....;(function ( $, window, document, undefined) { $.widget( “gcom.foo” , { options: { someValue: null }, _create : function() { }, _destroy: function() { }, foo: function( event ) { }, _setOption: function( key, value ) { } });})( jQuery, window, document );

Capitalize demohttps://github.com/marcossousa/bhjs-examples/tree/demo3

Métodos “privados”

Métodos precedidos com underscore (_foo : function(){})

Não são acessíveis pela API

$(“#results”).table(“_hover”); // não funciona

Para quase tudo na vida dá-se um jeitinho

$(“#results”).data(“table”)._hover(); //OK

$.gcom.table.prototype._hover();

Fica fácil trabalhar com eventos

Permite gerar eventos para o usuário do plugin

callbackname - Nome do evento que deseja lançar

eventObject - mock do evento original

userObject - objeto contendo propriedades úteis

Fica fácil trabalhar com eventos

Permite gerar eventos para o usuário do plugin

callbackname - Nome do evento que deseja lançar

eventObject - mock do evento original

userObject - objeto contendo propriedades úteis

this.trigger(“hover”, e, { hovered: myObject} );$(“#my-div”).foo( {hover: function() {} } );

Customizando widgets existentes

$.widget(“ui.dialog”, .ui.dialog, { close : function() { if(confirm(“Do you really want to?”) { this.super(“close”); console.log(“OH GOD IF I CATCH U”); } }});

usando templates em plugins<script id="layout" type="text/x-jquery-tmpl">    <ul id="related-profiles">

{{template $child}}    </ul></script> <script id="layout" type="text/x-jquery-tmpl">Paul Benigeri pegou todas, menos a ${username} porque está no Canadá!</script> render( "layout", { $child: "content", username: "Luiza" } );

Importante saber...

O namespace “ui” é reservado para os plugins

oficiais Jquery UI.

O que fará do seu plugin um sucesso?

QualidadeCódigo bem escrito:

http://docs.jquery.com/JQuery_Core_Style_Guidelines

Compatilidade“é compatível com versões mais novas?”

ConfiançaBem testado, com suite confíavel, CI (QUnit, Jasmine, etc)

PerfomanceConsumir o mínimo de recurso (http://jsperf.com/)

Tamanho do códigoNão passar de alguns KBs minificado e comprimido

DocumentaçãoFacilite a vida de quem for usar sucinta e concisa

Manutençãoresponda dúvidas, corrija bugs e aprimore-o

Mais sobre o assunto

http://docs.jquery.com/Plugins/Authoring

https://github.com/addyosmani/jquery-plugin-patterns/

http://docs.jquery.com/JQuery_Core_Style_Guidelines

http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-

plugins/