Jak to dziala? (dziwny atrybut path, nazwy styli i troche JS)

Question

1. Główna strona patreona posiada owy kod, ten kod przesuwa element, zastanawia mnie wartość atrybutu "d" i jak ona działa.

 

2. Niektóre strony posiadają nazwy styli typu "style-234jksd823k", "style-adsfh390uggf" itd. Dlaczego tak wyglądają i jakie prawdopodobnie bilbioteki/frameworki są wykorzystywane aby taki wygląd tym nazwą nadać?

3. nazwy obiektów w JS, chodzi mi o "podłogę" przed własnością obiektu np. "_myVar", co owa podłoga symbolizuje? Czasami widze ich większość ilość np. "___myVar"

4. zapis w JS typu "obj = obj || {} " Rozumiem że zmienna object przyjmuje wartość zmiennej object, a jeśli w danym momencie zmienna obj nie jest zadeklarowana tworzy się pusty obiekt, lecz po co się w ogóle tego używa?

 

Byłbym wdzięczny za odpowiedzi na te nurtujące mnie pytania :)

Answer 1

1. To atrybut z SVG, to po prostu współrzędne rysowanej ścieżki.
2. Wyglądają tak, żeby nie dochodziło do konfliktu stylów w różnych komponentach. Takie coś może wygenerować choćby CSS Modules, możliwe, że np. styled-components też.
3. Ta podłoga symbolizuje, że zmienna jest prywatna i nie stanowi część publicznego API. Raczej niewskazana praktyka. A podwójna podłoga… hmm, zmienne wewnętrzne? Np. w Node są predefiniowane __dirname czy __filename.
4. To było głównie używane do emulowania domyślnych parametrów przed ES6. Dzisiaj de facto nie potrzeba tego wykorzystywać.

Answer 2

Znacznik SVG to format zapisu grafiki wektorowej. To co tutaj wkleiłeś to prawdopodobnie jakaś ikonka, albo logo. Nie wiem, dlaczego ten atrybut jest nazwany "d" ale odpowiada za rysowaną "ścieżkę" / punkty wektorowe, które budują daną grafikę/ikonę. Im bardziej złożona grafika tym kod będzie dłuższy. Takie grafiki robi się w programach do grafiki wektorowej np. Illustrator / Inkscape itp. więc nie próbuj zrozumieć co oznacza kod w tym znaczniku. Da się cokolwiek ogarnąć, jeśli grafika jest bardzo prosta - jakieś kółeczko, czy kwadrat.

 

Piszesz coś o tym, że ta grafika się przesuwa, tak? Więc prawdopodobnie JS przesuwa punkty wektorowe i tym sposobem ikonka jest animowana.