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

1. Indo além com jQuery
#jQuery.fn / #jQuery.factory
Marcos Sousa
falecomigo@marcossousa.com
@marcos_sousa
www.marcossousa.com

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

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

4. Porque usar jQuery?

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

8. 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

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

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

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

12. Namespace em eventos
$("div").bind("click.widget", clickFunction);
$("div").bind("mouseout.widget", mouseFuncion);
$("div").unbind(".widget");

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

14. Evitando comportamentos padrão
event.preventDefault();

15. Interrompendo propagação de eventos
event.stopPropagation();

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

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

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

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

20. O que são?
São funções customizadas adicionadas
dinamicamente ao objeto jQuery para manipular
elementos DOM

21. Motivação
Reutilização de código
Encapsulamento
Fácil de criar e usar

22. 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)

23. Criando o plugin com $.fn.method
(function($) {
$.fn.capitalize = function(options) {
// implementation goes here
};
})(jQuery);

24. ou através do $.fn.extend
(function($) {
$.fn.extend({
capitalize : function(options) {
// implementation goes here
};
}
})(jQuery);

25. 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

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

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

28. Na prática....
$(“label”).capitalize();
$.capitalize();
$.saySomething();
$(“label”).saySomething();

29. Capitalize Plugin demo
https://github.com/marcossousa/bhjs-examples/tree/demo1

30. Trabalhando com parâmetros
var defaults = {
forceLowerCase : false
};
var options = $.extend(defaults, options);

31. Mantendo compatibidade
(function($) {
...
})(jQuery);

32. Ops... 2 plugins?
jQuery.fn.extend({
capitalize : function(options) {
// implementation goes here
},
uncapitalize : function(options) {
// implementation goes here
}
});

33. Crie namespace e encapsule a chamada
var methods = {
init : function(options) {
// implementation goes here
},
restore : function() {
// implementation goes here
}
}

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

35. Capitalize with namespace demo
https://github.com/marcossousa/bhjs-examples/tree/demo2

36. Widgets UI
Motivação/ $.widget/ Características/ Templates

37. 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

38. Widget Factory
Factories são usadas para criar
diferentes objetos por meio de uma
interface genérica
Que tal usar uma fábrica?

39. Widget Factory
JQuery UI Widget Factory cria,
baseado em um nome e objeto, um
plugin jQuery e uma “Classe” para
Que tal usar uma fábrica?
encapsular as funcionalidades

40. 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”

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

42. Capitalize demo
https://github.com/marcossousa/bhjs-examples/tree/demo3

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

44. 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

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

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

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

48. Importante saber...
O namespace “ui” é reservado para os plugins
oficiais Jquery UI.

49. O que fará do seu plugin um sucesso?

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

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

52. Confiança
Bem testado, com suite confíavel, CI (QUnit, Jasmine, etc)

53. Perfomance
Consumir o mínimo de recurso (http://jsperf.com/)

54. Tamanho do código
Não passar de alguns KBs minificado e comprimido

55. Documentação
Facilite a vida de quem for usar sucinta e concisa

56. Manutenção
responda dúvidas, corrija bugs e aprimore-o

57. 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/