Question

So today i decided to read something about jquery plugin development after i have seen following examples and templates :

CSS-Tricks.com plugin template
Longpress.js

Now, i’ve got the following questions:

@Css-Tricks:

• Why does he have a paramter named el and where is that thing ever
  initialized?
• Why is he adding a reverse reference to the DOM object?
• Why isn’t he using that var methods = {//...} system assumed by the
  jQuery documentation?

@longpress

• Also, why isn’t he using the pattern from jquery offical?
• Why isn’t he, i.e his mousewheel() method binding to the plugins
  namespace?
• Is that all just bad practice or maybe a better way to do?

Thank you in advance

EDIT:

Down here was said that this one might be too specific. So i try to formulate it otherwise; are there problems or bad advices in the official documentation on plugin development which should be handled in other ways?

Answer 1

I will try to answer as many questions as I can.

The “official” jQuery pattern is only a suggestion. It illustrates best practise and is not definitive. That said, it’s so good, I use nothing else. The “supervisor” section (right at the end of the code) is seriously clever.

CSS-Tricks

The worst aspect of this pattern os that it puts members in both the $ and the $.fn namespaces. The former can be avoided, eg with the jQuery “official” pattern.

el is a formal variable passed to $.yourPluginName() from $.fn.yourPluginName(), and represents, in turn, each element in the jQuery selection on which the plugin is invoked.

I can’t quite see how the author caters for public methods of the plugin.

LongPress

This is a much better pattern. It puts one member in the $.fn namespace. Everything else is ‘private’ (held in the outermost closure).

No public methods are needed nor provided.

The mousewheel code is not a plugin as such. It is maybe better classified as an “addon”. The mousewheel adds an event type to jQuery, so elements can have mousewheel handlers attached/namespaced/triggered etc. in the same way as ‘click’, ‘mouseover’, ‘mouseout’ etc.