namespace design
pattern para jQuery
     Diego Fleury - Junho 2010
   http://www.diegofleury.com.br
   http://twitter.com/...
o que conhecemos

padrão de projetos default para escrever um plugin
               baseado no seletor
jQuery.fn.myPlugin ...
problemas

• Conflito de nome
• Plugins grandes precisarão de outros meios
  para se organizarem
• Comunicação e compartilh...
conflito de nomes
validate, valid, removeAttrs, form, element,
resetForm, showErrors, required, remote,
minlength, maxlengt...
plugins grandes

• Plugins maiores precisam ser divididos em
  partes
• Alternativa como no jQuery UI
     $(“foo”).bar(“m...
comunicação das partes

• Contextos muito permissivos (globais)
• Exposição (sem encapsulamento)
• Excesso de parametrizaç...
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() {
             "Th...
interropendo a chain
         com namespace
$.fn.MyPlugin = function() {

     this.firstMethod = function() {
         re...
otimizando
(function() {

    $.fn.MyPlugin = function() {

         this.firstMethod = parts.firstMethod;
         this.s...
opções globais
(function() {

    var parts, globalOptions = {foo: “default”};
                                           ...
muitos métodos
(function() {

    var parts, globalOptions = {foo: “default”};         Recomendo fazer isso
    $.fn.MyPlu...
Vantagens

• Organização
• Simples de empregar
• Natural
• Parametrização global
  “This is nice - it's a simple pattern t...
Upcoming SlideShare
Loading in …5
×

jQuery Namespace Design Pattern (PT-BR)

2,930 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,930
On SlideShare
0
From Embeds
0
Number of Embeds
441
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
















  • jQuery Namespace Design Pattern (PT-BR)

    1. 1. namespace design pattern para jQuery Diego Fleury - Junho 2010 http://www.diegofleury.com.br http://twitter.com/diegofleury
    2. 2. 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 }); };
    3. 3. 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
    4. 4. 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.
    5. 5. 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”]);
    6. 6. comunicação das partes • Contextos muito permissivos (globais) • Exposição (sem encapsulamento) • Excesso de parametrização
    7. 7. opções atuais • Continuar como está • Utilizar as alternativas já apresentadas • Plugins de namespace
    8. 8. plugins de namespace • Preço alto a ser pago • Soluções experimentais • Muito longe do natural
    9. 9. Object Augmentation • Simples var foo = {}; • Flexível foo.bar = “baz”;
    10. 10. jQuery namespace pattern
    11. 11. $.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
    12. 12. 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
    13. 13. 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"; })); } }; })();
    14. 14. 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”});
    15. 15. 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() { /* ... */ } }; })();
    16. 16. Vantagens • Organização • Simples de empregar • Natural • Parametrização global “This is nice - it's a simple pattern to employ, for sure.” - John Resig

    ×