jQuery Plugin Namespacing-Funktionen

Question

Ich erstelle ein jQuery-Plugin, das ziemlich umfangreich ist. Tatsächlich besteht das Plugin technisch aus ein paar Plugins, die alle zusammenarbeiten.

(function($){ 
    $.fn.foo = function(){ 
     //plugin part A 
    } 
    $.fn.bar = function(){ 
     //plugin part B 
    } 
    $.fn.baz = function(){ 
     //plugin part C 
    } 
}(jQuery)) 

Ist es möglich, jQuery Plugins zu Namensraum, so dass die kleinere Plugins Funktionen der größeren Plugin könnte

$.fn.foo.bar = function(){} 
$.fn.foo.baz = funciton(){} 

Diese von Verschmutzung der jQuery-Funktion Namespace halten würde. Sie könnten dann rufen Sie die Plugins wie

$('#example').foo() 
$('#other_example').foo.bar() 

Das Problem, das ich habe laufen in bei dem Versuch, diese aus mir ist, dass die als Eigenschaften der foo deklarierten Funktionen() Plugin-Funktion nicht über ihre Verweise auf ‚this‘ richtig eingestellt. 'this' bezieht sich auf das übergeordnete Objekt und nicht auf das jQuery-Objekt.

Irgendwelche Ideen oder Meinungen würden geschätzt werden.

-Matt

Answer 1

Sobald Sie verwenden $.fn.foo.bar() - this Punkte $.fn.foo, das ist, was Sie in JavaScript erwarten würde (this das Objekt zu sein, dass die Funktion aufgerufen wird.)

ich habe in Plugins von jQuery UI (wie sortierbar), wo Sie Funktionen wie Anruf bemerkt:

so etwas wie diese

$(...).sortable("serialize"); 
$(...).sortable({options}); 

Wenn Sie tun - Sie j verlängern könnten Abfrage selbst:

$.foo_plugin = { 
    bar: function() {}, 
    baz: function() {} 
} 

$.fn.foo = function(opts) { 
    if (opts == 'bar') return $.foo_plugin.bar.call(this); 
    if (opts == 'baz') return $.foo_plugin.baz.call(this); 
} 

Answer 2

Nun, ich bin sicher, es gibt viele Möglichkeiten, diese Katze Haut. Die jQuery UI-Bibliothek verwendet ein Muster wie folgt aus:

// initialize a dialog window from an element: 
$('#selector').dialog({}); 

// call the show method of a dialog: 
$('#selector').dialog('show'); 

Answer 3

Ich weiß, das bereits beantwortet worden, aber ich habe ein Plugin erstellt, die genau das tut, was Sie wollen:

http://code.google.com/p/jquery-plugin-dev/source/browse/trunk/jquery.plugin.js

Ich habe ein kleines Beispiel unten enthalten, aber Scheck aus diesem jQuery Dev-Gruppe Beitrag für eine weitergehende Beispiel: http://groups.google.com/group/jquery-dev/browse_thread/thread/664cb89b43ccb92c/72cf730045d4333a?hl=en&q=structure+plugin+authoring#72cf730045d4333a

Es Sie ein Objekt mit so vielen Methoden erstellen können, wie Sie wollen:

var _myPlugin = function() { 
    // return the plugin namespace 
    return this; 
} 

_myPlugin.prototype.alertHtml = function() { 
    // use this the same way you would with jQuery 
    alert($(this).html()); 
} 

$.fn.plugin.add('myPlugin', _myPlugin); 

jetzt können Sie gehen:

$(someElement).myPlugin().alertHtml(); 

Es gibt natürlich viele, viele andere Möglichkeiten, mit dieser, wie in der Entwickler-Gruppe Beitrag erläutert.

Answer 4

Ich bin ein Fan des Musters, das ich auf Eric Martins SimpleModal gesehen habe. Das funktioniert gut, wenn ich NICHT auf DOM-Elemente eingreife - in diesem Fall ein Wrapper, um localStorage zu verwenden.

So kann ich einfach an den Konstruktor verweisen:

$.totalStorage('robo', 'cop'); 

... oder eine öffentliche Methode:

$.totalStorage.getItem('robo'); //returns 'cop' 

Hier ist die Einbauten:

;(function($){ 

/* Variables I'll need throghout */ 

var ls; 
var supported = true; 
if (typeof localStorage == 'undefined' || typeof JSON == 'undefined') { 
    supported = false; 
} else { 
    ls = localStorage; 
} 

/* Make the methods public */ 

$.totalStorage = function(key, value, options){ 
    return $.totalStorage.impl.init(key, value); 
} 

$.totalStorage.setItem = function(key, value){ 
    return $.totalStorage.impl.setItem(key, value); 
} 

$.totalStorage.getItem = function(key){ 
    return $.totalStorage.impl.getItem(key); 
} 

/* Object to hold all methods: public and private */ 

$.totalStorage.impl = { 

    init: function(key, value){ 
     if (typeof value != 'undefined') { 
      return this.setItem(name, value); 
     } else { 
      return this.getItem(name); 
     } 
    }, 

    setItem: function(key, value){ 
     if (!supported){ 
      $.cookie(key, value); 
      return true; 
     } 
     ls.setItem(key, JSON.stringify(value)); 
     return true; 
    }, 

    getItem: function(key){ 
     if (!supported){ 
      return this.parseResult($.cookie(key)); 
     } 
     return this.parseResult(ls.getItem(key)); 
    }, 

    parseResult: function(res){ 
     var ret; 
     try { 
      ret = JSON.parse(res); 
      if (ret == 'true'){ 
       ret = true; 
      } 
      if (ret == 'false'){ 
       ret = false; 
      } 
      if (parseFloat(ret) == ret){ 
       ret = parseFloat(ret); 
      } 
     } catch(e){} 
     return ret; 
    } 
}})(jQuery);