How To Manage Large jQuery Apps
by Alex Sexton on Apr 24, 2010
- 15,775 views
Get off the DOM and check out a few ways of writing jQuery applications that stand up to a full development cycle. jQuery's API is fantastic, but hinging your entire large application on that API can b...
Get off the DOM and check out a few ways of writing jQuery applications that stand up to a full development cycle. jQuery's API is fantastic, but hinging your entire large application on that API can be more harmful than helpful. Instead, learn how to use the features in jQuery and vanilla javascript to build an application structure that is both modular and manageable. A lot of features you already know and love, plus a little object-oriented JavaScript, can go a long way in making your JavaScript maintainable.
Accessibility
Categories
Tags
More...Upload Details
Uploaded via SlideShare as Apple Keynote
Usage Rights
© All Rights Reserved
Statistics
- Favorites
- 59
- Downloads
- 548
- Comments
- 12
- Embed Views
- Views on SlideShare
- 13,565
- Total Views
- 15,775
Kyle Lee
Your solution looked fine, but you may have also been able to get around the problem with the $.proxy method that was introduced in jQuery 1.4 - it will let you change the context of your handlers back to what you want. It may be an uglier move though, as there's a lot of wrapping functions involved. 1 year ago Reply
var inheritedFacet = $.extend(true, {}, baseFacet, {
options: {
//Here is an extra option in the subclass, for good measure
option3: ’rules!’
},
create: function() {
$().live('click', {self: this}, this.onClick);
},
onClick: function(evt) {
var self = evt.data.self; //ZOMG! Now we've got the object's context
alert(self.options.option1); //Use self to access the object
}
});
jQuery FTMFW :-) 1 year ago Reply
Awesome deck, I literally lol’d. I’m working on a project and trying to implement the prototypal inheritance model (wanna make papa crock proud), and I’m running into an issue I’m trying to work around. I’m using jQuery UI and attempting to create a search faceting hierarchy. I create a baseFacet like so:
var baseFacet = {
doSomething: function() {
alert(’coolness’);
},
options: {
//These are the default options you get with the base facet
option1: ’papa’,
option2: ’crock’
}
};
var inheritedFacet = $.extend(true, {}, baseFacet, {
options: {
//Here is an extra option in the subclass, for good measure
option3: ’rules!’
},
onClick: function(evt) {
//This line doesn’t work...how can I access the members of this object from this event handler?
alert(this.options.option1);
}
});
var myCoolNewWidget = object.Create(inheritedFacet);
$.widget(’omg.checkoutthiswidget’, myCoolNewWidget);
$(’.widgetme’).checkoutthiswidget({option1: ’john’, option2: ’resig’});
The problem is: when I execute checkoutthiswidget on my dom object, and the click event is fired, ’this’ in my onClick handler is conveniently (and frustratingly) overridden to be the dom object that fired the event. Have I lost the ability to access my widget class at this point? Is there a convenient way/best practice for accessing the members of the object from within event handlers?
Thanks so much,
Brad 1 year ago Reply
$.extend(this, {'options' : options});
it's kind of interesting, I've never thought of that solution but I like it and yes, it's work gracefully.
It was a pleasure for me to discuss with you about that 'problem' and I wanne thank you for your time and commitment. Keep up the good work! 1 year ago Reply
I think it was clear where my line of thinking was. You are definitely correct, that my way breaks. However, all of my reasoning seemed very correct to me, so I traced down where the source of the problem was.
When I do an object.create() - it creates a new element with the properties of the first, all stored on the new object's prototype.
If I were to modify/redefine one of the new object's properties, it would not destroy the original object, it would just add the definition as an ownProperty.
--- this is where it get's tricky ---
`this.options` on my new object instance referenced the prototype of the 'this' object, which is just a link to the ownProperties of my original function.
If I were to set this.options to something else, it would create a new copy of this.options on my instance of the object. BUT that's not what I did.
$.extend simply modifies the object. I was well aware of this, but I thought that, if I modified the 'this.options' object it would create a new instance and place it as an ownProperty. This is not true. So it ends up overwriting the default settings each time because the Object.create stores a reference via it's prototype to the original options, and then when you _directly_ extend the options variable on the instance, it actually extends the prototype, and doesn't create a new instance.
Your solution works just fine, but I was actually trying to show that passing an empty object to the beginning of $.extend isn't always necessary or recommended. I still think that's true. I don't like using that as a general rule since it often blows away a lot of differential inheritance.
So I would suggest, as a solution:
instead of
this.options = $.extend({}, this.options, options); // which works
do
$.extend(this, {'options' : options});
THAT, I'm pretty sure, would work. ( demo here: http://alexsexton.com/objecttest/ ) 1 year ago Reply
Thank you for your answer of my comment. I think you didn't exactly get the point of my objection.
For better understanding and explaining myself I've created a new example (somehow my first example at jsbin.com isn't working?!)
You can find my new 'testcase' at:
http://avey.de/public/development/js/extend-options.htm
I've extended your example by using all one of the three possible routines for each example.
You will see that only the 3rd instance works correctly. The first box will become red, the second one blue. The other both instantiations show that the name of the hover class in the options will be overridden by the seconde plugin init call.
I hope that example shows what I try to explained you at my first comment.
Anyway I have to thank you not only for taking time to create this slide but paying attention of people like me who just wanne give you feedback. 1 year ago Reply
Normally, I think you'd be right, and perhaps I'm still missing something, but I think the example is ok.
Two things:
In the plugin code, there's this line:
Object.create(hoverClass)
This creates a new instance (a new context for 'this').
When the override happens, it overrides just the options of that instance. I actually made it redundant for clarity, but the line could actually just be:
$.extend(this.options. options);
instead of:
this.options = $.extend(this.options. options);
2) Even if you are right, I think the problem would still exist, since you're assigning the result of your $.extend call to the 'this.options' variable anyways.
These three line's end in the same object state
$.extend(this.options, options);
this.options = $.extend(this.options, options);
this.options = $.extend({}, this.options, options);
If I had the options outside of the individual instance of the object (perhaps just in a variable above the object), or I called the extend before I created a new instance, I think you'd be right, but in this case, I think my code should work. Do you have an example otherwise?
Either way, thanks a ton for the feedback and actually taking the time to read through and correct things I may have done wrong. It means a lot to see people actually paying attention. 1 year ago Reply
First of all thumbs up to this slide. But I've found one problem at your 'this is magic'-object extending routine. On slide 23 and later on slide 28 you wrote:
this.options = $.extend(this.options. options);
But in matters for keep default options as they are you have to write:
this.options = $.extend({}, this.options. options);
So you create a new object and not extend the default options object. This is important when you create more than one instance of your plugin with different options. Otherwise you will always overwrite the options with the settings of your last creation.
To see and unterstand the difference I've made an example you can find here:
http://jsbin.com/ozivu/edit
You can remove the brackets in the 'this.options = $.extend(...' line to see the difference. Both divs will now become blue.
However, this is the only critique I have for this slide. The rest is just well written and greatly explained. 1 year ago Reply