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: 271
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