移动端UML图应用之UML图简述

article/2025/11/9 14:04:55

系列文章目录

移动端UML图应用之UML图简述
移动端UML图应用之UML行为图——用例图、活动图和状态机图
移动端UML图应用之UML交互图——顺序图和通信图
移动端UML图应用之UML结构图——包图、部署图和组件图
移动端UML图应用之UML结构图——类图


文章目录

  • 系列文章目录
  • 前言
  • 一、什么是UML
    • 三种应用UML的方式
    • 应用UML的三种透视图
  • 二、UML图的分类
    • 结构图
    • 行为图
    • 交互图
  • 总结


前言

作为一名从业多年的移动端开发者,深感设计思想、规范的设计工具应用在移动端开发中的缺失。移动端开发,不论android还是iOS,在当年的互联网浪潮中迅速崛起,吸引了大批优秀的青年从事这一行业,其中不乏大量的第一次接触代码或第一次从事软件开发行业的人。新生力量的注入,为互联网行业后面好几年的迅猛发展提供了巨大的支撑,移动应用(后简称app)一个个的被开发出来,无数app成了现在大家每天必须打交道的“日常必需品”,譬如微信、微博、抖音,更有数不清的app在这个过程中被淘汰掉。

巨大的利益,吸引着大量的人才、大量的资金,也注定使这一行鱼龙混杂,甚至很多不懂得软件开发的人,也想通过上一两节培训课,尝试在面试中蒙混过关。加上一个移动应用的安全性问题、稳定性问题,造成的也只是一个终端/用户的困扰,不会导致全网/系统的崩溃、或产生巨大的安全隐患,所以移动应用的代码质量一直不受重视,用程序员经常自我调侃的一句话来说,就是“又不是不能用”。前期开发周期不允许,后期忙着给前期填坑,要么就是忙着挖新坑,挖新坑的话,比起设计,移动开发者更重视的是用上最新的技术,譬如前几年Github开源的响应式框架ReactiveCocoa、还有前仆后继的iOS开发者想用swift语言替换OC。

作为普通的移动应用开发者,确实也无需太过在意代码的设计,但我现在入职的是一家TOB的公司,我们提供的产品形态,包括PaaS、aPaaS跟SaaS,提供的产品也多种多样,有直播系列的产品,也有点播系列的产品。服务的客户也涉及各行各业,有轻度使用客户,也不乏深度使用客户,需要各种灵活的功能配置,自定义功能等等。这要求我们的代码不仅要“能用”,还要“好用”、“好看”。我们面向的服务对象,不是移动应用的用户,而是一个个企业客户,我们的代码如果有bug,将有可能给客户造成损失。我们的代码如果设计不合理,将造成集成客户的不良体验,甚至影响后续功能的迭代,导致无法向下兼容等问题,造成已集成旧版本SDK的客户的不便。所以,这些年来我们一直致力于如何把代码写“好”,不仅“好用”,还要“好看”,这部分不是今天讨论的重点,就不展开细说。

想把代码写好,首先需要有好的设计思想支撑,而好的设计思想,需要一种标准化的可视化工具来辅助思考、进行沟通。所以在讲设计原则、设计模式之前,想先把UML图示法给整理一下,我会分为几篇博文来完成这一系列主题。文中很多内容,并非我的原创,而是摘自一些优秀的老师的书籍,每篇博文末尾我会写上参考文献,文中就不一一指出了。希望我的文章能给跟我同样需求的同行者带来些许的帮助,本人能力有限,有说得不对的地方,也请各位给予指正。


一、什么是UML

统一建模语言(UML)是描述、构造和文档化系统制品的可视化语言。

UML是标准的图形表示法,这既是一种思考的工具,也是一种沟通的形式。

三种应用UML的方式

UML作为草图——非正式的、不完整的图(通常是在白板上手绘草图),借助可视化语言的功能,用于探讨问题或解决方案空间的复杂部分。

UML作为蓝图——相对详细的设计图,用于:
1)逆向工程,即以UML图的方式对现有代码进行可视化,使其易于理解。
2)代码生成(前向工程)。

对于逆向工程,UML工具读取源文件或二进制文件,并生成UML包图、类图和时序图(一般情况下)。这些“蓝图”能够帮助读者从整体上理解元素、结构和协作。
对于前向工程,无论是人工还是使用自动工具生成代码(例如,Java代码),在此之前绘制一些详细的图都能够为生成代码的工作提供指导。

UML作为编程语言——用UML完成软件系统可执行规格说明。可执行代码能够被自动生成,但并不像通常一样为开发者所见或修改;人们仅使用UML“编程语言”进行工作。如此应用UML需要有将所有行为或逻辑进行图形化表示的实用方法(很可能使用交互图或状态图),但是目前在理论、工具的健壮性和可用性方面仍然处于发展阶段。

绘制或阅读UML意味着我们要以更加可视化的方式工作,开发我们的脑力,以便更快地掌握(主流)二维框-线表示法中的符号、单元及关系。但与此同时,我们要注意不能迷失在大量的UML细节跟工具中。图可以帮助我们更为便利地观察全景,发现软件元素或分析之间的联系,同时也允许我们忽略或隐藏旁枝末节。这才是UML或其他图形化语言的本质价值。

应用UML的三种透视图

同样的UML类图表示法既能够描绘现实世界的概念,又能够描绘Java中的软件类。

1)概念透视图:用图来描述现实世界或关注领域中的事物。
2)规格说明(软件)透视图:用图(使用与概念透视图中相同的表示法)来描述软件的抽象物或具有规格说明和接口的构件,但是并不约定特定实现(例如,非特定为C#或Java中的类)。
3)实现(软件)透视图:用图来描述特定技术(例如,Java)中的软件实现。

UML的不同透视图


在实际设计过程中,很少会使用规格说明透视图(推延了目标技术的选择,例如使用Java还是使用.NET);大多数面向软件的UML图都会采用实现透视图。但是基于移动端开发的特性,如果我们希望同样的设计,能在iOS端跟android端同时得到实现,则需要采用规格说明透视图。

最后再次声明,UML仅仅是标准的图形化表示法,例如框,线等。使用常用符号的可视化建模能够带来极大的帮助,但它不可能与设计和对象思想同等重要。如果没有真正掌握如何创建优秀的面向对象设计,或者如何评估和改进现有设计,那么学习UML也是毫无意义的,只能画出拙劣的设计。如果要深入了解这一主题,建议阅读《Death by UML Fever》作者Alex E. Bell 和《What UML Is and Isn’t? 》作者Craig Larman。


二、UML图的分类

UML图分为结构图、行为图和交互图。

UML图类型


结构图

结构图描述了系统的静态视图或结构,它广泛用于软件体系结构文档中,它提出了系统的大纲,强调建模要存在的元素。

  • 类图:类图是使用最广泛的图之一,它显示系统的类、属性和方法,描述了系统的静态结构。是所有面向对象软件系统的骨干。
  • 对象图:对象图描述了系统在特定时间点的静态结构,可以用来测试类图的准确性。
  • 包图:包图提供了组织元素的方式,能够用于组织其他包、类或者用例图。
  • 部署图:部署图表示了软件元素在物理架构上的部署,以及物理元素之间的通信(通常通过网络进行)。
  • 组件图:组件图描绘了系统中物理组件的组织、软件系统各要素之间的结构关系,确定了计划的开发是否已考虑了所需的功能要求。
  • 组合结构图:组合结构图显示了类中的各个部分。它显示确定类行为的零件及其配置之间的关系。它充分利用端口、零件和连接器来描绘结构化分类器的内部结构。它与类图相似,只是与类图相比,它以详细的方式表示各个部分。

行为图

行为图描绘了系统的动态视图或系统的行为,描述了系统的功能,定义了系统内的交互。

  • 状态机图:利用有限状态转移描述系统的行为,对一个类响应外部刺激的动态行为进行建模。
  • 活动图:活动图模拟了从一个活动到另一个活动的控制流,直观地描绘了工作流程以及导致事件发生的原因。
  • 用例图:用例图通过利用参与者和用例来表示系统的功能,封装了系统的功能需求及其与参与者的关联。

交互图

交互图是行为图的子类,它显示了对象之间如何交互以及数据如何在对象内部流动。

  • 顺序图:根据随时间交换的消息显示对象之间的交互,描述了系统中对象功能的排列顺序和方式。
  • 通讯图:显示了对象之间顺序消息的交换,着重于对象及其关系,描述了系统的静态和动态行为。
  • 时间图:用于描述对象在特定时间段内的行为,通过显示时间和持续时间约束来控制状态和对象行为的变化。
  • 交互概述图:它是活动图和顺序图的混合物,描述了将复杂交互简化为简单交互的一系列动作。

UML建模初学者没有对交互图给予足够重视,大部分UML初学者知道类图,并且通常认为类图是OO设计中唯一重要的图形。但实际上并非如此!尽管静态视图类图确实有效,但动态视图的交互图(更确切地说是动态交互建模中的动作)的价值更高。

应该花费时间使用交互图进行动态对象建模,而不仅是使用类图进行静态对象建模。因为当我们要考虑真正的OO设计细节时,就必须要“落实”发送哪些消息、发送给谁、以何种顺序发送等具体问题。

类图的定义能够从交互图中产生。这表明一种线性的顺序,即先绘制交互图,再绘制类图。但是在实践中,这些互补的动态视图和静态视图是并行创建的。


总结

以上就是本篇文章要讲的内容,本文仅仅简单介绍了什么是UML图以及UML图有哪些具体的类型,接下来的一系列文章将会对上文提到的各种UML图(很少用的对象图、组件图、组合结构图、交互概述图、时间图除外)进行一一讲解。


参考书籍

[1] UML和模式应用(原书第3版)作者:拉曼


http://chatgpt.dhexx.cn/article/WN2O5Vh9.shtml

相关文章

IDEA 思维导图 ,类UML 图工具插件 plantUML integration

文章目录 IDEA 思维导图 ,类UML 图工具插件 plantUML integration1、安装2、UML3、使用 plantUML integrationIDEA 思维导图 ,类UML 图工具插件 plantUML integration 1、安装 找到插件并安装 2、UML UML 图包括序列图、用例图、类图、活动图、协作图、组件图、对象图、状态…

Mac下一款好用的UML图绘制工具(StarUML)

Mac下一款好用的UML图绘制工具(StarUML) 推荐一款好用的Mac下绘制UML图的工具,叫做StarUML,它是一款很好用的UML图的工具,但是是收费的,不过可以设置相应代码,免费使用,附上官方下载…

UML建模与软件开发设计(三)——UML常用开发工具

4.4.UML常用开发工具 常用的UML设计工具有微软Office自带的Visio、Rational Rose、PowerDesign以及StarUML。在本文档中,我们使用StarUML来作为类图和时序图的设计工具。 4.4.1.StarUML开发工具的下载与破解 4.4.1.StarUML下载地址 (1)普…

12个优秀的开源UML工具

本文将为您介绍12个优秀的UML工具: 1. StarUML StarUML(简称SU),是一种创建UML类图,是一种生成类图和其他类型的统一建模语言(UML)图表的工具。StarUML是一个开源项目之一发展快、灵活、可扩展性强(zj)。 2. Netbeans UML Plugin 目前支持…

vue双向绑定的原理

之前我有个学生在面试的时候,面试官问vue的双向绑定如何实现?学生说用v-module实现。又问那么双向绑定的原理是什么?就回答不上来了,这个offer工资在18k左右,其他问题都回答上来了,如果这个问题能回答上来基…

vue 单向绑定 双向绑定

参考:【Vue】vue 单向绑定& 双向绑定 - vickylinj - 博客园 在react中是单向数据绑定,而Vue.js 最显著的特点就是响应式和数据驱动,也就是将Model和View进行单向绑定或者双向绑定。 单向绑定:把Model绑定到View,…

vue 双向绑定 getter 和 setter

它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它和Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检…

vue双向绑定不生效、对象中的属性值发生改变页面不会重新渲染问题解决办法

文章目录 vue双向绑定原理方法一 增加一个基本类型的变量方法二 使用整体对象替换方法三 使用vue文档提供的方法 vue双向绑定原理 vue深入式响应原理,当我们在data中声明变量对象,Vue 将遍历此对象所有的 property(如下面的list)…

前端技巧|vue双向绑定原理,助你面试成功

在面试一些大厂的时候,面试官可能会问到你vue双向数据绑定的原理是什么?有些小伙伴不知道是什么东西,这样你在面试官的眼里就大打折扣了。今天小千就来给大家介绍一下vue的双向绑定原理,千万不要错过啦。 vue双向绑定 大家其实对…

vue双向绑定数组

众所周知,vue中v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。 大部分情况,v-model是绑定一个对象的属性,但是如果数据库中的数据是一个数组,这种情况下,如果把数组转换成对象再绑定,然后再转换回去提交…

vue双向绑定经典案例

1、无需废话&#xff0c;直接上代码 复制到新建的记事本文件&#xff0c;保存问demo.html即可。 <script src"https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <!DOCTYPE html> <html><head> <meta charset"utf…

浅谈vue双向绑定的原理

一、什么是双向绑定 我们先从单向绑定切入 单向绑定非常简单&#xff0c;就是把Model绑定到View&#xff0c;当我们用JavaScript代码更新Model时&#xff0c;View就会自动更新 双向绑定就很容易联想到了&#xff0c;在单向绑定的基础上&#xff0c;用户更新了View&#xff0…

vue双向绑定

1.vue双向绑定原理 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式&#xff0c;通过Object.defineProperty()来劫持各个属性的setter&#xff0c;getter&#xff0c;在数据变动时发布消息给订阅者&#xff0c;触发相应的监听回调。我们先来看Object.defineProperty()这个…

Vue基础知识总结 6:vue双向绑定原理

&#x1f345; 作者简介&#xff1a;哪吒&#xff0c;CSDN2021博客之星亚军&#x1f3c6;、新星计划导师✌、博客专家&#x1f4aa; &#x1f345; 哪吒多年工作总结&#xff1a;Java学习路线总结&#xff0c;搬砖工逆袭Java架构师 &#x1f345; 关注公众号【哪吒编程】&#…

7、Vue双向绑定原理和实现

原理 视图&#xff08;view&#xff09;变化更新数据&#xff08;data&#xff09;。这个很简单&#xff0c;通过事件监听就可以实现数据&#xff08;data&#xff09;变化更新视图&#xff08;view&#xff09;。通过数据劫持&#xff08;即Object.defineProperty( )方法&…

vue---双向绑定

目录 1、.sync修饰符-双向绑定 2、v-model修饰符-双向绑定 3、双向绑定原理 vue 中的双向绑定是语法糖。 1、.sync修饰符-双向绑定 . vue是单向数据流的。父组件可以通过prop向子组件传递数据。子组件需要通过自定义事件来将自己的数据变更通知给父组件&#xff0c;我们可以通过…

vue实现双向绑定的方式

什么是双向绑定 我们先从单向绑定切入,单向绑定非常简单&#xff0c;就是把Model绑定到View&#xff0c;当我们用JavaScript代码更新Model时&#xff0c;View就会自动更新. 双向绑定就很容易联想到了&#xff0c;在单向绑定的基础上&#xff0c;用户更新了View&#xff0c;Mode…

vue数据双向绑定

5.Vue数据双向绑定 5.1.什么是双向数据绑定 Vue.js 是一个 MVVM 框架&#xff0c;即数据双向绑定&#xff0c;即当数据发生变化的时候&#xff0c;视图也就发生变化&#xff0c;当视图发生变化的时候&#xff0c;数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。 值得…

vue双向绑定原理

** Vue双向绑定的原理 一、在讲vue双向绑定之前我们需要来了解下MVVM模式 MVVM&#xff08;Model-View-ViewModel&#xff09;是对 MVC&#xff08;Model-View-Control&#xff09;和 MVP&#xff08;Model-View-Presenter&#xff09;的进一步改进。 View&#xff1a;视图层…

OpenCV中的图像处理 —— 傅里叶变换+模板匹配

OpenCV中的图像处理 —— 傅里叶变换模板匹配 现在也在逐渐深入啦&#xff0c;希望跟大家一起进步越来越强 目录 OpenCV中的图像处理 —— 傅里叶变换模板匹配1. 傅里叶变换1.1 Numpy实现傅里叶变换1.2 OpenCV实现傅里叶变换1.3 DFT的性能优化 2. 模板匹配2.1 单对象的模板匹配…