frontend 學習筆記 - organizing js

2022-07-12

3 minute read

creating object

定義物件的時候用 object literal syntax 較好，這個的意思是把 property 跟 value 用類似 array 的方式來寫，例如說

1
2
3
4
5
6
7
const myObject = {
    property: 'Value!',
    otherProperty: 77,
    "obnoxious property": function() {
        // do stuff!
    }
}

可以用 dot notation 或者 bracket notation 拿資料

1
2
3
4
5
// dot notation
myObject.property // 'Value!'

// bracket notation
myObject["obnoxious property"] // [Function]

function 定義在 prototype 比較好，不然每 new 一個 object 出來就會複製一次

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function Student(name, grade) {
    this.name = name
    this.grade = grade
}

Student.prototype.sayName = function() {
    console.log(this.name)
}
Student.prototype.goToProm = function() {
    console.log("Eh.. go to prom?")
}

prototypal inheritance 建議用 Object.create

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function Student() {
}

Student.prototype.sayName = function() {
    console.log(this.name)
}

function EighthGrader(name) {
    this.name = name
    this.grade = 8
}

EighthGrader.prototype = Object.create(Student.prototype)

const carl = new EighthGrader("carl")
carl.sayName() // console.logs "carl"
carl.grade // 8

Factory function

因為用 constructor 可能會有很多可能會有很多非預期錯誤，所以可以使用 factory function 來 create object

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const personFactory = (name, age) => {
    const sayHello = () => console.log('hello!');
    return { name, age, sayHello };
};

const jeff = personFactory('jeff', 27);

console.log(jeff.name); // 'jeff'

jeff.sayHello(); // calls the function and logs 'hello!'

inheritance:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const Person = (name) => {
    const sayName = () => console.log(`my name is ${name}`);
    return {sayName};
}

const Nerd = (name) => {
    // simply create a person and pull out the sayName function with destructuring assignment syntax!
    const {sayName} = Person(name);
    const doSomethingNerdy = () => console.log('nerd stuff');
    return {sayName, doSomethingNerdy};
}

const jeff = Nerd('jeff');

jeff.sayName(); //my name is jeff
jeff.doSomethingNerdy(); // nerd stuff

class

有 getter 跟 setter 可以用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
class User {

    constructor(name) {
        // invokes the setter
        this.name = name;
    }

    get name() {
        return this._name;
    }

    set name(value) {
        if (value.length < 4) {
        alert("Name is too short.");
        return;
        }
        this._name = value;
    }

}

webpack

打包檔案的模組化好工具，可以看這個人的介紹

SOLID principle

Single Responsibility Principle
Open-Closed Principle: open to extension but close to modification，舉例來說當我想要擴建某個 function 的時候我應該要可以直接在 import code 那邊可以擴建而不是去更改 import 的 code
Liskov Substitution Principle
Interface Segregation: export code 的時候 require 必要的東西，剩下的 optional
Dependency Inversion Principle: 大概是上層的模組不依賴下層的，而是用 interface 去實現兩個的接口（？）介紹

linting

vscode eslint 教學

constraint validation

使用 html + js 做 validation