www.webdeveloper.com
Results 1 to 8 of 8

Thread: Design Object oriented data format

  1. #1
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34

    Design Object oriented data format

    Hey everyone,

    I am currently trying to design an object orientend model in JavaScript.

    As far as I know, JavaScript is not object oriented but prototypical and there a ways to get create object oriented models with frameworks like MooTools. Hopefully I'm right.

    I've already taken a look at MooTools, but several tutorial couldn't help me in my case.

    Basically I am trying to design this C# data model (class diagram from visual studio) in JavaScript. Can anybody help me?

    http://www.upload-pictures.de/bild.p...agramUK8W1.png


    Thanks in advance for your help!
    Steve

  2. #2
    Join Date
    Apr 2012
    Posts
    55
    My suggestion to you is to learn prototypal inheritance. Javascript is strongly object oriented; it just doesn't use a class-based inheritance model. Prototypal inheritance is an alternate way to do inheritance, but it's still object oriented.

    Prototypes are really cool and you can do a lot with them, including mimic class-based inheritance. The prototype model is actually much more dynamic and malleable than the classical model (that's why you can emulate classes in JavaScript but you can't emulate prototypes in C#), and it's really a lot of fun to work with. So I suggest you learn how to use prototypes well, and then you can do what you want with it and more.

    If you're set on using classes, though, there are libraries out there that will help you transition JavaScript into a class-based inheritance model. MooTools is a really good one.

    There are also libraries that preserve prototypal inheritance while providing some extra bang for your buck; for that you could use joi (shameless plug for my own library).

    I don't have time to expand on how to implement the data structure you need in both of these models, but in a few hours if no one has come along to help with that, I'll return.
    joi JavaScript Framework - the sunnier side of JavaScript.

  3. #3
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34
    Thanks for your immediate response, nathanwall.
    I would really appreciate if you or someone else could show me how I could implement my data structure in one of those models.

    Steve

  4. #4
    Join Date
    Apr 2012
    Posts
    55
    A couple questions:

    Which browsers do you need it to support? and/or How important is implementing properties instead of simple fields? Many older browsers don't support properties or support them in different ways. It'd be good to know whether property support or cross-browser support is more important to you.

    If you prefer to support as many browsers as possible, properties can be emulated with fields or functions.
    joi JavaScript Framework - the sunnier side of JavaScript.

  5. #5
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Simple way:
    Code:
    function Group(elements, x, y) {
        return {
            elements: elements,
            x: x,
            y: y
        };
    }
    More complicated way with private instance variables:
    Code:
    function Group(elementsA, xA, yA) {
        var elements = elementsA,
            x = xA,
            y = yA,
            group = {};
        group.getElements = function() {
            return elements;
        };
        group.getX = function() {
            return x;
        };
        group.getY = function() {
            return y;
        };
        group.setElements = function(elementsA) {
            elements = elementsA;
        };
        group.setX = function(xA) {
            x = xA;
        };
        group.setY = function(yA) {
            y = yA;
        };
        return group;
    }​
    I tend to use the simpler way as the more complicated way (that mimics traditional class based languages) doesn't get you that much. This is a good video for those coming to JS from a class based background. In JS you use functions to mimic classes.
    Last edited by handcraftedweb; 05-08-2012 at 11:24 AM.

  6. #6
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34
    Quote Originally Posted by nathanwall View Post
    A couple questions:

    Which browsers do you need it to support? and/or How important is implementing properties instead of simple fields? Many older browsers don't support properties or support them in different ways. It'd be good to know whether property support or cross-browser support is more important to you.

    If you prefer to support as many browsers as possible, properties can be emulated with fields or functions.
    I need to support at least IE9, but cross-browser support would be important. Properties are not a must, when there is another efficient way to change value of simple fields. Basically the goal is to build a simple representation of elements on the screen.

    Quote Originally Posted by handcraftedweb View Post
    I tend to use the simpler way as the more complicated way (that mimics traditional class based languages) doesn't get you that much. This is a good video for those coming to JS from a class based background. In JS you use functions to mimic classes.
    Thanks a lot for the link, the video really helped me to better understand how JavaScript works.
    I would prefer the simple way of your posted source code as well, but I don't get it entirely. I guess I'm still thinking too class based

    How would the source code look like, if I wanted to store two groups which contain two elements which again have two FontStyles?

    In C# I would have a List of type Element in the Group class with which I could add and remove Elements as I need and a simple field of type FontStyle in the Element class as shown in my uploaded class diagram.

    According to your simple way I created the following functions:

    Code:
    function Group(elements, x, y) {
    	return {
    		elements: elements,
    		x: x,
    		y: y
    	};
    }
    			
    function Element(fontStyle, type, value, x, y) {
    	return {
    		fontStyle: fontStyle,
    		type: type,
    		value: value,
    		x: x,
    		y: y
    	};
    }
    			
    function FontStyle(fontFamily, fontSize, fontWeight) {
    	return {
    		fontFamily: fontFamily,
    		fontSize: fontSize,
    		fontWeight: fontWeight
    	};
    }
    How and where do I work then with these functions?

    Thanks a lot for your help!

  7. #7
    Join Date
    Mar 2012
    Location
    Austria
    Posts
    34
    Meanwhile I found a solution which works fine for me:

    Code:
    			
    function Group(x, y) {
    	return {
    		elements: [],
    		x: x,
    		y: y,
    		addElement: function(e) {
    		     this.elements[this.elements.length] = e;
    		}
    	};
    }
    But when I "stringify" it to JSON and parse it back to another object, I logically can't access the function addElement any more.
    What would be the solution for that?

  8. #8
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by pro_ceed1 View Post
    Meanwhile I found a solution which works fine for me:

    Code:
    			
    function Group(x, y) {
    	return {
    		elements: [],
    		x: x,
    		y: y,
    		addElement: function(e) {
    		     this.elements[this.elements.length] = e;
    		}
    	};
    }
    But when I "stringify" it to JSON and parse it back to another object, I logically can't access the function addElement any more.
    What would be the solution for that?
    Regardless of how you build your objects, standard JSON serialization and deserialization will not preserve methods. Do one of two things to get around this:

    1) Write your own serialize/deserialize functions to bring functions along -- potentially unsafe, but also the simplest way to rebuild an object without calling constructors, which may have unintended side effects, on placeholder objects. If you're using prototypal object constructions, you'll also need to do the following:

    2) Package objects with some sort of identification before serializing, and then do one of

    a) Write your object constructors to accept a model object and/or JSON during construction. Send the packaged object to the constructor identified in the package. (This is probably the best option overall. Allows objects whose instantiation may have side effects to avoid those effects for object re-instantiation.)

    b) On deserialization, create an instance of the class identified by the package and assign properties to it from the packaged object.

    c) Extract the object, and assign a prototype of the class identified by the package to the object.

    Also bear in mind, if you have any private members, they won't be in included in your JSON by any external serializers. You'd need to refer to them in an internal serializer at instantiation time.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

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