JavaScript - funkcje, Metod

Question

witam, chciałbym się spytać i poprosić o radę/pomoc odnośnie mojego kodu, pewna osoba poradziła mi, abym zrobił "Metod" w if - else, szukałem po poradnikach, ale one zrobiły mi tylko siekę z mózgu.

tutaj jest kod który chcę zrobić metod:

let meta = document.querySelector('meta[name="theme-color"]')

const langTrigger = document.querySelectorAll('#langTrigger')

/* ------x------ ⌄ do optymalizacji? ⌄ ------x------ */

const btnSocial = document.querySelectorAll('.btn__social')

const AddDuration = () => {
    document.body.classList.add('theme__duration')

    for (let i = 0; i < btnSocial.length; i++) {
        btnSocial[i].classList.add('theme__duration')
    }
}

const RemoveDuration = durTime => {
    setTimeout(function() {
        document.body.classList.remove('theme__duration')

        for (let i = 0; i < btnSocial.length; i++) {
            btnSocial[i].classList.remove('theme__duration')
        }
    }, durTime)
}

/* ------x------ ^ do optymalizacji? ^ ------x------ */

//Switch Consts
const switcher = document.querySelector('#themeSwitch') //get switch <input

const switchCheckBox = switchStatus => {
    switcher.checked = switchStatus
}

const setAttribute = (attribute, name) => {
    document.body.setAttribute(attribute, name)
}

const removeAttribute = attribute => {
    document.body.removeAttribute(attribute)
}

const SetDarkModeEffects = () => {
    let dark = localStorage.getItem('DarkMode')
    const changeMetaCol = color => (meta.content = color) // Dynamic Meta color for Mobiles

    if (dark == 1) {
        changeMetaCol('#121212')
        switchCheckBox(true)
        setAttribute('data-theme', 'dark')
        AddDuration()
    } else {
        changeMetaCol('#FAFAFA')
        switchCheckBox(false)
        RemoveDuration(300)
        removeAttribute('data-theme')
    }
}

function rootSwitchChange() {
    if (switcher.checked) {
        switchCheckBox(false)
        localStorage.setItem('DarkMode', '0')
    } else {
        switchCheckBox(true)
        localStorage.setItem('DarkMode', '1')
    }
    SetDarkModeEffects()
}

const switchTrigger = document.querySelector('#switchTrigger') //get switch <li>
switchTrigger.onclick = rootSwitchChange

coś tam próbowałem, ale, że jestem początkujący w js to zapewne jeszcze bardziej to zepsułem niż było bez tego.. jakieś porady?

tutaj zamieszczam link do mojego gita - tam znajdziecie wszystkie pliki

https://github.com/hasiraaa/Hasiraa/blob/master/js/app.js

Answer 1

Nie chodzi o zrobienie metody, bo nawet nie jest to teoretycznie możliwe w tym miejscu (nie ma obiektu, do którego można by tę metodę przypiąć). Chodzi po prostu o to, by powtarzające się rzeczy wyciągnąć do funkcji.

Ogólnie chodzi o to, by zapisywać warunki prościej, bez niepotrzebnego powtarzania kodu, np.

if (switcher.checked) {
        switchCheckBox(false)
        localStorage.setItem('DarkMode', '0')
    } else {
        switchCheckBox(true)
        localStorage.setItem('DarkMode', '1')
    }

można zamienić na:

var newValue = !switcher.checked;
switchCheckBox( newValue );
localStorage.setItem( 'DarkMode', Number( newValue ) );

Tak samo

if (dark == 1) {
        changeMetaCol('#121212')
        switchCheckBox(true)
        setAttribute('data-theme', 'dark')
        AddDuration()
    } else {
        changeMetaCol('#FAFAFA')
        switchCheckBox(false)
        RemoveDuration(300)
        removeAttribute('data-theme')
    }

można wydzielić do osobnej funkcji, np. switchDarkMode lub podobnej.

Comments

dziwne.. w ten sposób nie zbyt mi działa, a próbowałem tym metod i działa.. ale zapewnie zepsułem bardziej niż było to możliwe, co wygląda tak:

 

const darkMode = {
    changeMetaCol(color) {
        meta.content = color
    },
    switchCheckBox(switchStatus) {
        switcher.checked = switchStatus
    },
    addAttribute(attribute, name) {
        document.body.setAttribute(attribute, name)
    },
    removeAttribute(attribute) {
        document.body.removeAttribute(attribute)
    },
    addDuration() {
        document.body.classList.add('theme__duration')

        for (let i = 0; i < btnSocial.length; i++) {
            btnSocial[i].classList.add('theme__duration')
        }
    },
    removeDuration(durTime) {
        setTimeout(function() {
            document.body.classList.remove('theme__duration')

            for (let i = 0; i < btnSocial.length; i++) {
                btnSocial[i].classList.remove('theme__duration')
            }
        }, durTime)
    },
    addStorage(name, value) {
        localStorage.setItem(name, value)
    }
}

const SetDarkModeEffects = () => {
    let dark = localStorage.getItem('DarkMode')

    if (dark == 1) {
        darkMode.changeMetaCol('#121212')
        darkMode.switchCheckBox(true)
        darkMode.addDuration()
        darkMode.addAttribute('data-theme', 'dark')
    } else {
        darkMode.changeMetaCol('#FAFAFA')
        darkMode.switchCheckBox(false)
        darkMode.removeDuration(300)
        darkMode.removeAttribute('data-theme')
    }
}

 

---

W tym momencie po prostu przepisałeś kod na bardziej obiektowy. Tylko że to wciąż jest po prostu obiekt posiadający luźno związane ze sobą funkcje.

tym metod

Nie ma czegoś takiego jak "metod". Jest angielskie method, które na polski tłumaczy się po prostu jako metoda. Dodatkowo metoda to nic innego, jak funkcja należąca do jakiegoś obiektu.

---

cóż, chyba sobie odpuszę to na parę dni, dzięki za pomoc