# JS 筆記
## 物件導向5原則(SOLID)

### 【S-單一功能原則】
每一個物件，單一功能概念
ex. 方向盤 => 控制方向
寫多一點class

### 【O-開閉原則】
外部開放，內部封閉(新需求已擴充、非修改)
### 【L-替換原則】
### 【I-介面隔離原則】
### 【D-依賴反轉原則】

### 【避免高耦合】
ex. 今天單一物件中修改A會影響到B，不符合單一功能原則
* 資料與商業邏輯混再一起(高耦合)

OOP 物件導向
# JS 假物件導向class語法糖
使用new的時候大概都做了哪些事情?
1. var People = {}; //我們建立了一個空物件People
2. People.__proto__ = Object.prototype; //我們將這個空物件的__proto__成員指向了Object函式物件prototype成員物件
3. Object.call(People); //我們將Object函式物件的this指標替換成People，然後再呼叫Object函式

ex.1 自訂類別
{ class } 非實體，不像其他物件導向語言沒有真的類別!is fake!，打出來的是涵式!!
class Persion {
    constructor(name) {
        // 帶進來的參數，指定給this.name
        會產生 { name: name } 的物件
        this.name = name;
    }
    sayH() {
        console.log(this.name)
    }
}
Jack = new Persion("dog");
Jack.sayH(); // "dog"
------------------------------------------------------------------------------
ex.2 JS本身所擁有的類別
// String式類別方法
const str = new String('字串')
// 使用String 裡的length涵式
// str 是 String 的實體
str.length // 2
------------------------------------------------------------------------------
ex.3 繼承類別 { extends }
// 建立一個類別
class Persion {
    constructor(name) {
        ...
    }
    personInfo() {
        console.log(...)
    }
    }
// 想讓A類別繼承B類別
CoolPerson extends Person {
    // ...
}
let coolPerson = new CoolPerson;
// 就可以繼承Persion 使用 Persion 的方法了!!
coolPerson.personInfo();
------------------------------------------------------------------------------
ex.4 "覆寫"母類別的方法 與 在子類別"呼叫母類別"的方法
class Animal {
     constructor(ago) {
         this.ago = ago
     }
     animalInfo() {
         console.log("我愛你")
     }
}
// 繼承
class Rabbit extends Animal {
    constructor () {
        super();
    }
    // 再寫一次覆蓋母類別的方法，讓user呼叫 animalInfo的時候，會走這。
    animalInfo() {
        // { super } 直接呼叫母類別的方法
        super.animalInfo() // "我愛你"
        console.log("我不愛你") // "我不愛你"
    }
}
let rabbit = new Rabbit();
rabbit.animalInfo(); // "我愛你" "我不愛你"
------------------------------------------------------------------------------
ex.5 利用super覆寫constructor
class Animal {
    constructor(name) {
        this.name = name
    }
}

class Rabbit extends Animal {
    constructor(name, earLemgth) {
        // 母類別已有 this.name，不需要再類別寫
        super(name);
        
        this.earLength = earLength;
    }
}

let rabbit = new Rabbit('Jobh', 5)\






        async uploadOTAFile({ commit }, formdata) {
            let res = await api.upload("/api/deviceFile/v1_2/uploadOTAFile", formdata,
                {
                    onUploadProgress: function(progressEvent) {
                        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                        commit("SET_STATE", {
                            target: "progressData",
                            data: {
                                uploadFirmware: percentCompleted,
                            },
                        });
                    },
                }
            );
            commit("SET_STATE", {
                target: "progressData",
                data: {
                    uploadFirmware: 0,
                },
            });
            return res;
        },



            

        async uploadOTAFile({ commit }, formdata) {
            let res = await api.upload("/api/deviceFile/v1_2/uploadOTAFile", formdata,
                {
                    onUploadProgress: function(progressEvent) {
                        var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                        commit("SET_STATE", {
                            target: "progressData",
                            data: {
                                uploadFirmware: percentCompleted,
                            },
                        });
                    },
                }
            );
            commit("SET_STATE", {
                target: "progressData",
                data: {
                    uploadFirmware: 0,
                },
            });
            return res;
        },
            
            
            
            
            

            
            
# 陣列篇