How to represent Javascript object creation with an UML class diagram?

 ̄綄美尐妖づ 提交于 2021-02-17 22:00:27

问题


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?


回答1:


  • Let's show the main program as the class A.
  • Please, keep classes starting with large letter and members with small ones. Or it is hardly readable.
  • Many things is hard to say, not knowing what you mean. this is a stub of diagram: enter image description here

And read that, please: https://stackoverflow.com/a/21551335/715269




回答2:


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.



来源:https://stackoverflow.com/questions/21560715/how-to-represent-javascript-object-creation-with-an-uml-class-diagram

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!