我想制作一个子类化的 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/