Using this jQuery plugin (not mine) good coding practice?

Question

I hope the question is not too unspecific. At the moment, I am trying to write a plugin for jQuery, but I struggle with the various ways to structure it. I found bxSlider, and thought this was pretty accessible for plugin code. Here is a simple example:

(function($){

$.fn.letSlider = function(options){     

    var defaults = {
        speed: 500,                         
        onBeforeSlide: function(){} //Callback          
    }

    var options = $.extend(defaults, options);

    //cache base element
    base = this;

        //public functions
        this.init = function(){
            text = giveText();
            alert(text + ' ' + options.speed);

        };

        //private functions
        function giveText(){
                return 'blubb';
        };

    this.each(function(){
        // make sure the element has children
        if($(this).children().length > 0){
            base.init();
        }
    });

    return this;                        
}
 })(jQuery);

So it has a clear structur which I manage to understand. However, it looks quite different from all plugin structures I have seen advised so far, so I am not sure, if it won't cause me trouble later on. Still, it does basically everything I need: exposed options, callbacks, private and public functions. And with this.each it should be chainable too. One thing I noticed already is that basically everything is in the initial $.fn.bxSlider = function(options){ ... and I have never seen that before.

As far as the other plugin structures go, they are either too complicated for me to grasp (shame on me), or I fail at implementing them. For example, with http://www.learningjquery.com/2007/10/a-plugin-development-pattern I failed to make the opts (options variable) available in private or public functions. But I digress. ...

Vivin Paliath · Accepted Answer · 2011-11-07 23:07:44Z

1

If you want to know if you're following best practices, I would start with jQuery's own documentation on authoring plugins. They have provided pretty easy-to-follow examples.

answered Nov 7, 2011 at 23:07

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

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

1 Comment

Narretz Over a year ago

Thanks, though I read that and I thought it was a little too complicated. Basically, I wanted an educated guess on the capabilities of the above structure vs. the jQuery recommendation.

panupan · Accepted Answer · 2011-11-07 23:49:00Z

0

I think you just need to use whatever techniques that best suites the plugin your trying to make. The example you gave looks like a good template to start with.

If you were having trouble accessing opts is because it's a private variable inside the $.fn.hilight function. So naturally methods defined outside of the same scope can't access it.

In the example you have here, options is also a private variable, but the methods defined underneath are in the same scope so they are granted access.

Example 1:

foo = function () {
  var secret = "foo";
}

foo.bar = function() {
  alert(secret); // NOT OK!
}

Example 2:

foo = function() {
  var secret = "foo";

  this.bar = function() {
    alert(secret); // OK!
  }
}

edited Nov 7, 2011 at 23:49

answered Nov 7, 2011 at 23:20

panupan

1,24214 silver badges15 bronze badges

1 Comment

Narretz Over a year ago

Ah, thanks, I was too confused to see the scope yesterday. Actually, the structure I have in the first example does exactly what you mean.

Collectives™ on Stack Overflow

Using this jQuery plugin (not mine) good coding practice?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related