架构师01:架构设计的 UML 图形思考(Graphic Thinking)

目录

目录

一、建模与图形思考

在项目正式 Coding 之前,架构师(Architect)的工作主要有两个方面:创意设计人际沟通。如何去完成这两部分内容呢?答案就是:UML 图。

图片来源于维基百科

借助 UML 图形,架构师可以对整个项目的架构或者框架进行创意设计。通过图形建模将内含的基本概念和关系表达出来。在沟通的时候也可以通过 UML 图形,让不懂代码的人也能够理解整体的设计,减少沟通的成本。

所以,对于架构师来说,其图形绘制能力和思考能力越好,其创意设计与人际沟通能力就越好。

二、UML建模工具

Astah Professional:Astah Professional(原名JUDE)是UML建模工具中,最具有简洁设计、轻便简单、易学好用的。Astah 功能强大,支持UML2.x中的图表(Diagram),包括:

  • Class Diagram(类别图)
  • Use Case Diagram(用例图)
  • Statemachine Diagram(状态机图)
  • Sequence Diagram(顺序图)
  • Activity Diagram(活动图)
  • Communication Diagram(通信图)
  • Component Diagram(模块图)
  • Deployment Diagram(布署图)
  • Composite Structure Diagram(组合结构图)

官方网站:http://astah.net/

可以下载一个免费小区型(Community)版本来使用。

三、绘制UML类别图:表达<基类/子类>

下载安装好 Astah 后,我们来尝试画一下类别图,看看在类别图中,如何表达基类、子类的关系。

  • step1:启动 Astah ,在菜单栏中选择<Diagram>,在出现的下拉框中选择Class Diagram
创建类别图

选择后,界面会出现一个空白的类别图,我们将在上面绘制我们需要的 Class。

新建的类别图

在空白的类别图上方,有一排类别图的元素(Element),简称「图素」,如下:

Element
  • step2:在元素列表中,我们选中第二个图素,然后移动鼠标到图表里面,按下鼠标左键,就会在图标中出现一个类别元素;
选中类别元素
点击鼠标左键,生成一个类别元素

假设这个类别元素是 Android 里面的 Activity 。

基类:Activity

tips:如果想要修改类别元素的背景颜色。可以右键,选中Set Color,然后选择自己喜欢的颜色就行。

Set Color

让我们再画一个类别元素,名叫MyActivity

2019-08-08_111738.jpg
  • step3:建立 Activity 和 MyActivity 之间的继承关系。在元素列表中,选中Generalization,然后将鼠标移动到 MyActivity 上,点击左键,再将鼠标移动到 Activity上,点击左键,即可完成;
选中Generalization
建立继承关系

四、绘制UML类别图:表达接口(Interface)

对于架构师而言,接口(Interface)的角色比类(Class)来得重要多了。在上一小节中,我们学些了继承(extends)关系的表达,在这一小节,我们来学习一下实现(implements)关系如何表示。

我们以 Activity 实现 OnClickListener 接口为例:

public class MyActivity extends Activity implements OnClickListener {
  ......
}
  • step1:在元素列表中选中接口图素,然后移动鼠标到类别图的空白位置,点击鼠标左键创建一个接口元素,取名叫OnClickListener
选中<Interface>图素
创建一个接口元素
  • step2:为 OnClickListener 接口创建一个注释 <Note>
选中<Note>

在<Note>里面声明一下接口中的抽象方法:

声明onclick方法
  • step3:选中 <NoteAnchor> 图素将注释和接口连接起来;
选中 <NoteAnchor>
将注释和接口连接起来
  • step4:表达 Class 与接口之间的关系。选中 <Association>图素,将 MyActivity 和 OnClickListener 连接起来;
选中<Association>图素
连接 MyActivity 和 OnClickListener

在 MyActivity 中声明一下实现的 onClick 方法:

2019-08-08_145315.jpg
2019-08-08_145722.jpg

当 MyActivity 实现了 OnClickListener 接口以后,其它类就能通过此接口来调用 MyActivity 里的 onClick() 函数:

public class MyActivity extends Activity {
@Override public void onCreate(Bundle icicle) {
  super.onCreate(icicle);
  setContentView(R.layout.main);
  Button btn = new Button(this);
  btn.setText("OK");
  btn.setBackgroundResource(R.drawable.heart);
  btn.setOnClickListener(this);
  setContentView(button);
}

上述代码表示了页面中有一个 Button,该 Button 调用了 onClick 方法:

2019-08-08_165235.jpg

那么 onClick 方法调用的顺序是怎样的呢?下面,我们来画一画。

首先,选中<Association>图素,将 Button 和 OnClickListener 接口连接起来,注意连线的时候,是从 Button 到 OnClickListener :

2019-08-08_171558.jpg

然后在连接线处点击右键,选择Navigation -> Navigable。然后我们就可以看到,原来的直线已经带上了箭头,箭头的方向指向被调用方。

2019-08-08_171957.jpg
2019-08-08_172259.jpg

我们可以给线改成其他颜色,这样更加清晰:

2019-08-08_172800.jpg

OnClickListener 则会去调用 MyActivity 中的 onClick() 方法:

2019-08-08_172721.jpg

我们可以在线上标记出方法名:右键,选项 Set Name,填入 onClick():

Set Name
2019-08-08_173139.jpg

这样,我们就把实现关系,以及方法调用的顺序给描述清楚了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351