Classes

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Classes

Sean Catchpole
Hiya, I'm pretty new to jQuery, but I like what I've seen so far. I
would like to switch to jQ, but I can't figure out a good way to do
classes without prototype. Perhaps it is recommended to use prototype
along with jQ.

(For the purpose of learning) how would you code this using jquery
(and preferably not prototype).
_____________

User = Class.create();
User.prototype = {

  initialize: function(name){
    this.username = name;
    document.write('<div id="msg">Welcome '+this.username+'!</div>');
    this.e = $("msg");
    setTimeout(this.update.bind(this),200);
  },

  update: function(){
    this.e.innerHTML += "<br />";
    var a = document.createElement("a")
    a.href="account.php?u="+this.username;
    a.innerHTML = this.username+"'s Account";
    this.e.appendChild(a);
  }

};

new User("Sean");

_____________

Thanks for all the help.
~Sean

_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Classes

Stephen Howard
I'm not familiar with Prototype, but I think all you need to do is
switch this:

User = Class.create();

to this:

User = function(name) { this.initialize(name) };

I'm not sure what other goodies Prototype packs into it's Class function.

-Stephen

sunsean wrote:

> Hiya, I'm pretty new to jQuery, but I like what I've seen so far. I
> would like to switch to jQ, but I can't figure out a good way to do
> classes without prototype. Perhaps it is recommended to use prototype
> along with jQ.
>
> (For the purpose of learning) how would you code this using jquery
> (and preferably not prototype).
> _____________
>
> User = function(name) { this.initialize(name) };
> User.prototype = {
>
>   initialize: function(name){
>     this.username = name;
>     document.write('<div id="msg">Welcome '+this.username+'!</div>');
>     this.e = $("msg");
>     setTimeout(this.update.bind(this),200);
>   },
>
>   update: function(){
>     this.e.innerHTML += "<br />";
>     var a = document.createElement("a")
>     a.href="account.php?u="+this.username;
>     a.innerHTML = this.username+"'s Account";
>     this.e.appendChild(a);
>   }
>
> };
>
> new User("Sean");
>
> _____________
>
> Thanks for all the help.
> ~Sean
>
> _______________________________________________
> jQuery mailing list
> [hidden email]
> http://jquery.com/discuss/


_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Classes

Michael Geary
In reply to this post by Sean Catchpole
In many cases, creating a class or class-like object at all is overkill.
There are often simpler ways to solve problems using closures and functional
programming. You will see a lot of this in jQuery and code that uses jQuery.

Here is how I would port the Prototype code. It doesn't use a class at all,
but barring any bugs, I'm pretty sure it does exactly the same thing with
one exception - it inserts both the BR and A elements using the DOM instead
of using innerHTML for the BR tag. It's about half the code and much
simpler:

 function User( name ) {
    document.write( '<div id="msg">Welcome ' + name + '!</div>' );
    setTimeout( function() {
       $('#msg').append(
          $.BR(),
          $.A({ href: "account.php?u=" + name }, name + "'s Account" )
       );
    }, 200 );
 }

Note that you can use either:

new User("Sean");

Or:

User("Sean");

It makes no difference which. Because the code doesn't use a class, you'd
typically leave out the "new".

The code uses jQuery and my DOM creation plugin:

http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype

(Depending on the version of the DOM plugin, you may need to write $.BR({})
instead of $.BR() - try them both.)

Now, I admit that doesn't answer your question about how to use class-like
inheritance with jQuery. Post some code that benefits from using a class and
we'll figure something out.

-Mike

> Hiya, I'm pretty new to jQuery, but I like what I've seen so
> far. I would like to switch to jQ, but I can't figure out a
> good way to do classes without prototype. Perhaps it is
> recommended to use prototype along with jQ.
>
> (For the purpose of learning) how would you code this using
> jquery (and preferably not prototype).
> _____________
>
> User = Class.create();
> User.prototype = {
>
>   initialize: function(name){
>     this.username = name;
>     document.write('<div id="msg">Welcome '+this.username+'!</div>');
>     this.e = $("msg");
>     setTimeout(this.update.bind(this),200);
>   },
>
>   update: function(){
>     this.e.innerHTML += "<br />";
>     var a = document.createElement("a")
>     a.href="account.php?u="+this.username;
>     a.innerHTML = this.username+"'s Account";
>     this.e.appendChild(a);
>   }
>
> };
>
> new User("Sean");


_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Classes

Michael Geary
>  function User( name ) {
>     document.write( '<div id="msg">Welcome ' + name + '!</div>' );
>     setTimeout( function() {
>        $('#msg').append(
>           $.BR(),
>           $.A({ href: "account.php?u=" + name }, name + "'s Account" )
>        );
>     }, 200 );
>  }

Of course, one has to wonder why the fancy footwork with the timer is needed
at all. This code would achieve the same result:

 function User( name ) {
    document.write( [
       '<div id="msg">',
          'Welcome ', name, '!',
          '<br />',
          '<a href="account.php?u=', name, '">',
             name, "'s Account",
          '</a>',
       '</div>'
    ].join('') );
 }

No Prototype, no jQuery, no DOM plugin. :-) And, the page will load
smoothly, with no jumpiness caused by inserting the link after it loads.

I assumed the original code was a simplified example, so I went along with
the given design for purpose of illustration. But for this specific case the
straight document.write code is the best.

BTW, the business with the array.join('') is for performance. In many
browsers, array.join('') is much faster than a series of string
concatenations.

-Mike
s


_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/