jquery - 子类化 jQuery 对象

Question

我想制作一个子类化的 jQuery 包装器，它具有 jQuery 的所有方法以及更多方法。我还想重写一些 jQuery 方法。这是我想要实现的示例

  calendar('.cal').showPopup()
                  .selectDate(new Date())
                  .addClass('popup-visible');
  alert(calendar.val());

请注意，日历的工作方式与 jQuery 对象类似除了

• 它有一些附加方法(showPopup 和 selectDate)
• 它有一个重写的方法 (val)
• 使用方法链时，将返回 Calendar 对象。这意味着 addClass 不应恢复为 jQuery 对象。

如果有人指出我正确的方向，我将不胜感激。我一直在使用范围、$.extend 和原型(prototype)，但似乎无法让任何东西发挥作用。

谢谢!

Answer 1

原来 jQuery 1.5 有一个名为 sub 的新方法:)

根据文档，子

creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object. http://api.jquery.com/jQuery.sub/

此方法不允许您对子类进行子类化，但我在他们的票证跟踪器中发现了允许此操作的修改方法:

jQuery.subclass = function(){
  function jQuerySubclass( selector, context ) {
    return new jQuerySubclass.fn.init( selector, context );
  }
  jQuery.extend(true, jQuerySubclass, this);
  jQuerySubclass.superclass = this;
  jQuerySubclass.fn = jQuerySubclass.prototype = this();
  jQuerySubclass.fn.constructor = jQuerySubclass;
  jQuerySubclass.fn.init = function init( selector, context ) {
    if (context && context instanceof jQuery && !(context instanceof jQuerySubclass)){
      context = jQuerySubclass(context);
    }
    return jQuery.fn.init.call( this, selector, context, rootjQuerySubclass );
  };
  jQuerySubclass.fn.init.prototype = jQuerySubclass.fn;
  var rootjQuerySubclass = jQuerySubclass(document);
  return jQuerySubclass;
};

这允许你做这样的事情:

var Calendar = jQuery.subclass();
Calendar.create = function() {
  var cal = Calendar( /* some html code for building the calendar */ );

  // Do some processing like binding events, etc

  return cal;
}
Calendar.fn.val = function(value) {
  //Calendar's implementation of val
}

Calendar 对象的行为就像 jQuery 对象除了上述差异。当我将方法链接在一起时，它还会正确返回 Calendar 的实例。这很简洁，因为

• 我们可以轻松构建自定义小部件不会弄乱 jQuery命名空间。
• 我们可以提供我们自己的 jQuery 方法实现
• 我们可以通过类中已经包含的触发器和绑定(bind)等方法来利用 jQuery 的强大功能

接下来，我对允许选择器注册类感兴趣。这样，当您调用 $('.MyAwesomeCalendar') 时，您将返回一个 Calendar 对象，而无需显式调用 Calendar('.MyAwesomeCalendar')。