物件導向與UML圖

注意：該文章為自己初步學習用，不適合他人學習，請移步高贊文章。

物件導向是一種對現實世界闡述清晰的方式。

在專案中，特別是typescript中我們主要以OOP程式設計為專案結構的方式為主。

這裡我們簡要概述物件三板斧和UML製圖

一板斧：繼承

class Person {
    constructor(name){
        this.name = name
    }
    
    sayHi() {
        console.log('Hi~ ' + this.name)
    }
}

class Student {
    constructor(name, grilFriend){
        super(name)
        this.grilFriend = grilFriend
    }
}
複製程式碼

Student是繼承自Person的，擁有Person下的引數與方法。

二板斧：封裝

封裝的含義就是 清晰屬性與方法是否進行暴露 。

public     完全公開訪問
protected  只對自身與子類內部開放
private    只對自身內部開放
複製程式碼

class Person {
    public name
    protected age
    
    constructor(name,age){
        this.name = name
        this.age = age
    }
    
    sayHi() {
        console.log('Hi~ ' + this.name)
    }
}

class Student {
    private grilFriend
    constructor(name,age, grilFriend){
        super(name,age)
        this.grilFriend = grilFriend
    }
}
複製程式碼

這個時候子類Student可以訪問到父類的方法和變數，但是經過student構建的物件，只能訪問name，其他的都被隱藏起來了。

三板斧：多型

多型就是子類可以改變父類的方法，構建更適合自己的方式。

class Person {
    constructor(name){
        this.name = name
    }
    
    sayHi() {
        console.log('Hi~ ' + this.name)
    }
}

class Student {
    constructor(name, grilFriend){
        super(name)
        this.grilFriend = grilFriend
    }
    sayHi() {
        console.log('Hi~ ' + this.name +' student.')
    }
}
複製程式碼

這個時候，子類就將父類的sayHi方法進行覆蓋，這樣稱作多型。

三板斧示例

class myJquery {
    constructor(selector) {
        this.selector = document.querySelectorAll(selector)[1] ?
            document.querySelectorAll(selector) :
            document.querySelector(selector);
    }
    // 下面寫一些方法
    showHTML() {
        return this.selector.innerHTML
    }
}

// 工廠模式
window.$ = (selector) => {
    return new myJquery(selector)
}
    
console.log($('#app').showHTML())
複製程式碼

UML製圖

製圖網站： processone.com

為什麼我們要製圖？因為一個專案往往有很多物件與方法，如果沒有清晰的圖表標識，經過我們自己去梳理，還是比較不方便的。

遵循原則

類名
----
變數列表
----
方法列表
----

1.狀態 變數名（方法）：型別
2.“+” 公有成員與方法
  “#” 內部成員與方法
  “-” 私有成員與方法
複製程式碼