Indo alem jquery3

Indo além com jQuery#jQuery.fn / #jQuery.factoryMarcos Sousafalecomigo@marcossousa.com@marcos_sousawww.marcossousa.com

Desenvolvimento de aplicações WEBDesde 2004Java, .NET, Ruby, Javascript, HTML, CSS e SQL

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

Porque usar jQuery?

Acessível através da variável globaljQuery.myFunctionGoesHere();ou através do alias$.myFunctionGoesHere();

Seletores jQuery$(“#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

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ãoevent.preventDefault();

Interrompendo propagação de eventosevent.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 requestsvar currentRequests = {};$.ajaxPrefilter(function(opts, originalOpts,jqXHR){ if (currentRequests[ opts.url ]) { jqXHR.abort(); } currentRequests[ opts.url ] = jqXHR;});

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

O que são?São funções customizadas adicionadasdinamicamente ao objeto jQuery para manipularelementos 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 eventosreturn 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âmetrosvar 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 chamadavar 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 demo https://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 FactoryFactories são usadas para criardiferentes objetos por meio de umainterface genérica Que tal usar uma fábrica?

Widget FactoryJQuery UI Widget Factory cria,baseado em um nome e objeto, umplugin jQuery e uma “Classe” para Que tal usar uma fábrica?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 úteisthis.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?

Qualidade Código bem escrito:http://docs.jquery.com/JQuery_Core_Style_Guidelines

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

Conﬁanç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 assuntohttp://docs.jquery.com/Plugins/Authoringhttps://github.com/addyosmani/jquery-plugin-patterns/http://docs.jquery.com/JQuery_Core_Style_Guidelineshttp://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/

Indo alem jquery3

by Marcos Sousa on Jan 21, 2012

Accessibility

Tags

Upload Details

Usage Rights

2 Embeds 5

Statistics

Indo alem jquery3 — Presentation Transcript

http://a0.twimg.com	3
http://us-w1.rockmelt.com	2