On Dec 28, 11:45 am, fran23 <f...@lavabit.com> wrote:
> There is a new love named "jQuery" but I still have some problems in
> understanding issues totally (maybe like in real life ;) Coming from C++ it
> takes some effort in dealing on the (totally other) javascript OOP.
> The code below (that represents basics of a quite more complex issue ...)
> runs fine, but it gives me some headaches.
There are several things that bother me about this code. The example,
by the way, does not run properly in IE8 (nor, I expect in earlier
versions.)
The main thing I worry about here is simplicity. I know this is a
simplification of your real code, but would some variation of this
simpler code work for you?:
$(function() {
$("#MyDiv").html(data_at_startup).click(function() {
// Simulation of an AJAX-call
$(this).html(data_out_of_an_AJAX_call);
});
});
> MyDivObject = new MyDivClass;
>
> function MyDivClass()
> {
> this.Show = function(txt)
> {
> $("#MyDiv").html(txt).click( function()
> {
> // Simulation of an AJAX-call
> MyDivObject.Show( data_out_of_an_AJAX_call );
> });
> }
>
> }
This definitely bothers me. Why should your MyDivClass know anything
about an individual MyDivObject? If you're trying to use the
Singleton pattern, this Javascript language construct would be
cleaner:
var myDivObject = {
show: function(txt) {
$("#MyDiv").html(txt).click( function() {
this.show( data_out_of_an_AJAX_call );
});
},
hide: function() { /* ... */},
otherVal: 17, // comma-separated list of members...
}
But even here, there is still something strange. On each click of the
div, you're binding another event handler to do the same job.
Something is really wrong with that.
> What I do:
>
> In my try to encapsulate jQuery-Code in classes/objects I declare
> "MyDivClass". Later an object of this type has to manage contents of the div
> container <div id='MyDiv'>. At the beginning it simply has to exposure one
> paragraph (= data_at_startup).
>
> MyDivObject.Show( data_at_startup );
>
> Adding some jQuery-Code to capture "click"-events on its paragraphs
>
> $("#MyDiv").html(txt).click( function()
>
> has to run in AJAX-calls (later) to updates parts of - or all of - MyDiv's
> content (for simplification in the demo I call the Show() method just with
> static data ( = data_from_AJAX_call);
>
> MyDivObject.Show ( data_from_AJAX_call )
>
> it works ... but I cannot look behind the scenes: Isn't there some kind of
> recursion in calling ".Show(...)" ?
There's no direct recursion because the inner call to show is inside
an event handler ("click(function...)"). The multiple event handlers
are an issue, though. If you throw an alert() statement inside the
event handler function:
alert("testing");
MyDivObject.Show( data_out_of_an_AJAX_call );
you'll see that the alert pops up once when you click on it the first
time, twice if you click on it again, four time on the third click,
then eight times, etc.
> I'm surprised because it seem to work fine, but ... is it acceptable code
> ... or do I run into problems by coding this way? Do I get (whatever)
> problems in doing it this way ? What should I read & learn to close the
> knowledge leak in my mind ;) ?
I think you'll run into a number of problems besides those above.
Javascript can do a reasonable job of simulating a class-based OO
language, but it's not really the most natural fit. JS is more of a
functional language, and its natural object system is based upon
prototypes rather than classes. The equivalent of constructors are
just plain functions accessed with "new", in this manner:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Person.prototype.greet = function(){alert("Hello, " +
this.firstName + " " + this.lastName);};
var me = new Person("Scott", "Sauyet");
me.greet(); // alerts "Hello, Scott Sauyet"
There are libraries designed to make it easier to use OO code with
Javascript, but I'd suggest you try first to learn how it works on its
own before trying any of those libraries.
There are not many very good Javascript books. I'd suggest two:
_Javascript: The Definitive Guide_, by David Flanagan, and
_Javascript: The Good Parts_, by Douglas Crockford. But neither is
really designed as a tutorial. Websites are probably your best bet
for this.
Cheers,
-- Scott
