html页面的设计图

Question

我的项目只是用简单的html页面开发一个网站.要启动项目,我必须先做设计文档,因为我无法理解应该使用哪种UML图？

Answer 1

不,您不需要拥有UML文档,但是,如果使用得当,我会非常有帮助.

三种类型的图表对我有很大的帮助:

[1](对象和)类图

从这开始.在简单的HTML页面的情况下,它非常容易.只需绘制一个类,即可绘制您的网站所具有的每个特定页面.

在这个例子中,我们有一个带有"Main"页面(index.html)的网站商店和一个"Products"页面.对于静态HTML页面,您可以跳过"属性","方法".

..............................................
..+----------------+..+--------------------+..
..| * : MainPage   |..| * : ProductsPage   |..
..+----------------+..+--------------------+..
..|                |..|                    |..
..|                |..|                    |..
..|                |..|                    |..
..+----------------+..+--------------------+..
..............................................

[2]活动图("UML Flowchar")

当您的用户点击页面上的链接时,该页面将进入下一页？

......................
.........(O)..........
..........|...........
..........|...........
..........v...........
..+----------------+..
..|  Enter         |..
..|  (MainPage);   |..
..|                |..
..+----------------+..
..........|...........
..........|...........
..........v...........
..+----------------+..
..|  ClickLink     |..
..| (CatalogPage); |..
..|                |..
..+----------------+..
..........|...........
..........|...........
..........v...........
..+----------------+..
..|  Enter         |..
..| (CatalogPage); |..
..|                |..
..+----------------+..
..........|...........
..........|...........
..........v...........
.........(X)..........
......................

[3]序列图

它们类似于活动图,但是更复杂,它们更像是二维图.

只有在你理解它们的情况下才使用它们.

.........................................................................
......+--------------+.....+--------------+........+-----------------+...
......| * : User     |.....+ * : MainPage +........| * : CatalogPage |...
......+-------+------+.....+------+-------+........+--------+--------+...
..............|...................|.........................|............
............+-+-+...............+-+-+.....................+-+-+..........
....start().|   |...enter().....|   |.....................|   |..........
.(O)=======>+   +==============>+   |.....................|   |..........
............|   |...............|   |..Show().............|   |..........
............|   |...............|   +===+.................|   |..........
............|   |...............|   |...!.................|   |..........
........+---+   |<--------------|   +<==+.................|   |..........
........|...|   |...............|   |.....................|   |..........
........|...|   |.ClickLink.....|   |.....................|   |..........
........|...|   |...("Catalog").|   |.......enter().......|   |..Show()..
........+-->+   +==============>+   +====================>+   +===+......
............|   |...............|   |.....................|   |...!......
............|   |...............+-+-+.....................|   |...!......
...finish().|   |.........................................|   |...!......
.( )<-------+   +<----------------------------------------+   +<==+......
............|   |.........................................|   |..........
............+-+-+.........................................+---+..........
.........................................................................

注意:在此示例中,用户("actor")将其显示为块类.

请记住,不要使用UML图表,如果您不理解它们,它将使您的工作变得困难,而不是帮助您.

干杯.