1

I have come across plenty of jQuery Plugin Patters (boilerplates) on this website:

Github jQuery Plugin Patterns

Nonetheless I was looking even further but I was unable to find anything that would work as I expected. My knowledge for jQuery is quite low, yet I thought I will earn the best if I start creating some small plugins for self... Just for fun and to learn more.

So for example I like this patter: Best Options Pattern

It looks clean and quite nice to me. However I am not sure why I cannot call the plugin like all other plugins that we can find around... For example backstretch JS or Make it Retina... It is called like this.

$.backstretch('path to image');

$.makeItRetina();

So I have tried everything that I thought it might work and the only way to call the plugin from that pattern above is following:

$(document).pluginName();

And I don't want to have it like that... It looks better and simplified if it's just 

$.pluginName();

Anyone to show me the path / way how to do this ? I am really confused.

Improve this question
5
  • Don't you think that calling pluginName() can be simpler than $.pluginName(). What I mean is: "Why do you design it as jquery plugin?" I think this is the reason you difficultly find an example. Commented Feb 20, 2013 at 19:54
  • @Plap, the global namespace can be excessively polluted when running a complex web application (especially now that HTML5 specifies that exposing named elements in the global namespace is a good idea). The global jQuery object is usually safer to use, if you're already using the library. Commented Feb 20, 2013 at 20:01
  • @Frédéric Hamidi, ah ok, so let's pollute the $ object... What are you saying it's true but here we are talking about a library/plugin, not a commodity variable or function. I avoid placing things in window too, but not for modules and libraries. It's the same way of work of jQuery itself. Commented Feb 20, 2013 at 20:12
  • @Plap, my personal stance on this is to only put in $ library functions that invoke jQuery themselves. Nevertheless, you're right on the long term, $ will probably reach critical mass a few years from now. Then we can introduce $._ (or the other way around) and start over. Commented Feb 20, 2013 at 20:16
  • @Frédéric Hamidi, Thanks for reply. I agree and in the future (or maybe yet from now) the other way can be an AMD solution like require.js or curl.js Commented Feb 20, 2013 at 20:22

2 Answers 2

Reset to default
3

If you want to extend the jQuery object itself (to call methods on $) don't extend $.fn, just extend $.

When you extend (add methods to) $.fn, they are called via $(selector).method rather than the $.method syntax you are looking for, which requires no special behavior with respect to JavaScript.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Aham.. Alright Explosion Pills. +1 for this answer and I will check it as correct once it's possible. Worked!
0

Try:

var plug = $(document).pluginName();

and then call plug.makeItRetina(); or plug.backstretch('path to image');

Hope this helps.

EDIT: Not correct but leaving with comment in case the lesson I learned can be learned by someone else. :)

Improve this answer

1 Comment

Nah, that probably won't work as you intend it to. If the plugin is well-written, $.fn.pluginName() will be chainable and return the jQuery object it is called on. So plug will contain $(document) after the code in your answer runs. It might also contain an arbitrary value if the method was a getter of some sort, but no method will probably return $.fn itself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.