• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery Namespace Design Pattern (PT-BR)
 

jQuery Namespace Design Pattern (PT-BR)

on

  • 3,273 views

Apresenta o padrão de projeto que melhora a organização de plugins e ajuda a reduzir as chances de conflito de nomes

Apresenta o padrão de projeto que melhora a organização de plugins e ajuda a reduzir as chances de conflito de nomes

Statistics

Views

Total Views
3,273
Views on SlideShare
2,834
Embed Views
439

Actions

Likes
3
Downloads
0
Comments
0

6 Embeds 439

http://www.diegofleury.com.br 429
http://www.linkedin.com 5
http://www.slideshare.net 2
http://207.46.192.232 1
http://feeds.feedburner.com 1
http://web.archive.org 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

jQuery Namespace Design Pattern (PT-BR) jQuery Namespace Design Pattern (PT-BR) Presentation Transcript

  • namespace design pattern para jQuery Diego Fleury - Junho 2010 http://www.diegofleury.com.br http://twitter.com/diegofleury
  • o que conhecemos padrão de projetos default para escrever um plugin baseado no seletor jQuery.fn.myPlugin = function() { return this.each(function() { // Faz algo com cada elemento }); };
  • problemas • Conflito de nome • Plugins grandes precisarão de outros meios para se organizarem • Comunicação e compartilhamento de dados entre partes menores do mesmo plugin fica dificultada
  • conflito de nomes validate, valid, removeAttrs, form, element, resetForm, showErrors, required, remote, minlength, maxlength, email, url, date, number Os nomes genéricos podem causar dores de cabeça, troca de plugins e desistência.
  • plugins grandes • Plugins maiores precisam ser divididos em partes • Alternativa como no jQuery UI $(“foo”).bar(“myAction”, “myArgument”); • Programação orientada a eventos $(“foo”).trigger(“myAction”, [“myArgument”]);
  • comunicação das partes • Contextos muito permissivos (globais) • Exposição (sem encapsulamento) • Excesso de parametrização
  • opções atuais • Continuar como está • Utilizar as alternativas já apresentadas • Plugins de namespace
  • plugins de namespace • Preço alto a ser pago • Soluções experimentais • Muito longe do natural
  • Object Augmentation • Simples var foo = {}; • Flexível foo.bar = “baz”;
  • jQuery namespace pattern
  • $.fn.MyPlugin = function() { this.firstMethod = function() { return this.each(function() { "This method persists the namespaced chain"; }); }; return this; // Returns the jQuery's modified object }; $(“foo”).MyPlugin(); // returns namespaced jQuery object $(“foo”).MyPlugin().firstMethod(); // returns namespaced jQuery object $(“foo”).MyPlugin().firstMethod().hide(); // returns namespaced jQuery object $(“foo”).firstMethod(); // Error: firstMethod is not a function
  • interropendo a chain com namespace $.fn.MyPlugin = function() { this.firstMethod = function() { return this.each(function() { "This method persists the namespaced chain"; }); }; this.secondMethod = function() { Isto serve para casos return $(this.each(function() { específicos onde "This method persists the namespaced chain"; queremos forçar a })); utilização do namespace a }; cada invocação return this; // Returns the jQuery's modified object }; $(“foo”).MyPlugin().secondMethod().hide(); // Pure jQuery object $(“foo”).MyPlugin().firstMethod().secondMethod(); // Pure jQuery object $(“foo”).MyPlugin().secondMethod().firstMethod(); // firstMethod is not a function
  • otimizando (function() { $.fn.MyPlugin = function() { this.firstMethod = parts.firstMethod; this.secondMethod = parts.secondMethod; return this; // Returns the jQuery's modified object }; Agora, só fazemos referência há funções já var parts = { construídas pelo firstMethod: function() { interpretador JavaScript return this.each(function() { ao executar a função "This method persists the namespaced chain"; anônima mais externa }); }, secondMethod: function() { return $(this.each(function() { "This method persists the namespaced chain"; })); } }; })();
  • opções globais (function() { var parts, globalOptions = {foo: “default”}; Isso pode ser bem útil $.fn.MyPlugin = function(globalConfig) { $.extend(globalOptions, globalConfig); this.firstMethod = parts.firstMethod; this.secondMethod = parts.secondMethod; return this; // Returns the jQuery's modified object }; parts = { firstMethod: function(config) { var options = $.extend({}, globalOptions, config); return this.each(function() { "This method persists the namespaced chain"; }); }, secondMethod: function() { /* ... */ } }; $(“foo”) .MyPlugin({foo: “global”}) })(); .firstMethod({foo: “especific”});
  • muitos métodos (function() { var parts, globalOptions = {foo: “default”}; Recomendo fazer isso $.fn.MyPlugin = function(globalConfig) { somente quando houver $.extend(globalOptions, globalConfig); muitos métodos. Essa operação é cara. $.extend(this, parts); return this; // Returns the jQuery's modified object }; parts = { firstMethod: function(config) { var options = $.extend({}, globalOptions, config); return this.each(function() { "This method persists the namespaced chain"; }); }, secondMethod: function() { /* ... */ } }; })();
  • Vantagens • Organização • Simples de empregar • Natural • Parametrização global “This is nice - it's a simple pattern to employ, for sure.” - John Resig