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.