JavaScript設計模式詳解：02、UML類圖

什麼是UML類圖

UML全稱爲：Unified Modeling Language，中文爲：統一建模語言
，它是非專利的第三代建模和規約語言。UML是一種開放的方法，用於說明、可視化、構建和編寫一個正在開發的、面向對象的、軟件密集系統的製品的開放方法。UML展現了一系列最佳工程實踐，這些最佳實踐在對大規模，複雜系統進行建模方面，特別是在軟件架構層次已經被驗證有效。

上面是UML的定義，UML本身是一個挺複雜的東西，包括了：

1. 用例圖
2. 時序圖
3. 類圖
4. 活動圖
5. 部署圖
6. 組件圖等等。。。

很多，簡單來說**它就是使用圖形來表示程序的一種方式，**它主要面對的多爲強類型的面嚮對象語言，比如說java就是一個最好的表現形式。但是對於JavaScript來說，因爲它是一個弱類型的，並且沒有接口，泛型這些東西（TypeScript除外），所以如果我們使用UML來表示JavaScript程序則要簡單的多。

所以我們上面列舉出來的UML的這些分類，我們只需要學習UML類圖就可以了，下面我就看一下子，我們如何使用UML類圖來表示JavaScript程序。

UML類圖的基礎用法

我這邊是使用了一個在線的UML編譯器 ProcessOn 來製作的

上面的類圖表明瞭我們在本章課程中所用到的所有與類圖相關的內容，整個內容還是比較簡單的。 我們來一起過一下。

類（class）

首先是類，每個這樣的圖形都表示爲一個類，他從上到下被分爲了三個部分：

1. 第一是類名
2. 第二是這個類的屬性，其中“+”、“-”、“#”分別表示public、private、protected，不過在JavaScript中，不需要關注那麼多的屬性，我們只需要關注+ public就可以。然後 attribute1表示爲屬性名，type表示爲屬性的類型。
3. 第三表示類中的方法。+ operation1(params):returnType從左到右分別表示爲：一個公開的方法operation1它接收一個參數params，方法返回returnType

關係（relation）

我們所使用到的關係比較簡單，主要就是兩種：

1. 首先是繼承，三角箭頭爲空的實線表示 “繼承” ， 箭頭指向父類
2. 其次是關聯，比如在上面的類圖中，子類持有關聯類的對象，那麼就表示子類與關聯類建立了一個關聯的關係。三角箭頭不爲空的實線表示 “關聯” ， 箭頭指向被擁有者。

瞭解了UML類圖的基礎表示之後，我們通過一個事例來看一下UML類圖在實例中的應用。

實例

我們通過一個事例來把UML類圖熟悉一下，並通過代碼把這個事例進行一個實現。

我們先來看一下項目需求

一個學校裏面有三個老師，每個老師有10個學生。
有一個公告發布，並通知了學校
學校需要通知給每個老師
每個老師需要通知給他們的所有學生

就這樣一個簡單的需求，我們來分析一下如何去設計這個項目。

1. 首先一個學校裏面有三個老師，每個老師有10個學生，那麼就表示我們需要有三個類分別表示學校、老師、學生
2. 然後有一個公告發布，並通知了學校，表示還需要有一個公告的類，並且擁有一個發佈的功能並持有學校的引用
3. 然後學校需要通知給每個老師，表示學校在接收到公告的通知之後，需要通知學校裏的三個老師
4. 最後每個老師需要通知給他們的所有學生，在老師接到來自學校的公告之後，需要通知給所有的學生。

在分析完成之後，我們來畫一下它的XML類圖，大家可以先自己畫一下，然後看一下再看一下和我畫的有什麼不同，

這就是我畫出來的UML類圖，整體還是比較簡單：

1. 首先它包含4個類，School（學校）、Teacher（教師）、Student（學生）、Notice（公告）
2. 然後Notice持有School的引用，並擁有一個release發佈的方法，該方法接收一個需要發佈的消息參數msg
3. School持有Teacher的引用teachers，它是一個數組，表示了所有的老師，並且它擁有一個接收公告的方法receive,和一個發佈公告的方法release
4. Teacher持有Student的應用students，同樣爲一個數組，表示了每個老師的所有學生，同樣擁有一個接收公告的方法receive,和一個發佈公告的方法release
5. Student則只擁有一個接收公告的方法receive，同時每個學生擁有一個名字name方便我們驗證代碼的時候作爲標記

大家可以先把自己所畫出來的UML類圖和上面的做一個對比，在UML類圖被明確之後，我們就可以進行代碼的開發了。

首先開發的業務邏輯代碼如下：

// 創建類Notice
class Notice {
    // 接收一個school對象
    constructor (school) {
        this.school = school;
    }

    // 發佈消息的方法，接收消息參數
    release (msg) {
        this.school.receive(msg);
    }
}

// 創建類School
class School {
    // 接收學校中的老師teachers
    constructor (teachers) {
        this.teachers = teachers;
    }

    // 接收公告
    receive (msg) {
        this.release(msg);
    }

    // 發佈公告
    release (msg) {
        this.teachers.forEach(teacher => {
            teacher.receive(msg);
        });
    }
}

// 創建類Teacher
class Teacher {
    // 接收每個老師的學生
    constructor (students) {
        this.students = students;
    }

    // 接收公告
    receive (msg) {
        this.release(msg);
    }

    // 發佈公告
    release (msg) {
        this.students.forEach(student => {
            student.receive(msg);
        });
    }
}

// 創建類Student
class Student {
    // 每個學生都有自己的名字
    constructor (name) {
        this.name = name;
    }

    // 接收公告
    receive (msg) {
        // 接收到公告之後的驗證
        console.log(`學生${this.name}接收到公告：${msg}`);
    }
}

這就是根據UML類圖做出來的業務邏輯代碼，代碼還是比較簡單的，上面有詳細的註釋，我們就不在說了。

業務邏輯代碼完成之後，接下來就應該是代碼的驗證：

// 生成30個學生
let students = [];
for (let i = 0 ; i < 30 ; i++) {
    let student = new Student(i + 1);
    students.push(student);
}

// 生成3個老師
let teacher1 = new Teacher(students.splice(0, 10));
let teacher2 = new Teacher(students.splice(0, 10));
let teacher3 = new Teacher(students.splice(0, 10));

// 創建學校
let school = new School([teacher1, teacher2, teacher3]);
// 創建公告
let notice = new Notice(school);

// 發佈公告
notice.release("新發布的消息");

我們可以通過一個html文件引入我們的這個js文件來驗證代碼。當我們調用notice.release("新發布的消息");的時候，則會打印出學生1-30接收到公告：新發布的消息.

總結

在本章我們學習了UML類圖的基礎使用，我是通過一個在線的UML繪製工具 ProcessOn來製作的，在介紹完了UML類圖的一些基礎知識點之後，我們通過一個小的實例來把我們所學到的內容進行了一個實踐。

相信經過本章的學習，大家都能夠掌握UML類圖的這些基礎知識，當然我們本課程中所使用的關於UML的內容都是最基礎的東西，整個UML的知識點還是非常多的，有興趣的同學可以多去了解一下。

本次課程之後的內容都會按照這種內容排序的方式來進行，部分非常重要的設計模式會爲大家列舉一些經典的使用場景，即：

1. 理論
2. 舉例
3. 實現
4. 場景
5. 總結

這樣五個步驟來走。希望大家能夠在後面的課程中學習愉快。