Profesjonalny JavaScript – jquery dla początkujących

  • Mateusz Żeromski    |    2008-06-22    |    javascript

Znów piszę kontrowersyjny artykuł, którego tytuł sam w sobie jest sprzecznością, bo niby jak można zestawiać określenia takie jak „profesjonalny” i „początkujący”. W tym przypadku nie ma wielkiej różnicy bo nauka jquery polega na przestawieniu się w myśleniu, a odpowiednio wykorzystując nawet niewielką wiedzę można napisać profesjonalny kod :).

Założenia

Zakładamy, że chcemy wykonać stronkę wykorzystując dużo javascript, tzn zgodnie z trendem web2.0, czyli używając technologii Ajax. Znamy już trochę javascript, oraz html. Naszym celem jest napisanie profesjonalnego kodu javascript – czyli takiego który nie znajduje się plikach html tylko w plikach js, dołączanych do html.

Załóżmy, że mamy system newsów i po kliknięciu na przycisk „Najnowszy” pojawia nam się w warstwie treść najnowszego, oraz tworzymy najprostszy formularz wyszukiwark – wszystko na ajaxie.

Wymagania: znajomość jquery na poziomie podstawowym, jakieś pojęcie o javascript, ajax

Start – kod html

Zaczniemy od kodu html który powinien wyglądać mniej więcej tak:

1
2
3
4
5
6
7
<a href="/news/view/5" id="najnowszy">Najnowszy</a>
<form method="post" action="/news/search" id="wyszukiwarka">
   <input type="text" name="keyword" />
   <input type="submit" value="Szukaj" />
</form>

<div id="result"></div>

Oczywiście w znacznikach „head” dołączamy pliki jquery.js oraz script.js

Javascript

Tutaj stosujemy tajemną technikę oddzielenia kodu javascript od html, mniej więcej powinno to wyglądać tak:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var Page = function(){
   
    this.init = function(){

    }

    this.initSearchForm = function(){
   
   
    }
}

var page;

$(document).ready(function(){

    page = new Page;
    page.init();


});

Jest to tylko struktura kodu, która wymaga wypełnienia. Dobra idziemy dalej i otrzymujemy taki kod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var Page = function(){
   
    this.init = function(){


        $('#najnowszy').click(function(){
            $('#result').load($(this).attr('href'));
            return false;
        });

        this.initSearchForm()
    }

    this.initSearchForm = function(){

        $('#wyszukiwarka').submit(function(){
       
            var input = $(this).children("input[@name=keyword]")
            $.ajax({
                type: "POST",
                url: $(this).attr('action'),
                data: "keyword="+input.val(),
                success: function(msg){
                    $("#result").html(msg);
                }
            });        
            return false;
       
        });
   
    }
}

Kod oczywiście jest dyskusyjny i można go poprawić w wielu miejscach ale myślę, że przekazuje to co powinien – czyli rozdzielenie js od html.

Podsumowanie

W podanym przezemnie przykładzie ciężko jest znaleźć jakąś praktyczną stronę takiego zastosowania kodu, ale wystarczy że wyobrazimy sobie wielką aplikację do której będzie trzeba oskryptować dziesiątki linków, kilkanaście formularzy, (np serwis społecznościowy) to tutaj pisanie kodu js ma sens tylko tak jak ja zaprezentowałem. Rozdzielenie js i html, i dodatkowo pisanie kodu js w sposób obiektowy, wykorzystując jak najwięcej jquery, daje mamy pewność, że wszystko będzie działać pod najpopularniejszymi przeglądarkami, oraz utrzymanie naszego kodu będzie bardzo łatwe i przyjemne w przyszłości – wystarczy otworzyć odpowiedni plik *.js i pozmieniać coś, bez konieczności grzebania w html – który bardzo ładnie wygląda.

Ps.: ja podałem tylko drogę do osiągnięcia profesjonalnego kodu js, brakuje tutaj klasy, która obsługiwała by ajaxa (łącznie z wyjątkami, np 404 itp), oraz oczywiście strona powinna działać również jeżeli ktoś nie obsługuje javascript – wtedy by było idealnie :)

 

Tagi: , , ,

Komentarze: 4 do “Profesjonalny JavaScript – jquery dla początkujących”

  1. 1 dziadostwo     2010-08-09 19:37:09

    najgorsze z wprowadzen jakie w zyciu widzialem, strata czasu, dzieki za szczere checi.

  2. 2 Anonim     2010-09-29 15:03:10

    hk

  3. 3 piecioshka     2011-08-19 16:34:57

    —
    profesjonalnego kodu javascript – czyli takiego który nie znajduje się plikach html tylko w plikach js,
    —

    dla Ciebie to jest profesjonalny kod ???????

    —
    $(‘#najnowszy’).click(function(){
    $(‘#result’).load($(this).attr(‘href’));
    return false;
    });
    —

    Słabe…

    Po pierwsze dlaczego „click” ? a do czego służy „bind” ?

    Po drugie, dlaczego „return false” ?

    Sądzę, że tak chciałeś zablokować domyślną akcję linku, ale to nie w ten sposób.

    jQuery(„#najnowszy”).bind(„click”, function getFile(evt){
    jQuery(„#result”).load($(this).attr(„href”));

    evt.preventDefault();
    });

    Co sądzisz ?

  4. 4 Mateusz Żeromski     2011-08-19 17:02:18

    Piotrek – czepiasz sie, blog pisany po godzinach – wpis ponad dwuletni

    Głownie chodzilo o to zeby JS pisać obiektowo a nie pomiędzy html czy też w tagach

    Zobacz moj najnowszy projekt i tam masz pełny przyklad js, publicznie nie bede dyskutować :)

    Zachęcam do pisania własnego bloga technologicznego który pomimo iż nieaktualizowany ponad rok dalej ma branie!

Napisz komentarz


Wersja mobilna