Menu
I'm having some trouble drawing an accurate UML Class diagram for my JavaScript APP. I've read several UML reference resources, but still didn't find an answer for my situation, since all the examples are based on the classical inheritance and class model of C++/Java.
I want to represent the creation of a custom JavaScript object with a constructor function and extension of it's prototype object, which is quite different from C++/Java class instantiation.
How would you represent this simplified version of my code with an UML class diagram?
var Book = function(title, author) {
this.title = title || 'No title specified';
this.author = author || 'No author specified';
}
Book.prototype.isDigital = false;
Book.prototype.titleDisplay = function() {
alert(this.title);
};
var theHobbit = new Book ("The Hobbit", "J.R.R. Tolkien");
NOTE: I'm especially aiming to show in the diagram how exactly all the involved objects (Book, Book.prototype and theHobbit) are related to each other and to show which parameters are defined in the prototype vs those defined in the constructor. I know I could just pretend Book is a "classical" class, and draw it like it was Java, simplifying the particular JavaScript inheritance mechanism, but I'm sure UML is flexible enough to describe precisely my case.
Is there maybe a UML guide especially for JavaScript projects?
895
In UML models, objects are model elements that represent instances of a class or of classes. You can add objects to your model to represent concrete and prototypical instances. A concrete instance represents an actual person or thing in the real world.
UML class diagrams are mostly used in software engineering for modeling the static structure of applications. They help business analysts to analyze a business domain and depict core business elements, which lay the foundation for a future app.
Object diagrams represent an instance of a class diagram. The basic concepts are similar for class diagrams and object diagrams. Object diagrams also represent the static view of a system but this static view is a snapshot of the system at a particular moment.
What is an object diagram in UML? A UML object diagram represents a specific instance of a class diagram at a certain moment in time. When represented visually, you'll see many similarities to the class diagram. An object diagram focuses on the attributes of a set of objects and how those objects relate to each other.
I would take a look at Object Playground.
It will create a diagram that exactly shows what is going on in your JS object hierarchy.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
