Indo alem jquery3

  • View
    1.841

  • Download
    9

Embed Size (px)

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

Text of Indo alem jquery3

  • 1. Indo alm com jQuery#jQuery.fn / #jQuery.factoryMarcos Sousafalecomigo@marcossousa.com@marcos_sousawww.marcossousa.com

2. Desenvolvimento de aplicaes WEBDesde 2004Java, .NET, Ruby, Javascript, HTML, CSS e SQL 3. Introduo ao jQuery Motivao/ Histrico/ Caractersticas bsicas/ Boas prticas 4. Porque usar jQuery? 5. Acessvel atravs da varivel globaljQuery.myFunctionGoesHere();ou atravs do alias$.myFunctionGoesHere(); 6. Seletores jQuery$(#my-element-id) // busca pelo ID$(.my-element-class) //seleciona pela classe CSS$(div:has(input:checked)) //combinando funes$(li:even).css(background-color:#333) //li mpar$(ul#my-list li:first) // primeiro li$(ul#my-list li:last) // ltimo li 7. Criando custom selectors$.expr[:].withRel = function(obj){var $this = $(obj);return ($this.attr("rel") != "")});//usage$(a:withRel).css(background-color:#999) 8. Criando elementos$("

My text

").click(function(){ //some click logic }).attr("id","test").addClass("clickable"); 9. Definindo eventos ao elemento$(my-cool-div).bind(click, awesomeClick)$(ul).one(mouseover, notifyUser)$(ul).delegate(li, click, makeItWork) 10. Namespace em eventos$("div").bind("click.widget",clickFunction);$("div").bind("mouseout.widget",mouseFuncion);$("div").unbind(".widget"); 11. Eventos personalizados$("div").bind("drop.widget",dropFn);$("div").trigger("drop"); 12. Evitando comportamentos padroevent.preventDefault(); 13. Interrompendo propagao de eventosevent.stopPropagation(); 14. Carregando diretamente contedo$("div").load("/users/list #online", "group: all", function(){ //some work to do after load}); 15. Nvel 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}); 16. Filtrando requestsvar currentRequests = {};$.ajaxPrefilter(function(opts, originalOpts,jqXHR){if (currentRequests[ opts.url ]) { jqXHR.abort();}currentRequests[ opts.url ] = jqXHR;}); 17. Criando plugins Motivao/ Principais/ $.fn.extend vs $.extend/ Demo 18. O que so?So funes customizadas adicionadasdinamicamente ao objeto jQuery para manipularelementos DOM 19. Motivao Reutilizao de cdigo Encapsulamento Fcil de criar e usar 20. 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) 21. Criando o plugin com $.fn.method(function($) {$.fn.capitalize = function(options) {// implementation goes here };})(jQuery); 22. ou atravs do $.fn.extend(function($) {$.fn.extend({capitalize : function(options) {// implementation goes here };}})(jQuery); 23. Importante saber...this no contexto do plugin j um objeto jQueryusar each ao manipular ou extrair informaes objeto this Seletor pode retornar mais de 1 objetoretornar este objeto jQuery para no perder a flunciausar namespace para mtodos, dados e bind de eventos 24. Importante saber... this no contexto do plugin j um objeto jQuery usar each ao manipular ou extrair informaes objeto thisSeletor pode retornar mais de 1 objeto retornar este objeto jQuery para no perder a fluncia usar namespace para mtodos, dados e bind de eventosreturn this.each(function(){ $(this) // this here isnt jQuery Object}); 25. WTF jQuery.extend?$.extend({saySomething : function() {console.log(I have to say #ASGATAPIRA!); }}); 26. Na prtica....$(label).capitalize();$.capitalize();$.saySomething();$(label).saySomething(); 27. Capitalize Plugin demohttps://github.com/marcossousa/bhjs-examples/tree/demo1 28. Trabalhando com parmetrosvar defaults = { forceLowerCase : false};var options = $.extend(defaults, options); 29. Mantendo compatibidade(function($) {...})(jQuery); 30. Ops... 2 plugins?jQuery.fn.extend({capitalize : function(options) {// implementation goes here},uncapitalize : function(options) {// implementation goes here}}); 31. Crie namespace e encapsule a chamadavar methods = {init : function(options) {// implementation goes here},restore : function() {// implementation goes here}} 32. Delegar a chamada para os mtodos$.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 + doenst exist);}};$(#my-div).capitalize(restore); 33. Capitalize with namespace demohttps://github.com/marcossousa/bhjs-examples/tree/demo2 34. Widgets UIMotivao/ $.widget/ Caractersticas/ Templates 35. Gerenciar plugins difcilReverter ao estado inicialPermitir os usurios interagir com eventos geradosAlterar configuraes aps ser chamadoEvitar mltiplas instncias para um mesmo elementoEncapsular tarefas comuns 36. Widget FactoryFactories so usadas para criardiferentes objetos por meio de umainterface genrica Que tal usar uma fbrica? 37. Widget FactoryJQuery UI Widget Factory cria,baseado em um nome e objeto, umplugin jQuery e uma Classe paraQue tal usar uma fbrica?encapsular as funcionalidades 38. Algumas convenincias 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 opes Fcil de chamar callbacks: .trigger(evento) Mtodos acessveis via: .foo(metodo) ou .metodo() Permite mtodos privados 39. Na prtica....;(function ( $, window, document, undefined) {$.widget( gcom.foo , {options: {someValue: null},_create : function() {},_destroy: function() {},foo: function( event ) {},_setOption: function( key, value ) {}});})( jQuery, window, document ); 40. Capitalize demohttps://github.com/marcossousa/bhjs-examples/tree/demo3 41. Mtodos privados Mtodos precedidos com underscore (_foo : function(){}) No so acessveis pela API$(#results).table(_hover); // no funciona Para quase tudo na vida d-se um jeitinho$(#results).data(table)._hover(); //OK$.gcom.table.prototype._hover(); 42. Fica fcil trabalhar com eventosPermite gerar eventos para o usurio do plugin callbackname - Nome do evento que deseja lanar eventObject - mock do evento original userObject - objeto contendo propriedades teis 43. Fica fcil trabalhar com eventos Permite gerar eventos para o usurio do plugincallbackname - Nome do evento que deseja lanareventObject - mock do evento originaluserObject - objeto contendo propriedades teisthis.trigger(hover, e, { hovered: myObject} );$(#my-div).foo( {hover: function() {} } ); 44. 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);}}}); 45. usando templates em pluginsrender( "layout", {$child: "content", username: "Luiza" } ); 46. Importante saber... O namespace ui reservado para os plugins oficiais Jquery UI. 47. O que far do seu plugin um sucesso? 48. QualidadeCdigo bem escrito:http://docs.jquery.com/JQuery_Core_Style_Guidelines 49. Compatilidade compatvel com verses mais novas? 50. ConanaBem testado, com suite confavel, CI (QUnit, Jasmine, etc) 51. PerfomanceConsumir o mnimo de recurso (http://jsperf.com/) 52. Tamanho do cdigoNo passar de alguns KBs minificado e comprimido 53. DocumentaoFacilite a vida de quem for usar sucinta e concisa 54. Manutenoresponda dvidas, corrija bugs e aprimore-o 55. 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/