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元

复制代码

本文目的也是引导大家设计和抽象一些实际问题的一种分析和画图的手段，来更好的写出优秀的代码。