www.webdeveloper.com
Results 1 to 10 of 10

Thread: Class design question

  1. #1
    Join Date
    May 2010
    Posts
    44

    Class design question

    I'm new to writing objects in Javascript, one problem I keep having is how to identify dynamically created elements in a class.

    IE, I have an object 'Grid' that creates a table on the page.

    There should be support for multiple instances of grid.

    The grid object sets the inner html of a canvas div to add in the table HTML. The grid object then has a variable in it that is set to the tables ID.

    Without passing in a unique ID for the table into the object, how can the object automatically generate a unique ID for each table?

  2. #2
    Join Date
    May 2010
    Posts
    213
    By using a global variable inside the class constructor. The global variable can store the last used id and every new object will set it's id to the incremented value of that last used id.

    In javascript, which has the silliest ever way of writing classes, it would look something like this: http://turcin.net/javascript/object-constructor.html

    Does that work for you?
    i love easter eggs
    (if you got any creative easter eggs, send me a PM)

  3. #3
    Join Date
    May 2010
    Posts
    44
    That's what I thought, thanks!

    I also had an idea where you could have a container object, like gridGroup which maintains an array of the grid objects, using array index as the identifier, with functions to remove and add grids from it's array.

  4. #4
    Join Date
    Aug 2009
    Posts
    593
    You could also just keep the element references in your objects. Then you do not need any ID's.

    For example...

    Code:
    function Grid()
    {
    	this.base = null;
    
    	this.initialise = function()
    	{
    		var self = this;
    
    		this.base               = document.createElement('div');
    		this.base.innerHTML     = 'Click Me!';
    		this.base.onclick       = function() {self.clicker();};
    		this.base.style.cssText = 'border: solid 1px black; padding: 10px;';
    
    		document.body.appendChild(this.base);
    	};
    	
    	this.clicker = function()
    	{
    		this.base.innerHTML += '<br />You Clicked Me! ' + new Date().getTime();
    	};
    
    	this.initialise();
    }
    HTML Code:
    <input type="button" onclick="new Grid();" value="New Object" />

  5. #5
    Join Date
    Apr 2010
    Location
    UK
    Posts
    117
    Quote Originally Posted by 3Nex View Post
    In javascript, which has the silliest ever way of writing classes
    Possibly due to the fact there are no "classes" in javascript?

    Another way to assign a unique ID is to create the Grid objects with a closure:
    Code:
        var Grid = (function () {
            var _currentID = 0;
            return function () {
                return {
                    gridID: _currentID++,
                    addTable: function () {
                        foo(this.gridID);
                        bar();
                    }
                }
            }
        }());
    Err... yes, OK the syntax is pretty grim
    Last edited by NicTlt; 05-10-2010 at 09:41 AM. Reason: Moving method broke object
    Here begynith a techynge of the newe Scrypte with many other helpy thynges, etc

  6. #6
    Join Date
    May 2010
    Posts
    213
    Quote Originally Posted by NicTlt View Post
    Possibly due to the fact there are no "classes" in javascript?
    How is that a fact? We're working with classes throughout this whole thread o.O
    i love easter eggs
    (if you got any creative easter eggs, send me a PM)

  7. #7
    Join Date
    Apr 2010
    Location
    UK
    Posts
    117
    https://developer.mozilla.org/en/Cor...de/Inheritance
    JS is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.

    http://www.ecma-international.org/pu...ber%201999.pdf
    ECMAScript does not contain proper classes such as those in C++, Smalltalk, or Java, but rather,
    supports constructors which create objects by executing code that allocates storage for the objects and
    initialises all or part of them by assigning initial values to their properties. All constructors are objects,
    but not all objects are constructors. Each constructor has a Prototype property that is used to implement
    prototype-based inheritance and shared properties. Objects are created by using constructors in new
    expressions; for example, new String("A String") creates a new String object. Invoking a
    constructor without using new has consequences that depend on the constructor. For example,
    String("A String") produces a primitive string, not an object.
    ECMAScript supports prototype-based inheritance. Every constructor has an associated prototype, and
    every object created by that constructor has an implicit reference to the prototype (called the objectís
    prototype) associated with its constructor. Furthermore, a prototype may have a non-null implicit
    reference to its prototype, and so on; this is called the prototype chain. When a reference is made to a
    property in an object, that reference is to the property of that name in the first object in the prototype
    chain that contains a property of that name. In other words, first the object mentioned directly is
    examined for such a property; if that object contains the named property, that is the property to which
    the reference refers; if that object does not contain the named property, the prototype for that object is
    examined next; and so on.
    In a class-based object-oriented language, in general, state is carried by instances, methods are carried
    by classes, and inheritance is only of structure and behaviour. In ECMAScript, the state and methods are
    carried by objects, and structure, behaviour, and state are all inherited.
    Here begynith a techynge of the newe Scrypte with many other helpy thynges, etc

  8. #8
    Join Date
    May 2010
    Posts
    213
    Oh... okay then.
    i love easter eggs
    (if you got any creative easter eggs, send me a PM)

  9. #9
    Join Date
    Apr 2010
    Location
    UK
    Posts
    117
    I can probably tidy my example up a bit, after some more thought:
    Code:
    var Grid = (function () {
        var _currentID = 0;
        return function () {
            this.gridID = _currentID++;
        }
    }());
    
    Grid.prototype.addTable = function () {
        foo(this.gridID);
        bar();
    }
    Here begynith a techynge of the newe Scrypte with many other helpy thynges, etc

  10. #10
    Join Date
    Apr 2010
    Location
    UK
    Posts
    117
    Quote Originally Posted by 3Nex View Post
    Oh... okay then.
    Yes, sorry, I'm VERY pedantic
    Here begynith a techynge of the newe Scrypte with many other helpy thynges, etc

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles