如何制作一个jQuery插件(正确的方法)?

时间:2010-06-10 18:50:49

标签: jquery design-patterns jquery-plugins refactoring

我知道有jQuery cookie插件,但为了更好地学习jQuery插件模式,我想写一个。

我喜欢在小型,易于管理的功能中分离“工作”,但我觉得我过多地传递namevalueoptions个参数。有没有办法可以重构?

我正在寻找代码片段,以帮助说明答案中提供的示例。

感谢任何帮助。谢谢:))

示例用法

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

编辑:

我对此做了一些工作。您可以查看修订历史记录以查看其来源。它仍然感觉可以做更多的重构来优化流程。有什么想法吗?

插件

(function($){

  // the utility function
  $.cookie = function(name, value, options) {

    // cookies enabled?
    if (!navigator.cookieEnabled){
      return false;
    }

    // get
    if (typeof value == 'undefined') {
      return get(name);
    }

    // set
    else {
      options = $.extend({}, $.cookie.defaults, options || {});
      return (value != null) ? set(name, value, options) : unset(name, options);  
    }
  };

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

  // private functions
  var set = function(name, value, 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(';');
  };

  // prepare each key=value pair
  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);

2 个答案:

答案 0 :(得分:2)

这是一个关于将TDD用于turn your jquery code into a richer unit testable plugin

的优秀教程

答案 1 :(得分:0)