JavaScript设计模式-01UML类图

UML 类图

Undefined Modeling Language 统一建模语言

注:UML 全部的内容非常多也非常复杂,如果全部讲完应该能写成一本书,市面上也有很多书是专门讲 UML 的,不过我们以作为设计模式的先修内容为出发点,我们只讲类图,对于关系,我们主要说泛化关联

我们继续拿出之前的例子,用它来讲述 UML 类图的基本画法:

class People {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    eat(){
        alert(`${this.name} eat something`);
    }
    speak(){
        alert(`My name is ${this.name},age ${this.age}`)
    }
}

People 类的 UML 类图如下:

根据类图,可以看出 People 类有两个属性分别是字符串类型的姓名和数字类型的年龄,并且有两个返回值为 void 的方法 eat() 和 speak()

当然,实际上一个类不会单独存在,不然也用不到 UML 这种复杂的工具了,一般来说类和类之间有着多种可能的关系,例如组合继承等等,这里我们说两个常见的:

  • 泛化,表示继承
  • 关联,表示引用

我们继续拿出之前举的例子,稍微改造一下就可以用了:

class People{
    constructor(name,house){
        this.name = name;
        this.house = house;
    }
    saySomething(){

    }
}

class A extends People {
    constructor(name,house){
        super(name,house);
    }
    saySomething(){
        console.log("I am A")
    }
}

class B extends People {
    constructor(name,house){
        super(name,house);
    }
    saySomething(){
        console.log("I am B");
    }
}

class House{
    constructor(city){
        this.city = city;
    }
    showCity(){
        console.log(`house in ${this.city}`);
    }
}

这是我们之前用来解释多态性的例子, 但是额外添加了对 House 的依赖,毕竟太简单和太难都不能体现 UML 类图的特性

现在它既有继承关系也有关联关系,比如 A 和 B 都继承了 People,而在 People 中又引用了 House

这里我们给出测试代码:

let aHouse = new House('北京');
let a = new A('aaa',aHouse);
console.log(a)    //a 有房子
let b = new B('bbb');
console.log(b) // b 没有房子

现在我们画出它的 UML 类图,大家一看应该就能明白:

上图表示 A 和 B 分别继承了 People,而 People 又关联(引用)了 House

可以看出,UML 类图一点都不关心具体的实现,它只是为了呈现关系而存在

我们需要用到的知识储备暂时就这么多,现在我们可以来开始讲述设计模式——原则篇了