javascript 绘制uml_js面向对象编程和UML类图的设计
引言
前端一直以来由于JavaScript的语言特性和一些限制导致不能很好的和Java等强类型语言一样面向对象化编程，导致es6到来以后，class的语法糖或者ts中面向对象编程的设计显得比较薄弱，接下来记录一个小例子来演示一下类图设计和代码实现过程
场景例子
平时打车为例：
1、车分为快车和专车，它们都有车牌号和名字；
2、快车每公里2元，专车每公里4元；
3、添加一个为5公里路程的行程；
分析
每个车都有车牌号和名字，车分为快车和专车，可以将车抽象为父类，不同的车继承父类进行实例化。每个行程是由车完成的，所以要为每个行程添加一个车和路程。
画出UML类图
本次选择的工具是比较流行的ProcessOn的在线化编辑工具www.processon.com/
1、画出车的父类，有两个属性：number和name，添加属性和方法要使用+
2、画出行程类，我们知道行程是要靠车来完成的，所以行程含有：car和行程长度属性，并且含有两个行为：开始行程start()和终止行程end()。
3、画出快车子类和专车子类，车子的实例都有价格属性，每个车是不同的。
快车：
专车：
4、标明继承和引用的关系，继承关系使用空心箭头，实例传递使用实心箭头
代码实现和测试
//车的父类
class Car {
constructor(number, name) {
this.name = name
this.number = number
}
}
//行程类
class Trip {
constructor(car, length) {
this.car = car
this.length = length
}
start() {
console.log(`行程开始：名称：${this.car.name},车牌号：${this.car.number}`)
}
end() {
console.log(`行程结束：价格：￥ ${this.car.price * this.length}元`)
}
}
//快车子类
class Kuaiche extends Car {
constructor(number, name) {
super(number, name)
this.price = 1
}
}
//专车子类
class Zhuanche extends Car {
constructor(number, name) {
super(number, name)
this.price = 2
}
}
//测试
let car = new Kuaiche('京A11010B', '宝马X5')
let trip = new Trip(car, 10)
trip.start() //行程开始：名称：宝马X5,车牌号：京A11010B
trip.end() // 行程结束：价格：￥ 10元
复制代码
本文目的也是引导大家设计和抽象一些实际问题的一种分析和画图的手段，来更好的写出优秀的代码。
javascript 绘制uml_js面向对象编程和UML类图的设计相关推荐
- 基础（UML类图，设计原则）
序言: 面向对象是PHP5之后增加的功能,是PHP走向现代语言的一个标志. 在过程式设计时代,PHP以学习成本低.入门快的特点赢得很多WEB开发者的青睐,但同时也限制了PHP的发展. 借鉴Java和C ...
- 实用设计软件，自带精美UML类图模板快速作图
UML类图是什么呢?UML是在计算机软件中的一种建模语言,UML图是设计软件.程序的建模工具.UML图又包括用例图.类图.对象图.活动图等九种图形,他们分别有着不同的作用.UML类图是设计UML图中的 ...
- 怎样用uml类图生成java类_JAVA：面向对象编程的底层逻辑，深度剖析
什么是面向对象 在目前的软件开发领域有两种主流的开发方法,分别是结构化开发方法和面向对象开发方法.早期的编程语言如C.Basic.Pascal等都是结构化编程语言,随着软件开发技术的逐渐发展,人们发现 ...
- 【设计模式从青铜到王者】第二篇:UML类图与面向对象编程
系列文章目录 文章目录 系列文章目录 前言 一.设计概念 二.对象和类 三.类层次结构 四.面向对象程序设计基础概念 1.抽象 2.封装 3.继承 4.多态 5.对象之间的关系 总结 前言 一.设计概 ...
- Python自动绘制UML类图、函数调用图（Call Graph）
文章目录 1. 引言 2. 绘制UML类图 2.1 安装graphviz 2.2 安装pyreverse 2.3 绘制UML类图 3. 绘制函数调用图 3.1 安装graphviz 3.2 安装pyc ...
- 快速读懂UML类图，搞懂类之间的6大关系，轻松绘制UML类图
快速读懂UML类图,搞懂类之间的6大关系,轻松绘制UML类图 前言 一.UML类图简介 二.类之间的六大关系及UML类图 1.依赖关系及UML类图表示 2.泛化关系及UML类图表示 3.实现关系及UM ...
- android 继承类图,Android Studio中绘制UML类图介绍
Android Studio中绘制UML类图介绍 Android Studio中绘制UML类图介绍 动机 最近开始阅读项目源码,从其中一个模块开始看,奈何大项目中的一个模块,对于萌新而言,也太过于复杂 ...
- iOS开发 - 面向对象设计的设计模式（一）：创建型模式（附 Demo UML类图）
继上一篇的面向对象设计的设计原则,本篇是面向对象设计系列的第二个部分:面向对象设计的设计模式的第一篇文章. 另外,本篇博客的代码和类图都保存在我的GitHub库中:中的Chapter2. 最开始说一下 ...
- 【面向对象编程】(4) 类的继承，重构父类中的方法
各位同学好,今天和大家分享一下面向对象编程中,类的三大特征之继承.主要介绍:子类继承父类的基本方法:重写父类的类方法:重构父类的初始化方法:super() 方法.本节主要是单继承,多继承在下一节中介绍 ...
最新文章
- HDFS配置Kerberos认证
- 刚开始学centos和Oracle
- bash文件外传入参数
- alfresco mysql搭建_Alfresco Community 4.0.d 安装图解
- [003]容器和动态数组的使用
- 计算机网络教程三次握手,计算机网络（二） TCP协议的三次握手
- Google “推翻”无监督研究成果！斩获 ICML 2019 最佳论文
- AlphaGo Zero：从头开始学习
- java 只保留字母_java编程问题，急急急！输入一个字符串，如果字符串中存在字母a的次数大于1，则只保留第一个a，...
- 计算机注册表命令,进入注册表的方法和命令（电脑的注册表怎么打开）
- ArcMAP实现矢量数据平移
- linux命令 ---rm
- 水安ABC考试多选练习题库
- 联想拯救者isk15安装固态硬盘记录
- 训练自己的yolov5样本, 并部署到rv1126 ＜三＞
- 帮我写一个C++程序，输入一个数，输出这个数的平方
- kubernetes中infra容器的理解
- 人脸定位原来这么简单，小白也能上手人脸识别——人脸识别概述
- WordPress 插件开发教程:插件加载顺序、创建插件、add_action与do_action
- 桌面上倒计时提醒的好用软件有哪些 热门好看桌面倒计时软件推荐