Question

Let’s assume that we have following jQuery plugins (each of them in separate files):

• $.fn.foo
• $.fn.foo.bar
• $.fn.foo.baz

I use standard jQuery plugin pattern. The first one is actually a proxy or “facade” to the rest plugins of it’s namespace.
For example, when I call $('#el').foo(), under the hood I also call:

var context = this; // context is equal to $('#el')
$(context).foo['bar'].apply(context);
$(context).foo['baz'].apply(context);

There are two problem when I want to call only (without $.fn.foo) $('#el').foo.bar(). The first problem is that there are no $.fn.foo namespace but I can create it, so this is actually no problem. The second problem is that this inside $.fn.foo.bar is equal to document object but I want to be equal to $('#el'). How can I do that?

So, making a long story short, both should work:

$('#el').foo();     // This also calls foo.bar and foo.baz under the hood
$('#el').foo.bar(); // I'm calling foo.bar explicitly

Answer 1

I think you might just need to follow a different plugin pattern. Here is a nice repository of jQuery plugin patterns, but the one you might want to look at would be the namespace pattern – you’ll see how the namespace gets defined initially if it doesn’t already exist, and this allows you to more easily extend from a single namespace across multiple scripts.

---

Update: Hmm, I’m still learning so I wouldn’t say I’m an expert at this, but trying to get this $('#el').aaa.bbb.ccc() to work got really messy for me. Maybe it would be better to not use that format, but instead do this (demo):

$.aaa.bbb.ccc( $("#el") );

because then it is relatively easy to set up:

(function() {
    if (!$.aaa) {
        $.aaa = {
            bbb : {
                ccc: function(el, options){
                    alert(el[0].id);
                }
            }
        };
    };
})(jQuery);

$(function() {
    $.aaa.bbb.ccc( $("#el") ); // alerts "el"
});