How to convert jQuery code into a plugin? and plugin development patterns

Question

I have developed the following jQuery code.

I have some questions:

What is the best programming pattern to develop a jQuery plugin?
How do I convert my code into a plugin? (I know it is possible to do what I am asking with $.fn.function, but what I don't understand is how to use it with an object.)
Should I learn and master a single programming pattern or do I have to learn patterns, all exists?

Here is my HTML:

<ul class="linkContainer">
    <li><a href="#" class="link" data-link="one">one</a></li>
    <li><a href="#" class="link" data-link="two">two</a></li>

<div class="moreDetailsSection" data-section="one">
    chakabakas
</div>
<div class="moreDetailsSection" data-section="two">
    sasjakjk
</div>

And my JavaScript:

  (function ($) {


    var animation = {
        options: {
            linkContainer : $('.linkContainer'),
            section: $('.section'),
            link : $('.link'),
            mainEffect: 'slideToggle',
            mainEffectSpeed: 300
        },

        init: function (options) {                                       
            var link = this.options.link;

            $.extend(this.options, options); 
            link.on('click', this.changeWindow );
        },

        changeWindow: function () {
            var linkId = $(this).data('link'),
                options = animation.options,
                sectionContainer = animation.options.section,
                elements = sectionContainer,
                element = elements.filter('[data-section="'+ linkId +'"]');                                      
                element[options.mainEffect](options.mainEffectSpeed);                    

        }            

    }        

    animation.init();


 })(jQuery);

Demo

My personal preference is jQuery's Widget factory. Learn more here: jQuery Widget Factory Docs. Also to generate the boiler plate, this may be useful. — Ted
– Ted, Commented Mar 10, 2014 at 15:54

T J · Accepted Answer · 2014-03-10 16:16:16Z

2

I would start with JQuery's guide to writing a plugin, this will cover the basics of how to actually build a JQuery plugin. It sounds like you're more interested in learning patterns in general though, which is great! I'd start out with how to build a plugin and then look at how to improve the code inside it. Addy Osmani has some great resources on design patterns.

Two concepts that I try to think about when writing code are 'separation of concerns' and the single responsibility principle

That's probably more than you wanted. Not all of those links are related to JQuery, but coding patterns in general. The first link should walk you through the JQuery specific parts.

edited Mar 10, 2014 at 16:16

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Mar 10, 2014 at 16:09

Gary Stevens

6938 silver badges20 bronze badges

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

Comments

user400654 · Accepted Answer · 2014-03-10 18:16:09Z

1

You already have a working plugin, just have jquery interact with it.

$.animation = animation;
$.fn.animation = function (options) {
    return this.each(function () {
        $.animation.init($.extend({
            link: this
        }, options));
    });
};

http://jsfiddle.net/8bmU6/1/

$.animation is just a reference to the original plugin, and $.fn.animation is a wrapper so that you can call $(".link").animation({options here})

answered Mar 10, 2014 at 18:16

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

Mike Thomsen · Accepted Answer · 2014-03-10 16:05:04Z

1

In all seriousness, have you read the docs? They're very straight-forward and $.fn.function is the best way to go in most cases.

This is a simple example:

<div id="mydiv">
    sfdsdfsdfsdf
</div>

(function($) {
    $.fn.myfunction = function() { this.html('Hi!'); }
})(jQuery);

$('#blarg').myfunction();

You can build in all of the support methods and objects you'll need right into the (function($) {})(jQuery); call.

answered Mar 10, 2014 at 16:05

Mike Thomsen

37.7k11 gold badges63 silver badges86 bronze badges

2 Comments

It worked yesterday. Over a year ago

yes. i have read it. thing is that instead of wrapping the code inside a function, what i have done is wrapping it by an object. this is where i have confused . i know this is a silly question :) thanks for the answer :)

user400654 Over a year ago

@SameeraChathuranga you can leave your object as is and just have the plugin interact with your object (though, your init method looks a little odd... shouldn't you extend options BEFORE you define link?). That's typically how I build my plugins.

Marjan Nikolovski · Accepted Answer · 2014-03-10 18:15:06Z

0

I will recommend you to read and try to write a plugin following the jQuery Boilerplate http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/

answered Mar 10, 2014 at 18:15

Marjan Nikolovski

8489 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to convert jQuery code into a plugin? and plugin development patterns

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related