Biblioteki JavaScript i jQuery pytanie.

pytanie zadane 5 lipca 2018 w JavaScript przez kwiec.kwiec Nowicjusz (140 p.)

Cześć,
mam do Was pytanie w temacie bibliotek JS i jQuery.

Robię stronę z pomocą Bootstrap 4. Tam mam z uzyciem darmowej templatki z ich strony z automatu podpięta biblioteke jQuery JavaScript Library v3.3.1 czyli są to wersje nowe.

Teraz pojawia się problem spowodowany moją niewiedzą. Chcę wykorzystać jakieś proste efekty i one np. wymagają starszej wersji js lub jquery. wówczas mam wklejac kolejny link do biblioteki - tym razem starszej jednoczesnie pozostawijąc te najnowszą?

Np. przegladam siec w poszukiwaniu jakiś fajnych efektów lub czegos co na daną chwilę potrzebuję, wymaga to jednak starszej biblioteki ( co jest podane w opisie danego rozwiazania ) i wtedy też mam podpinac starszą i nowszą, czy tylko starsza? czy moze tylko najnowszą ale rzecz jasna nie działa wybrane rozwiązania. Wówczas nalezy z tego rezygnowac i pisać WSZYSTKO od nowa pod nową wersje???

Pozdrawiam.

2 odpowiedzi

odpowiedź 5 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Generalnie to nie zaleca się podpinania do jednego projektu dwóch różnych wersji danej zależności. Nawet jeśli nie od razu to z czasem może to być przyczyną wielu problemów.

Podstawowe pytanie to co to w ogóle za efekty i skrypty bo w wielu przypadkach jakie widywałem w sieci to jQuery było podpinane chyba dla zasady, żeby pobrać referencję DOM przez dolarka zamiast proste chociażby getElementById czy querySelector.

A tak w ogóle to jeśli to jakieś animacje to dzisiaj wiele zrobisz w CSS np. z @keyframes i nie potrzebujesz JS, ewentualnie do samego podpinania animacji ale to zrobisz łatwo w czystym JS albo praktycznie w każdej wersji jQuery.

Także reasumując na pewno odradzam podpinanie dwóch wersji - próbujmy lepiej przerobić skrypty albo zrobić je po nowemu.

komentarz 7 lipca 2018 przez kwiec.kwiec Nowicjusz (140 p.)
edycja 7 lipca 2018 przez kwiec.kwiec

Dzieki za odpowiedź, ale i tak chyba bede musiał dopytać.

Znalazłem proste animacje w stylu fade in itd. To jest proste i ten temat można zamknąć.

Ale mam tutaj pewne wątpliwości jeszcze dotyczące bardziej złożonych (jak dla mnie) funkcji np. Megamenu. Miałem zrobione takie megamenu tylko zamiast hover wszystko działało po kliknięciu.. niestety nie umialem zbytnio tego przerobić zeby działało po najechaniu. Zaczałem więc szukać innych rozwiązań w sieci które mogłyby mi posłużyć jako szkielet do przerobienia i uzyskania podobnego efektu. Nawet mi się udało takie coś znaleźć ale znowu problem był taki, że wymagało to starszych wersji bilbiotek. Wtedy własnie chcialem sie w koncu dowiedziec od kogos doswiadczonego co w tym wypadku zrobić podpinac jak leci, rezygnować z danego rozwiazania czy pisac od nowa? z tym, że z pisaniem bylby problem taki ze nie mam takiego doswiadczenia by takie funkcje pisac bez problemów od podstaw samodzielnie a i lepiej nie wynajdywac koła od nowa i wykoszystac istniejace rozwiązania i ewentualnie je przerabiac.

EDIT:
biblioteka ze strony głównej Bootstrap
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Biblioteki ze strony jQuery do działania zakładek z uzyciem hover.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

po wrzuceniu wszystkiego nie działa nic. zatem nalezy rezygnowac z tego od bootstrapa?

EDIT2:
dałem to w takiej kolejnosci:

W head:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

nad znacznikiem body:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

i działa. i teraz pytanie, czy to jest dobre podejscie czy na alibi?

komentarz 7 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

A powiedz mi po co Ci do takiego menu w ogóle jQuery i inne biblioteki? Takie menu można zrobić nawet w CSS, np. tutaj na szybko masz codepena: https://codepen.io/Tomek_Sochacki/pen/PaMpKa Nie patrz na jakość kodu bo to pisane szybko i zagniżdżenia SCSS biją po oczach :) ale chodziło mi bardziej o pokazanie zasady i przykładu, że wcale JS nie jest potrzebny do menu. Oczywiście może się przydać do bardziej precyzyjnego określenia niektórych zachowań itp. czy do jakieś obsługi menu mobilnego, ale generalnie warto próbować robić takie rzeczy w css. Jakieś animacje itp. też łatwo dodać np. bawiąc się opacity, @keyframes itp. itd. To już zależy od Twojej wyobraźni. Tak samo wymiary, ja tu ostylowałem na sztywno w remach bo nie chciało mi się bawić w nic dynamicznego. W normalnym projekcie trzeba by jakoś rozsądnie przemyśleć wymiary itp. i ewentualnie dać jakieś breakpointy na media query.

komentarz 7 lipca 2018 przez kwiec.kwiec Nowicjusz (140 p.)

Myślałem że to konieczne ponieważ na stronie jQuery ui znalazlem taby działające własnie po najechaniu, a na stronie Bootstrapa 4 znalazlem nawigację , popracowałem nad tym i połączyłem te 2 rzeczy. Nie wiedizałem ze samym CSS tak się da..Powiem szczerze, że nigdy nie stosowałem zagnieżdżeń i przeanalizuje Twój kod, może jakieś pytania się zrodza. w kazdym razie dzięki za podpowiedź, nie mialem o tym pojecia.

komentarz 7 lipca 2018 przez kwiec.kwiec Nowicjusz (140 p.)

@Tomek Sochacki,
wprowadziałem jedną zmianę polegajaca na tym, że po najechaniu na podstrona1 lub 2 dział 1 zawsze jest włączony. Teraz nasuwa sie inne pytanie i czy w CSS też bedzie sie tak dało. Jeżli użytkownik wchodzi na podstrona1 i wjeżdza na dział2 po czym przesuwa kursor poza menu (ono się zamyka). potem znowu wchodzi na Podstrona1 i menu pamięta że uzytkownik był na dziale2 i wlasnie ten mu sie wyswietla.

komentarz 7 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Robisz jeden istotny błąd, nie próbujesz zrozumieć JAK coś działa tylko KOPIUJESZ w ciemno różne gotowce i przez to potem wszystko się rozjeżdża. Nie piszę tego jako jakąś docinkę itp. - nie o to mi chodzi. Piszę, ponieważ pamiętam jeszcze swoje początki z programowaniem w JS i ogólnie webem i wiem, że łatwo jest coś skopiować tylko problem jak potem nie wiadomo co się stało że nie działa :) Wiele osób przeżywa to na początku nauki więc spoko, nie dotyczy to tylko Ciebie :)

Najlepiej spróbuj napisać z 2-3 stronki od podstaw w czystym css i JS żeby złapać najważniejsze zasady. Z czasem sam zobaczysz, że do wielu rzeczy lepiej usiąść i w parę minut napisać niż 2 godziny szukać gotowca :) Oczywiście biblioteki są bardzo przydatne, sam z wielu korzystam jak i z frameworków jak Angular czy Reat ale trzeba to robić z głową i świadomie, żeby w razie czego wiedzieć gdzie szukać błędu i co poprawić.

Także szczerze życzę powodzenia i co najważniejszy wytrwałości bo uwierz mi, że jeszcze nie raz staniesz pod murem i będziesz sobie włosy wyrywał, a czasem rozwiązanie może przyjść nagle i niespodziewanie :) I taka rada - ucz się szukania informacji w sieci na dokumentacjach i stacku SO. Wbrew pozorom na początku nauki to wcale nie jest takie proste i oczywiste - i nie bój się szukać info po angielsku, często po ang. znajdziesz rozwiązanie w 5 sekund, a w pl cały dzień może Ci nie starczyć. Nawet jak nie znasz angielskiego to po 1. jest to moment na naukę :) a po drugie często sam kod wystarczy do załapania rozwiązania danego problemu.

komentarz 7 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

tego zapamiętania nie zrobisz w CSS, do tego potrzebne jest JS ale pytanie czy na pewno jest to dobre?

odpowiedź 5 lipca 2018 przez Mariusz08 Maniak (62,300 p.)

wymagają starszej wersji js lub jquery.

Wersji js jako tako nie da się zmienić (chyba, że instalując starą przeglądarkę). Co do jQuery - najpierw załączasz nową wersję, potem skrypt bootstrapa a na końcu starą wersję jq + Twój skrypt. Ale to się nie opłaca. Po co masz załączać tyle kodu? Ja po prostu poszukałbym nowszych sposobów na zrealizowanie danego efektu niż podpinanie x wersji tej samej biblioteki.