Sensowne analizowanie jQuery Opcje

[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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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).

Ten post edytował PrinceOfPersia 13.09.2014, 16:26:34

[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.

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

Ten post edytował finito 13.09.2014, 20:55:07

[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...

Ten post edytował PrinceOfPersia 13.09.2014, 22:51:17

[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ć.

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ę;-)

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?(IMG:style_emoticons/default/questionmark.gif) Porypało cię(IMG:style_emoticons/default/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.

Ten post edytował finito 14.09.2014, 10:39:46

[PrinceOfPersia]

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

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');

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.).

Ten post edytował PrinceOfPersia 14.09.2014, 11:10:12