CODELINE

Python
JavaScript
PHP
Wordpress
React

Szybki JS – OOP + DOM

Nauczymy się odtworzyć efekt ScrollIntoView używając bardziej obiektowego podejścia w JS pisząc klasy i zapewniając większą modularność naszego kodu, możliwość aktywowania efektu jedną linijką.

Oto nasz HTML, który zawiera dużo lorem ipsum (aby efekt był zauważalny), ma podpięty pusty plik JavaScript oraz korzysta z kotwic HTML, aby można było (w toporny sposób) przejść do elementów na stronie (automatycznie przescrollować):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <h1>Heading one</h1>
    <h3>Table of contents:</h3>
    <ul>
        <li><a href="#heading-two">Heading Two</a></li>
        <li><a href="#heading-three">Heading Three</a></li>
    </ul>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
   <h2 id="heading-two">Heading two</h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <h2 id="heading-three">Heading three</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos facere dolores facilis rerum adipisci beatae dolorum eveniet? Excepturi temporibus sit minima consectetur, dolore quod, beatae eum a earum fugiat quasi.</p>
   <script src="./test4.js"></script>
    
</body>
</html>

Teraz dodajemy nasz efekt, robiliśmy to już kilka tutoriali temu, więc powinniśmy mniej-więcej rozumieć:

window.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
    
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});

Możemy zmniejszyć sobie wysokość ekranu, aby jeszcze lepiej zauważyć ten efekt (albo wiecej lorem ipsum dodać). Ten kod jak widać łapie wszystkie elementy <a>, które są linkiem nie do zewnętrznej strony, ale kotwicy HTML na stronie.

Następnie dodawany jest listener, który blokuje domyślne działanie, pobiera kotwicę z atrybutu href i wykonuje na niej efekt scrollIntoView. Postaramy się teraz napisać to bardziej obiektowo, używając klas JavaScript.

Szkielet naszej klasy będzie wyglądał następująco:

class ScrollEffect {
    constructor() {
       
    }

    addListenerToLink = (link) => {
       
    }

    addScrollEffect = (e) => {
       
    }
}

const scrollEffect = new ScrollEffect();

W konstruktorze łapiemy nasze elementy i w pętli wrzucamy do funkcji addListenerToLink, która nadaje listener na evencie klik, którym jest trzecia funkcja. Poniżej klasy mamy kod, który efekt aktywuje – tę jedną linijkę musi napisać odbiorca naszego efektu, aby efekt aktywować, nie będąc zmuszonym do rozumienia, jak to wszystko działa.

Przerobienie konstruktora nie będzie trudne, o ile nie przeraża nas słówko kluczowe this czy pętla for…of (a nie powinno – w JS możemy nie rozumieć OOP, bo to tylko cukier składniowy, ale ogólne OOP rozumieć powinniśmy, bez tego dzisiaj się programować nie da):

constructor() {
        const links = document.querySelectorAll('a[href^="#"]');
        for (const link of links) {
            this.addListenerToLink(link);
        }
    }

Konstruktor łapie wszystkie elementy, za pomocą pętli for…of przechodzi po nich w pętli i przy pomocy słówka kluczowego this odwołuje się do własnej metody addListenerToLink klasy ScrollEffect, która przejmuje pałeczkę (przekazujemy jej link): 

addListenerToLink = (link) => {
   link.addEventListener("click", this.addScrollEffect);
}

Teraz pora napisać funkcję obsługującą zdarzenie kliknięcia, która przyjmuje event. Zapobiegamy domyślnemu działaniu i robimy scrollIntoView. Wydaje się proste, ale w naszym nieobiektowym przykładzie pobieraliśmy href używając słówka kluczowego this, które teraz będzie wskazywać na klasę. Musimy zatem znaleźć inny sposób, aby pobrać adres kotwicy:

addScrollEffect = (e) => {
  e.preventDefault();
   console.log(e.target.getAttribute('href'));
 }

Dzięki e.target mamy dostęp do elementu, który został kliknięty, choć this w tym wypadku wskazuje na klasę ScrollEffect. Teraz pora zrobić efekt, mając adres kotwicy:

addScrollEffect = (e) => {
   e.preventDefault();
   const anchor = e.target.getAttribute('href');
   document.querySelector(anchor).scrollIntoView({
            behavior: 'smooth'
   });
}

Nasz użytkownik jedyne co musi zrobić, to napisać linijkę:

class ScrollEffect {
   (...)
}

const scrollEffect = new ScrollEffect();

I już, automatycznie, wszystkie linki do kotwic mają ten efekt. Możemy pobawić się w importy/eksporty i stworzyć własną mini-biblioteczkę z łatwą do użycia fasadą, bez męczenia użytkownika technikaliami.