wtorek, 7 lutego 2012

Yajs - mała pomoc jQuery

Yajs to prosty edytor kodu JavaScript online, który służy mi jako poligon testowy. Projekt wystartował wczoraj, ale wersja inicjacyjna wnosiła tylko podstawowy widok z użyciem Foundation.

Pierwsza aktualizacja to:
  • uruchomienie podstawowych funkcji z niewielką pomocą jQuery
  • niewielkie zmiany w HTML i CSS


Aktualnie obsługa Yajs sprowadza się do wprowadzenia JavaScript do panelu Edytor i wciśnięcia przycisku Uruchom. Wynik będzie zaprezentowany w panelu Konsola.

Serce aplikacji to około 30 wierszy w app.js wewnątrz obiektu jQuery
$( function()
    {
    } );
który tak naprawdę jest skrótem dla
$( document ).ready( function()
    {
    } );
czyli funkcji wydarzenia ready dodanego do obiektu jQuery stworzonego z obiektu document.

W pierwszej części funkcji znajduje się deklaracja wszystkich moich zmiennych.
var
        $editor = $( '#editor textarea' ),
        $console = $( '#console div' ),
        $run = $( '#run' ),
        msgs = [],
        code,
        result,
        run = function( e )
            {
           
            e.preventDefault();
            code = $editor.val();
            msgs.push( 'code: ' + code );
            try
                {
                msgs.push( 'success: ' + eval( code ) );
                }
            catch( e )
                {
                msgs.push( 'error: ' + e );
                }
            $console.html( msgs.join( '<br />' ) );
               
            };
Taka praktyka pozwoli nam zachować porządek, oraz uchronić kod przed wielokrotnym powtarzaniem tej samej funkcji z tym samym argumentem, mam tu głównie na myśli tworzenie obiektów jQuery

$editor = $( '#editor textarea' ),
$console = $( '#console div' ),
$run = $( '#run' ),
Są one ponad to oznaczone znakiem dolara dla wyróżnienia w skrypcie.

Ostatnia zmienna to deklaracja funkcji wykonywanej po uruchomieniu kodu z Edytora.
$run.on( 'click', run );
On to nowa metoda obiektu jQuery wprowadzona wraz z wersją 1.7. Działa podobnie do starszych: live, delegate, czy bind. Pierwszy argument to nazwa wydarzenia (event), drugi to wykonywana funkcja.

Parametr e wewnątrz funkcji run to obiekt wydarzenia, gdyby nie zapis
e.preventDefault();
po wciśnięciu przycisku wykonywała by się domyślna akcja, czyli przeładowanie strony. Kolejne linie to pobranie kodu użytkownika, oraz dodanie go do tablicy komunikatów
code = $editor.val();
msgs.push( 'code: ' + code );
Blok try/catch służy na wykonaniu odpowiedniej reakcji zgodnie z tym czy kod został poprawnie wykonany.
try
    {
    msgs.push( 'success: ' + eval( code ) );
    }
catch( e )
    {
    msgs.push( 'error: ' + e );
    }
Ostatnia linia to wyświetlenie zgromadzonych komunikatów
$console.html( msgs.join( '<br />' ) );
Takim o to sposobem mamy prosty edytor JavaScript.