Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Sensowne analizowanie jQuery
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
finito
No właśnie. Miałem już wiele podejść, ale za każdym razem po prostu trafia się linijka,w której nie wiem "co mówi". Dlatego wpadłem po poradę,bo mam już dosyć bez sensownego analizowania kodu wyłącznie w pamięci. W jaki sposób można analizować jQuery? Tzn. czy są jakieś kodowe metody, które pomagają w odczytywaniu linijek jquery?
kamil4u
Dokumentacja jQuery + ew. dołączonych bibliotek. Generalnie dla początkującego może nie być łatwo, aczkolwiek w większości wypadków całość jest logiczna.
Jak masz jakiś poważniejszy problem to po prostu nas zapytaj, myślę, że będzie ok wink.gif

PS W lepszych IDE możliwe, że są dodatki w stylu - najeżdżam na nazwę funkcji i pokazuje mi dokumentację, aczkolwiek sam z tego nie korzystałem, więc są to tylko moje przypuszczenia smile.gif
finito
Ja korzystam cały czas z documentacji jquery i oczywiście stackoverflow, ale wolałbym by moja wiedza o tej bibliotece była większa. Owszem, mogę tu wpadać z pytaniami dotyczącymi poszczególnych linijek, ale podejrzewam, że jakbym zaczął, to wszyscy by tu zwariowali. Bo musiałbym pytać dosłownie cały czas i w dodatku o wszystko. Osobiście wolałbym wykombinować jakąś metodę bardziej praktyczną do tej nauki, bo i mnie by było lżej i pewnie też całemu światu.
trueblue
A miałeś wcześniej styczność z czystym JS?
Jeśli nie, to spróbuj, wtedy będzie Ci łatwiej zrozumieć jQ, zobaczysz, że programując w czystym JS sam byś wiele rzeczy uprościł, które to znajdzie właśnie w jQ.
finito
Trueblue, czytałem "Praktyczny Kurs js" Marcina Lisa, ale chyba muszę go przeczytać jeszcze raz. To samo "Mocne Strony". Okej, nie ważne. Widzę po prostu, że dobra wiertara, dobre wiertła, szklanka wody i na chama do przodu. Nie ma inaczej.
kamil4u
Dokładnie, nie ma inaczej. Praktyka czyni mistrza. Nic nie przychodzi od razu i nie ma innej metody. A kto pyta nie błądzi, więc śmiało możesz pytać na forum smile.gif
finito
Tsa...tylko, żeby się nie okazało to o czym pisałem. Nie mówcie, że nie ostrzegałem. Jeśli mam pytać, to tych pytań chciałbym zadawać wiele. Ale wiecie co? Może na początek lepiej sobie utrwale te książki co je wymieniłem. Ostatnio po prostu więcej w php siedziałem i wiedza z js poszła trochę w las.

Ale dzięki. Dobrze jest wiedzieć, że mogę tu liczyć na pomoc.
PrinceOfPersia
Jeśli masz problem ze zrozumieniem pojedynczej funkcji, to wchodzisz na jquery.com albo na stackoverflow.com i rozumiesz.

Gorzej jeśli przeglądasz całościowo czyjś kod, który jest że tak powiem "napaćkany", to się nie dziwię. jQuery ma to do siebie, że jeśli się nie zachowuje odpowiednich wzorców (np. MVC itp.) to łatwo popaść w spaghetti code, albo w callback hell, który polega na tym, że masz milion zagnieżdżonych funkcji (ale korzystanie z promise'ów pozwala tego uniknąć). Dlatego przy większych projektach lepiej korzystać z jakiegoś frameworka (choćby Backbone, ale znowu - kolejny framework to kolejne koncepcje i funkcje do opanowania).
finito
Ja mam kłopot ze zrozumieniem na przykład tego:
1) Selektor? Wiadomo. Ale context? Jak mam rozumieć znaczenie contextu?

2)Co znaczy np. this.context = this[0] = selector;?

Tak jak uprzedzałem - takich pytań będę stawiał więcej.

Cytat(PrinceOfPersia @ 13.09.2014, 17:25:35 ) *
Jeśli masz problem ze zrozumieniem pojedynczej funkcji, to wchodzisz na jquery.com albo na stackoverflow.com i rozumiesz.

Gorzej jeśli przeglądasz całościowo czyjś kod, który jest że tak powiem "napaćkany", to się nie dziwię. jQuery ma to do siebie, że jeśli się nie zachowuje odpowiednich wzorców (np. MVC itp.) to łatwo popaść w spaghetti code, albo w callback hell, który polega na tym, że masz milion zagnieżdżonych funkcji (ale korzystanie z promise'ów pozwala tego uniknąć). Dlatego przy większych projektach lepiej korzystać z jakiegoś frameworka (choćby Backbone, ale znowu - kolejny framework to kolejne koncepcje i funkcje do opanowania).


Wiem co to jest wzorzec MVC, ale do tej pory czytałem o nim w odniesieniu do php. Co masz na myśli przez zachowanie go w przypadku jquery? No i w ogóle nie za bardzo załapałem co miałeś na myśli pisząc spagetti code lub callback hell.

ps.
jak już mówiłem: pytań mam sporo
PrinceOfPersia
przede wszystkim mam wrażenie, że źle zrozumialem twoje pytanie na poczatku. Załozylem, że chcesz analizować jakas strone, ktora korzysta z biblioteki jQuery. A ty chyba chcesz analizować kod źródłowy samej biblioteki jQuery, prawda?
To zmienia trochę postać rzeczy. Niestety co do biblioteki jQuery, to nie wnikałem w nią specjalnie na poziomie kodu źródlowego (bo do zwykłego korzystania z jQuery nei jest to potrzebne), ale jak wrzucisz to w Google, to pierwszy wynik z google zwraca tę strone na stackoverflow:
http://stackoverflow.com/questions/1257394...s-this-refer-to
A tam jak wół masz napisany komentarz Handle $(DOMElement):
Kod
          // Handle $(DOMElement)
        if ( selector.nodeType ) {
            this.context = this[0] = selector;
            this.length = 1;
            return this;
        }

czyli ten kod radzi sobie z przypadkiem, kiedy ktoś podał DOMElement jako argument do funkcji $ (czyli innymi slowy wezmie zwykły element np. document.body czy ten uzyskany przez document.getElementById i wsadzi ten element do jQuery (na tyle na ile jestem w stanie wywnioskować po zerknieciu na te linijki i przeczytaniu komentarza na górze)

Kod
$(document.body).css(............cos tam dalej, dopisz sobie sam.....)

wtedy selector JEST elementem (a nie np. stringiem, bo do funkcji $ mozesz podac rowniez stringi (np. $('#costam') ), i wtedy zlapie to inny if. Z obiektow jQuery mozna korzystac jak z tablic, wiec dlatego masz this[0] ustawione na element.
this.context natomiast nie weim do czego sluzy, ale generalnie wydaje mi sie, ze jQuery jest na tyle popularna biblioteka, ze nie zdziwilbym sie gdyby gdzies w ANGLOJEZYCZNYM internecie o tym pisali. Przeszukaj stackoverflow, githuba, blog Johna Resiga, sciagnij jakas wersje jQuery z komentarzami czy adnotacjami, jesli taką znajdziesz...
kamil4u
Generalnie jeśli słabo znasz czysty JS to będzie Ci bardzo trudno zrozumieć kod jQuery. Lepiej odwróć kolejność - najpierw pisz swoje skrypty, czytaj o JS, analizuj inne prostsze kody, a dopiero jak będziesz czuł się pewnie w JS to siądź do analizowania jQuery.
finito
Dziękowac. Wiesz Prince, właściwie to sam się domyślłem, że chodzi w tym konkretnym if'ie o "radzenie sobie" jQuery z dom, ale bardziej chodziło mi o dokładne zrozumienie poszczególnych wierszy. Co do this[0], to też załapałem, że chodzi o jakiś pierwszy element tablicy, ale wolałbym to wiedzieć konkretniej tzn. jaki element? W dodatku wszędzie w ifach na końcu jest "return this". Czasem mam problemy z rozszyfrowaniem na co konkretnie wskazuje dany a dany this.

Co do stack'a, to szczerze mówiąc nie wiedziałem, że można tam wrzucać nawet całe bloki kodu. Także dobrze wiedzieć.

Cytat(PrinceOfPersia @ 13.09.2014, 23:49:31 ) *
przede wszystkim mam wrażenie, że źle zrozumialem twoje pytanie na poczatku. Załozylem, że chcesz analizować jakas strone, ktora korzysta z biblioteki jQuery. A ty chyba chcesz analizować kod źródłowy samej biblioteki jQuery, prawda?


Zgadza się;-)

Cytat(kamil4u @ 14.09.2014, 10:39:03 ) *
Generalnie jeśli słabo znasz czysty JS to będzie Ci bardzo trudno zrozumieć kod jQuery. Lepiej odwróć kolejność - najpierw pisz swoje skrypty, czytaj o JS, analizuj inne prostsze kody, a dopiero jak będziesz czuł się pewnie w JS to siądź do analizowania jQuery.


Też tak myślę, choć niestety pojawilali się na forach ludzie, którzy mi gadali "A po co ci czysty js?questionmark.gif Porypało cięquestionmark.gif itd". Dlatego zdarzało się, że odkładałem czysty js i brałem się za proste kodowanie w jQuery. Ale sęk w tym, że proste skrypty w jquery mi nie wystarczą. Wolałbym umieć więcej.
PrinceOfPersia
Cytat
tzn. jaki element?

Znaleziony. Generalnie jak robisz zapytanie do jQuery:
Kod
var result = $(".jakas-klasa");

to możesz potem się odwoływać do result jak do tablicy:
Kod
result.length // zwraca liczbę znalezionych elementów
result[0] // zwraca pierwszy znaleziony element DOM
result[1] // zwraca drugi znaleziony element DOM


Cytat
W dodatku wszędzie w ifach na końcu jest "return this"

to, żeby działała sztuczka zwana "chaining". Chodzi o to, żeby (prawie) każda metoda zwracała obiekt jQuery (siebie), i żebyś mógł napisać tak:
Kod
$('#jakies-id").css({color: 'red'}).text('Hello World');

a nie musiał pisać tak:
Kod
$('#jakies-id").css({color: 'red'});
$('#jakies-id").text('Hello World');


Cytat
Dlatego zdarzało się, że odkładałem czysty js i brałem się za proste kodowanie w jQuery.

Zależy co nazwiesz czystym JSem. Na pewno składnie trzeba znać (funkcje, obiekty, tablicy, zmienne, domknięcia itp.). Ale to jakiego API użyjemy, to jest kwestia umowna. jQuery jest sprytną nakładką na brzydkie API przeglądarkowe. W API przeglądarkowym, żeby dodać obsługę zdarzenia click byś napisał:
Kod
document.getElementById('costam').addEventListener('click', function () {

}, false);

a używając API jQuery napiszesz tak:
Kod
$("#costam").click(function () {
});


Dlatego z jQuery opłaca się korzystać bo upraszcza kod (co nie zwalnia z obowiązku znania składni JavaScriptu chociażby, a jeśli się chce zrozumieć jak działa jQuery to przypuszczam, że też warto byłoby poznać jak działa to brzydkie przeglądarkowe API czyli te wszystkie getElementById, addEventListener itp.).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.