Poruszanie sie po DOM like a boss

0

Czesc chcialbym nauczyc sie poruszac sie jak najlepiej po drzewie dom. Jakich funkcji uzywac, zeby architektura frontu aplikacji byla jak najlepsza a nie wymyslanie dziwnych sposobow. Chodzi mi o jquery.

8
  1. Używaj klas. Duuużo klas.

  2. Unikniesz w ten sposób problemu, że kiedyś interesujący Cię element był divem, a dziś jest paragrafem.

  3. Nie polegaj na rodzicach/dzieciach, a raczej na poprzednikach i następcach. .item>.title jest złe, bo kiedyś tytuł wraz z innymi danymi wpadnie w kontener typu header i JS się psuje.

  4. Unikaj niepotrzebnego skomplikowania selektorów. W przypadku gdy ww. tytuł jest w jakimś headerze, to nie wybieraj go przez .item .header .title - słusznie unikamy >, ale niepotrzebnie komplikujemy selektor - będzie działać wolniej i jest większa szansa, że coś się zmieni po drodze.

  5. Stosuj BEM - bardzo mocno to upraszcza nie tylko stylowanie strony (poprzez odrzucenie specyficzności) ale też poruszanie się po drzewie - kiedy artykuł na stronie posiada tytuł (.title), a wewnątrz artykułu są komentarze, które też mają tytuł (.title), to wtedy .article .title wybierze nam zarówno tytuł artykułu/ów, jak i tytuły komentarzy. Wtedy zazwyczaj do głowy przychodzi pomysł złamania pkt. 3 i stosowanie sztuczek typu .article>.title, ale komplikuje to tylko łatwość wprowadzania zmian. Dodatkowo, zakładając, że chcemy wybrać wszystkie tytuły artykułów ze strony to możemy w ogóle odpuścić sobie .articles .title i użyć .article__title, co jest ZNACZNIE szybsze.

  6. Często potrzebujesz dokonywać zmian w obrębie jednego elementu z listy. Tj. masz coś takiego:

<li class=product>
  ilosc: <input name=ilosc /><br />
  cena: <input disabled name=cena value="2.60" />
  <input disabled name=podsuma />
</li>
<li class=product>
  ilosc: <input name=ilosc /><br />
  cena: <input disabled name=cena value="1.10" />
  <input disabled name=podsuma />
</li>

Sporo ludzi rozwiąże pokazywanie podsumy w taki sposób:

$('.product [name=ilosc]').change(function() {
  var ilosc = parseFloat($(this).val());
  var cena = parseFloat($(this).siblings('[name=cena']));
  $(this).siblings('[name=podsuma]').val(ilosc*cena);
});
Oczywiście rozsypie się to gdy dodamy labelki:
```html
  <label>ilosc: <input name=ilosc /></label><br />
  <label>cena: <input disabled name=cena value="1.10" /></label>
  <input disabled name=podsuma />

Wtedy najczęstszą praktyką jest robienie:

var cena = parseFloat($(this).parent().find('[name=cena]').val());

Oczywiście im bardziej skomplikowane drzewo (i mniej używanych klas) tym więcej konstrukcji typu:

$(this).parent().parent().find('.cena>input');

Przy li użyłem celowo klas w pierwszym kodzie HTML. Zawsze bazując na zmianach w obrębie elementu rób sobie:

var $product = $(this).closest('.product');
$product.find('[name=cena]');
  1. I ostatnia bardzo ważna rzecz. Unikaj powtarzania wybierania elementów:
if ($('#moj_formularz input').length) {
  $('#moj_formularz input').addClass('yellow-glow');
  $('#moj_formularz input').click(function() {});
  $('#moj_formularz input').hover(function() {});
}

Takie coś jest ekstremalnie niewydajne, bo każesz przeglądarce 4 razy skanować drzewo, żeby znaleźć inputy. Zapisuj sobie kolekcje w ten sposób:

var $inputy = $('#moj_formularz input');
if ($inputy.length) {
  // możesz też "chainować" funkcje jQuery
  $inputy
    .addClass('yellow-glow')
    .click(function() {})
    .hover(function() {})
  ;
}

W przypadku kolekcji jQuery warto sobie zapisywać je do zmiennej zaczynającej się od dolara, by odróżnić je od zwykłych kolekcji wybieranych np. przez document.querySelectorAll, albo innych, własnych (niektóre libki mogą takie zwracać).

Tyle mi do głowy przychodzi na ten moment.

0

Ja od siebie dodam tylko tyle, żebyś mimo to iż używasz jQuery pamiętał, że istnieje coś takiego jak funkcja i z nich korzystał. W swoim projekcie wszystko muszę przepisywać, po jednym gościu, który zamiast ponazywać sensownie zmienne, to robił rzeczy typu:

$("selektor").closest("form").parent("#id").next(":checked").eq(1).find("#wtf_is_this").siblings().on("click", function() {/* ....  8 tysięcznik */});
// i tak 50 linii kodu. Ni chuhu nie można się w tym odnaleźć, a żeby dowiedzieć się co on do cholery chciał zrobić muszę przebrnąć przez te wszystkie selektory, które nic nie znaczą. 

+ wygoogluj jquery performance tips

0

W przypadku kolekcji jQuery warto sobie zapisywać je do zmiennej zaczynającej się od dolara, by odróżnić je od zwykłych kolekcji wybieranych np. przez document.querySelectorAll, albo innych, własnych (niektóre libki mogą takie zwracać).
Wczoraj patrzylem na przykladowy plugin w jquery, tam wlasnie zmienne zaczynaly sie od $ i nie wiedzialem po co w ten sposob.

Mam teraz pytanie moze mniej zwiazane z tym tematem, ale caly czas z front-endem. Bo zastanawiam sie czy warto skupiac sie tak bardzo na js niz na css. Ogolnie zrobilem duzy postep jesli chodzi o js, ale gorzej z css. Nie ukrywam ze wole pisac funkcjonalnosci w js, ale z tego co widze duzo grzebie sie rowniez w css.

0

To nie jest albo albo, oba to must have, no chyba, że zatrudnia się jako typowy JavaScript Developer, takie oferty też są, choć rzadziej.

0

To nie jest tak ze nie umiem css, bo cos umiem, zarowno css jak i preprocesor sass, ale duzo wiecej przyjemnosci sprawia mi mimo wszystko js. Kiedys wyslalem takie fake'owe zapytanie o prace, to w odpowiedzi dostalem umiejetnosci wordpressa, photoshopa oraz ciecia layotow i prestashop chyba jeszcze. Szczerze mowiac to nigdy nie mialem z tym do czynienia i raczej nie chce, bo duzo bardziej wolalbym pisac cos w technologiach typu react i tego typu sprawy.

A mam wrazenie ze wiekoszosc ofert to ciecie layoutow albo jquery do machniecia animacji dla wygladu i to tyle. A ja js spostrzegam jako wieksze, potezniejsze narzedzie do budowania naprawde dobrych ui.

0

No i masz dobre podejście, trzymaj się od takich ofert z daleka - może łatwiej w nich o pierwszą pracę, ale nie są to perspektywiczne stanowiska. No ale to, że chcesz robić nowoczesne UI w React nie zmienia faktu, że dobra znajomość css'a do tworzenia layoutu będzie niezbędna - od tego nie uciekniesz, Reactowy JSX to tylko "HTML na sterydach". Jak nie lubisz css to idź w stronę node.js

0

W reakcie można wyróżnić kontenery i komponenty prezentacyjne (https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.69uniic7u). Spotkałem się z podejściem, gdzie byli ludzie typowo od js'a i zajmowali się tworzeniem kontenerów reduserów i całą tą logiką i ludzie tworzący komponenty prezentacyjne, które w większości to sam hmtl i były tworzone nie jako klasy tylko jako funkcje i je stylowali. Każdy robił to co lubił :) Tylko, że w większości poszukuje się ludzi od wszystkiego do wszystkiego, więc musisz uważać na te oferty. Najlepiej trzymać się od nich z dala, bo pójdziesz do pracy z myślą o kodowaniu w JS, a skończysz na gadaniu z klientem, ciachaniu layoutów i grzebaniu w CSSie.

0

a skończysz na gadaniu z klientem, ciachaniu layoutów i grzebaniu w CSSie.
tego wlasnie sie boje. Bo moze i jest to prostsze, ale dla przykladu pisze aplikacje i mialem pewien problem typowo jsowy. To taka zajawka na rozwiazanie ze to koniec. A ciecie layotow to chyba mam umarl z nudow. Photoshop jescze ok, mozna cos pogrzebac ale nie jakis wordpress jesli chce byc fronterem albo te layouty, a zero logiki UI, koszmar.

Lubie sie pobawic powerem Reacta, wymyslec jakies fajne dzialanie komponentu, ktore sie laczy z n komponentami, no to az chce sie pisac. Wiem ze jest to trudniejsze, ale widze postep, jak popatrzylem na kod sprzed nawet 3 misiecy to teraz jest o niebo lepiej. Promisy, callbacki i te sprawy, wkoncu to zrozumialem i kod wyglada o niebo lepiej. I wykorzystywanie obiektow albo funkcji na maxa. No az chce sie popatrzyc na taki kodzik :D

Nie wiem tylko czy moje umiejetnosci sa dostateczne by zaczac jako junior na takie stanowisko, ale nie dowiem sie jesli nie sprobuje. To nie jest tak ze nie lubie css, bo zanim zaczne prace, to wiem ze musze ogarnac bardziej reponsywnosc i jakies fikasy w css, zeby na takich "latwych" zadaniach sie nie sprzemeczac. Ale nie ukrywam ze wolalbym miec stosunek pracy 2:5 dla przewagi JS

1 użytkowników online, w tym zalogowanych: 0, gości: 1