How to make a jQuery plugin (the right way)?

Posted by macek on Stack Overflow See other posts from Stack Overflow or by macek
Published on 2010-06-10T18:50:48Z Indexed on 2010/06/14 14:42 UTC
Read the original article Hit count: 245

I know there are jQuery cookie plugins out there, but I wanted to write one for the sake of better learning the jQuery plugin pattern.

I like the separation of "work" in small, manageable functions, but I feel like I'm passing name, value, and options arguments around too much. Is there a way this can be refactored?

I'm looking for snippets of code to help illustrate examples provided with in answers.

Any help is appreciated. Thanks :)

example usage

$.cookie('foo', 'bar', {expires:7});
$.cookie('foo'); //=> bar
$.cookie('foo', null);
$.cookie('foo'); //=> undefined

Edit:

I did a little bit of work on this. You can view the revision history to see where this has come from. It still feels like more refactoring can be done to optimize the flow a bit. Any ideas?

the plugin

(function($){

  $.cookie = function(name, value, options) {
    if (typeof value == 'undefined') {
      return get(name);
    }
    else {
      options = $.extend({}, $.cookie.defaults, options || {});
      return (value != null) ? set(name, value, options) : unset(name, options);  
    }
  };

  $.cookie.defaults = {
    expires:  null,
    path:     '/',
    domain:   null,
    secure:   false
  };

  var set = function(name, value, options){
    console.log(options);
    return document.cookie = options_string(name, value, options);
  };

  var get = function(name){
    var cookies = {};
    $.map(document.cookie.split(';'), function(pair){
      var c = $.trim(pair).split('=');
      cookies[c[0]] = c[1];
    });
    return decodeURIComponent(cookies[name]);
  };

  var unset = function(name, options){
    value = '';
    options.expires = -1;
    set(name, value, options);
  };

  var options_string = function(name, value, options){
    var pairs = [param.name(name, value)];
    $.each(options, function(k,v){
      pairs.push(param[k](v));
    });
    return $.map(pairs, function(p){
      return p === null ? null : p;
    }).join(';');
  };

  var param = {
    name: function(name, value){
      return name + "=" + encodeURIComponent(value);
    },
    expires: function(value){
      // no expiry
      if(value === null){
        return null;
      }
      // number of days
      else if(typeof value == "number"){
        d = new Date();
        d.setTime(d.getTime() + (value * 24 * 60 * 60 * 1000));
      }
      // date object
      else if(typeof value == "object" && value instanceof "Date") {
        d = value;
      }
      return "expires=" + d.toUTCString();
    },
    path: function(value){
      return "path="+value;
    },
    domain: function(value){
      return value === null ? null : "domain=" + value;
    },
    secure: function(bool){
      return bool ? "secure" : null;
    }
  };

})(jQuery);

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about best-practices