Subclassing jQuery
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Hi all,<div>As promised, here is the second topic I wanted to ask about:</div><div>Are there any plans, or is there any current way to subclass the jQuery object? I've been doing a lot of digging around and I've seen some talks about it, and there have been some questions about what the use would be, but I've found a use case, and me, Paul, and Eduardo have all tried to figure out a way, but to no avail.</div><div>
</div><div>Here is the use case:</div><div>I want to create a function that behaves exactly like jQuery, except that it does some slightly different things, and be able to extend it without worrying about what the parent jQuery object is doing, or what plugins have been loaded globally.</div><div>The benefits are that it would use the prototype chain, so it would be memory efficient, and it would be a way to add plugins without them being clobbered by other plugins.</div><div>
</div><div>So, I've tried a bunch of stuff:</div><div>var subClass = function(sel, context){</div><div> return new subClass.fn.init(sel, context);</div><div>}</div><div>
</div><div>subClass.fn = subClass.prototype = new jQuery.fn.init;</div><div>subClass.fn.init = subClass.prototype;</div><div>
</div><div>and I've tried so many different variations of this, but anytime I try to do:</div><div>subClass.fn.test = function(){}</div><div>
</div><div>it, without fail, creates jQuery.fn.test.</div><div>
</div><div>To show what I am trying to do, I'll give an example:</div><div>
</div><div>jQuery.fn.plugin1 = function(){</div><div>console.log('I am global, everyone can see me');</div><div>return this;</div><div>} // globally available plugin</div><div>
</div><div>subClass.fn.plugin1 = function(){</div><div>console.log('I am local, and I am only run when using the subclass');</div><div>return this;</div><div>} // my own local plugin</div><div>
</div><div>so you could do:</div><div>jQuery('body').plugin1(); // prints 'I am global, everyone can see me'</div><div>subClass('body').plugin1(); // prints 'I am local, and I am only run when using the subclass'</div><div>
</div><div>However, namespaced plugins is only one advantage. Being able to attach custom static methods, etc, would be incredibly useful.</div><div>
</div><div>Does anyone know of a way to subclass the jQuery object using it's prototype?</div><div>
</div><div>Thanks again for reading all of this. I truly appreciate it,</div><div><div> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "><div><div>
<b>Nate Cavanaugh</b></div><div>Director of User Interface Engineering</div><div>Liferay, Inc.</div><div>Enterprise. Open Source. For life.</div></div><div>
</div></span></div></div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"> </div>
</div>
<div> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "><div><div>
<b>Nate Cavanaugh</b></div><div>Director of User Interface Engineering</div><div>Liferay, Inc.</div><div>Enterprise. Open Source. For life.</div></div><div>
</div></span></div></div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"> </div>
</div><div>Here is the use case:</div><div>I want to create a function that behaves exactly like jQuery, except that it does some slightly different things, and be able to extend it without worrying about what the parent jQuery object is doing, or what plugins have been loaded globally.</div><div>The benefits are that it would use the prototype chain, so it would be memory efficient, and it would be a way to add plugins without them being clobbered by other plugins.</div><div>
</div><div>So, I've tried a bunch of stuff:</div><div>var subClass = function(sel, context){</div><div> return new subClass.fn.init(sel, context);</div><div>}</div><div>
</div><div>subClass.fn = subClass.prototype = new jQuery.fn.init;</div><div>subClass.fn.init = subClass.prototype;</div><div>
</div><div>and I've tried so many different variations of this, but anytime I try to do:</div><div>subClass.fn.test = function(){}</div><div>
</div><div>it, without fail, creates jQuery.fn.test.</div><div>
</div><div>To show what I am trying to do, I'll give an example:</div><div>
</div><div>jQuery.fn.plugin1 = function(){</div><div>console.log('I am global, everyone can see me');</div><div>return this;</div><div>} // globally available plugin</div><div>
</div><div>subClass.fn.plugin1 = function(){</div><div>console.log('I am local, and I am only run when using the subclass');</div><div>return this;</div><div>} // my own local plugin</div><div>
</div><div>so you could do:</div><div>jQuery('body').plugin1(); // prints 'I am global, everyone can see me'</div><div>subClass('body').plugin1(); // prints 'I am local, and I am only run when using the subclass'</div><div>
</div><div>However, namespaced plugins is only one advantage. Being able to attach custom static methods, etc, would be incredibly useful.</div><div>
</div><div>Does anyone know of a way to subclass the jQuery object using it's prototype?</div><div>
</div><div>Thanks again for reading all of this. I truly appreciate it,</div><div><div> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "><div><div>
<b>Nate Cavanaugh</b></div><div>Director of User Interface Engineering</div><div>Liferay, Inc.</div><div>Enterprise. Open Source. For life.</div></div><div>
</div></span></div></div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"> </div>
</div>
<div> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Lucida Grande'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; "><div><div>
<b>Nate Cavanaugh</b></div><div>Director of User Interface Engineering</div><div>Liferay, Inc.</div><div>Enterprise. Open Source. For life.</div></div><div>
</div></span></div></div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"> </div>
Topic Participants
nate
John Resig