Indo alem jquery3

57
Indo além com jQuery Marcos Sousa [email protected] @marcos_sousa www.marcossousa.com #jQuery.fn / #jQuery.factory

description

Apresentando técnicas de criações de plugins usando Jquery. Foram apresentados formas de criar plugins com o jQuery.fn e o Widget Factory

Transcript of Indo alem jquery3

Page 1: Indo alem jquery3

Indo além com jQuery

Marcos [email protected]@marcos_sousawww.marcossousa.com

#jQuery.fn / #jQuery.factory

Page 2: Indo alem jquery3

Desenvolvimento de aplicações WEB

Desde 2004

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

Page 3: Indo alem jquery3

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

Page 4: Indo alem jquery3

Porque usar jQuery?

Page 5: Indo alem jquery3
Page 6: Indo alem jquery3
Page 7: Indo alem jquery3

jQuery.myFunctionGoesHere();

ou através do alias

$.myFunctionGoesHere();

Acessível através da variável global

Page 10: Indo alem jquery3

Criando elementos

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

Page 14: Indo alem jquery3

Evitando comportamentos padrão

event.preventDefault(); 

Page 15: Indo alem jquery3

Interrompendo propagação de eventos

event.stopPropagation(); 

Page 16: Indo alem jquery3

Carregando diretamente conteúdo

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

Page 17: Indo alem jquery3

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

Page 18: Indo alem jquery3

Filtrando requests

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

Page 19: Indo alem jquery3

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

Page 20: Indo alem jquery3

O que são?

São funções customizadas adicionadas

dinamicamente ao objeto jQuery para manipular

elementos DOM

Page 21: Indo alem jquery3

Motivação

Reutilização de código

Encapsulamento

Fácil de criar e usar

Page 22: Indo alem jquery3

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)

Page 23: Indo alem jquery3

Criando o plugin com $.fn.method

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

Page 24: Indo alem jquery3

ou através do $.fn.extend

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

Page 25: Indo alem jquery3

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

Page 26: Indo alem jquery3

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

Page 27: Indo alem jquery3

WTF jQuery.extend?

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

Page 29: Indo alem jquery3

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

Page 30: Indo alem jquery3

Trabalhando com parâmetros

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

Page 31: Indo alem jquery3

Mantendo compatibidade

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

Page 32: Indo alem jquery3

Ops... 2 plugins?

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

Page 33: Indo alem jquery3

Crie namespace e encapsule a chamada

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

Page 34: Indo alem jquery3

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

Page 35: Indo alem jquery3

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

Page 36: Indo alem jquery3

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

Page 37: Indo alem jquery3

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

Page 38: Indo alem jquery3

Widget Factory

Factories são usadas para criar

diferentes objetos por meio de uma

interface genéricaQue tal usar uma fábrica?

Page 39: Indo alem jquery3

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

Page 40: Indo alem jquery3

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”

Page 41: Indo alem jquery3

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

Page 42: Indo alem jquery3

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

Page 43: Indo alem jquery3

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

Page 44: Indo alem jquery3

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

Page 45: Indo alem jquery3

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() {} } );

Page 46: Indo alem jquery3

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”); } }});

Page 47: Indo alem jquery3

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" } );

Page 48: Indo alem jquery3

Importante saber...

O namespace “ui” é reservado para os plugins

oficiais Jquery UI.

Page 49: Indo alem jquery3

O que fará do seu plugin um sucesso?

Page 50: Indo alem jquery3

QualidadeCódigo bem escrito:

http://docs.jquery.com/JQuery_Core_Style_Guidelines

Page 51: Indo alem jquery3

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

Page 52: Indo alem jquery3

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

Page 53: Indo alem jquery3

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

Page 54: Indo alem jquery3

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

Page 55: Indo alem jquery3

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

Page 56: Indo alem jquery3

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