Question

我想创建一个子类化的jQuery包装器，它包含jQuery的所有方法以及更多。我还想覆盖一些jQuery方法。这是我想要实现的一个例子

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

请注意，日历与jQuery对象（

除外）的工作方式相同

它有一些额外的方法（showPopup和selectDate）
它有一个重写方法（val）
使用方法链接时，将返回Calendar对象。这意味着addClass不应该恢复为jQuery对象。

如果有人指出我正确的方向，我将不胜感激。我一直在玩范围和$ .extend和原型，但似乎无法发挥作用。

谢谢！

Answer 1

事实证明，jQuery 1.5有一个名为sub的新方法：）

根据文件，sub

创建一个新副本 jQuery的属性和方法可以修改而不影响原始的jQuery对象。 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方法实现
我们可以利用jQuery的强大功能，例如触发器和绑定已经成为类

接下来，我有兴趣允许类由选择器注册。这样，当你调用$（'。MyAwesomeCalendar'）时，你将获得一个Calendar对象，而不必显式调用Calendar（'。MyAwesomeCalendar'）。

Answer 2

我首先要说的是，我认为你应该进一步深入研究jQuery的$.fn插件方法。你可以在这里阅读更多相关信息：

http://docs.jquery.com/Plugins/Authoring

我会像这样完成上述事情：

(function($){
  $.fn.calendar = function(){
    //do something useful
    return this; // necessary for chaining
  };
  $.fn.calendar.showPopup = function(){
    //do something useful
    return this; //necessary for chaining
  }
)(jQuery);

所以，那就是说。上面的示例需要使用类似的语法将jQuery返回到calendar函数，并且必须返回Calendar this以允许链接。我不能在下面证明这个代码，但这是一个好的开始：

var Calendar = (function($){
  calendar = {
    showPopup : function($){
      //do something useful
      return $; //required for chaining
    },
    val : function($){
      //return your inherent functionality
      return $; //required for chaining
     }

  }  
});
var calendar = new Calendar(jQuery);

就像我说的那样，它很丑陋而根本不应该怎么做。

我不是javascript专家 - 但我相信这是如何实现的。我也欢迎任何批评。

子类化jQuery对象

2 个答案: