jquery - 子类化 jQuery 对象

标签 jquery subclassing

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

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

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

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

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

谢谢!

最佳答案

原来 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')。

关于jquery - 子类化 jQuery 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5280631/

相关文章:

javascript - jQuery 无法在 Blackberry OS 5 中运行?备择方案?

java - 有什么方法可以在构造函数中嵌入代码,该构造函数将在所有子类的构造函数代码之后运行?

Javascript 子类化。设置构造函数属性

java - 实现具有稀疏通用功能的子类

jquery - 绑定(bind)日期选择器事件

javascript - 任何字段更改时如何发送新值和旧值?

jquery-ui - JQuery .on() 仅使附加的所有其他元素可单击

php - 内部动态 JavaScript

iphone - 制作更薄的 UITabBar

ios - 子类化 UITextField 并设置文本字体