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