[jQuery] Re: Plugin design pattern (common practice?) for dealing with private functions
I posted a resolution to this discussion here:
http://stackoverflow.com/questions/2061501/jquery-plugin-design-pattern-common-practice-for-dealing-with-private-function
On Jan 14, 2:08 am, Matt Maxwell wrote:
> Also, more information on the call function (if you're not familiar with it)
> can be found
> here:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Object...
>
> <https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Object...>You
> could also use the apply
> function:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Object...
>
> <https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Object...>If
> you need any other help with that or don't understand my example, let me
> know.
>
> Thanks,
> Matt
>
> On Wed, Jan 13, 2010 at 7:04 PM, Matt Maxwell
> wrote:
>
>
>
> > Maybe try using something like:
>
> > $.myplugin.fill.call( this, "red" );
>
> > On Wed, Jan 13, 2010 at 6:47 PM, Tim Molendijk
> > wrote:
>
> >> Hey all,
>
> >> I've been developing jQuery plugins for quite some time now, and I
> >> like to think I got pretty good at it. One issue keeps nagging me
> >> though, and that is how to deal with private functions in a powerful
> >> yet elegant manner.
>
> >> My plugins generally look something like this:
>
> >> (function($) {
>
> >> $.fn.myplugin = function(...) {
> >> ...
> >> // some shared functionality, for example:
> >> this.css('background-color', 'green');
> >> ...
> >> };
> >> $.fn.mypluginAnotherPublicMethod = function(...) {
> >> ...
> >> // some shared functionality, for example:
> >> this.css('background-color', 'red');
> >> ...
> >> };
>
> >> }(jQuery);
>
> >> Now my question is: how to neatly DRY up that shared functionality? An
> >> obvious solution would be to put it in a function within the plugin's
> >> namespace:
>
> >> var fill = function($obj, color) {
> >> $obj.css('background-color', color);
> >> };
>
> >> Although this solution is effective and nicely namespaced, I really
> >> dislike it. For one simple reason: I have to pass it the jQuery
> >> object. I.e. I have to call it like this:
> >> fill(this, 'red');
> >> While I would like to call it like this:
> >> this.fill('red');
>
> >> Of course we could achieve this result by simply putting 'fill' into
> >> jQuery.fn. But that feels very uncomfortable. Imagine having ten
> >> plugins developed based on this approach and each plugin putting five
> >> of those 'private' functions into the jQuery function namespace. It
> >> ends up in a big mess. We could mitigate by prefixing each of these
> >> functions with the name of the plugin they belong to, but that doesn't
> >> really make it more attractive. These functions are supposed to be
> >> private to the plugin, so we do not want to expose them to the outside
> >> world at all (at least not directly).
>
> >> So there's my question: does anyone of you have suggestions for how to
> >> get the best of both worlds. So being able to call 'private' plugin
> >> function in a way similar to this.fill('red') (or this.myplugin.fill
> >> ('red') or even this.myplugin().fill('red') etc.), while preventing
> >> jQuery function namespace pollution. And of course it should be light-
> >> weight, as these private functions might be called very frequently.
>
> >> Thanks for your ideas.
>
> >> Regards,
> >> Tim Molendijk
[jQuery] Plugin design pattern (common practice?) for dealing with private functions
Hey all,
I've been developing jQuery plugins for quite some time now, and I
like to think I got pretty good at it. One issue keeps nagging me
though, and that is how to deal with private functions in a powerful
yet elegant manner.
My plugins generally look something like this:
(function($) {
$.fn.myplugin = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'green');
...
};
$.fn.mypluginAnotherPublicMethod = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'red');
...
};
}(jQuery);
Now my question is: how to neatly DRY up that shared functionality? An
obvious solution would be to put it in a function within the plugin's
namespace:
var fill = function($obj, color) {
$obj.css('background-color', color);
};
Although this solution is effective and nicely namespaced, I really
dislike it. For one simple reason: I have to pass it the jQuery
object. I.e. I have to call it like this:
fill(this, 'red');
While I would like to call it like this:
this.fill('red');
Of course we could achieve this result by simply putting 'fill' into
jQuery.fn. But that feels very uncomfortable. Imagine having ten
plugins developed based on this approach and each plugin putting five
of those 'private' functions into the jQuery function namespace. It
ends up in a big mess. We could mitigate by prefixing each of these
functions with the name of the plugin they belong to, but that doesn't
really make it more attractive. These functions are supposed to be
private to the plugin, so we do not want to expose them to the outside
world at all (at least not directly).
So there's my question: does anyone of you have suggestions for how to
get the best of both worlds. So being able to call 'private' plugin
function in a way similar to this.fill('red') (or this.myplugin.fill
('red') or even this.myplugin().fill('red') etc.), while preventing
jQuery function namespace pollution. And of course it should be light-
weight, as these private functions might be called very frequently.
Thanks for your ideas.
Regards,
Tim Molendijk
[jQuery] $.fn.data() is significantly slowed down by $.fn.trigger().
$.fn.data() internally uses $.fn.trigger() for whatever reason. When using $.fn.data() heavily, $.fn.trigger() starts to slow down the code. In my situation Firebug profiler tells me 20% of the time is consumed by $.fn.trigger() as a result of $.fn.data() calls. Shouldn't it be possible to get rid of $.fn.trigger() in $.fn.data() or make $.fn.trigger() more efficient?
[jQuery] Binding multiple custom namespaced events not working correctly
Hello,
Run the following code snippet in Firefox and open up Firebug. It
fires a custom event upon left or right click. The handlers for
'myclick.left' and 'myclick.right' work as expected. The problem is
that 'any click' is only logged to the console in case of a right
click, and not in case of a left click. That doesn't make sense to me.
Is this a bug or am I missing something??
$().
bind('myclick.left', function() {
console.log('left click');
}).
bind('myclick.right', function() {
console.log('right click');
}).
bind('myclick.left myclick.right', function() {
console.log('any click');
});
$().
click(function(e) {
var ns;
switch (e.which) {
case 1:
ns = 'left';
break;
case 3:
ns = 'right';
break;
}
$().trigger('myclick.' + ns);
});
