Home » A jQuery plugin wrapper example semantically written in ECMAScript 5 strict mode

A jQuery plugin wrapper example semantically written in ECMAScript 5 strict mode

jQuery plugin wrapper example

In this article I’m going to go give you a jQuery plugin wrapper example using semantically written OOP techniques. This is just a boilerplate template for other developers to copy, paste, and hack away to create their own semantically written jQuery plugin. There are probably many other methods around doing this, but I took some time awhile back to research all the correct ways of writing a jQuery plugin wrapper to be as semantically picky as possible. The plugin I was writing at the time was scrutinized by several people on IRC and went through a few versions before ending up on a consensus from my constituents that are javascript purists. This is simply a shell of the plugin I was writing with some useful comments to hopefully get your head around how to instantiate and navigate throughout your jQuery plugin’s scope.

The jQuery plugin wrapper

Putting it to use

So now we just have to put the plugin above to use by selecting DOM objects as we normally would with any other jQuery plugin:

If you wanted wanted to change the default styles that are defined in the init method of our plugin, you can do that by passing through the options as an object in your .fancy() method, just like you would with any other jQuery plugin that has options:

Summary

As you can imagine there are a lot of powerful things that are in play here. Firstly we are setting up an object oriented instantiation of each DOM object. Any function or variable definitions will remain safely in the scope of our plugin wrapper, unless we choose to make them accessible via methods or defining them in the return object. All things defined in the scope of the document or the window are available in our wrapper via doc and win as we defined in our IIFE.

We return the instance of the current DOM object so we can easily use method chaining and chain on any jQuery function or plugin method you want right after our .fancy() call! This means something like: $(‘div’).fancy().fadeIn(‘slow’); is possible because it will return the DOM object it’s iterating through so you can chain other methods to it. Super neat, right?

You will obviously want to find/replace every instance of “fancy” and replace it with whatever method name you want to use after your jQuery DOM selector. In this example I’m keeping it fairly simple with the defaults inside the .init() function, but you could easily add methods, events, and any sort of bindings you’d want to do with jQuery DOM manipulation.

Disclaimer: I might not have covered something as I’m writing this rather quickly because a friend needed a jQuery plugin wrapper example written the right way and I didn’t have much time to go over all the things. Feel free to comment if you have any questions or additions to anything above. Thanks for reading! 🤓

One comment on “A jQuery plugin wrapper example semantically written in ECMAScript 5 strict mode

  1. Bharat Prajapati on

    Hi, your article are awesome. i found really help full things from your blog. keep posting and thank you for sharing your great knowledge.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *