Blog webdeveloperski Patryk yarpo Jar

Kompresja kodu JS – Shrinksafe

Autor wiadomości Styczeń 31, 2011

Shrinksafe jest aplikacją napisaną w Javie [o otwartych źródłach], dzięki której można zmniejszyć rozmiar plików JS wysyłanych do przeglądarki.

Jak to działa?

Javascript jest językiem parsowanym po stronie przeglądarki. Kod:

var nazwaZmiennejBardzoDluga                =                     1; // komentarz sialalalala
alert(nazwaZmiennejBardzoDluga);

w wyniku nie różni się niczym od takiego kodu:

var a=1;alert(a)

Oba wyświetlą w wyniku alert z komunikatem "1".

Kompresja kodu JS

Autor wiadomości Styczeń 29, 2011

JavaScript jest językiem skryptowym. Zamiast kompilacji, podczas której kompilator może [i najczęściej to robi] dokonać optymalizacji, w JS istnieje jedynie interpretacja [w trakcie wykonania]. Powoduje to, że o ile nazwanie zmiennej

var obiekOdpowiedzialnyZaFunkcjonalnośćABC; // tu komentarz

w normalnych przypadkach uznalibyśmy za coś poprawnego, to w JS jest dobre tylko na czas prac deweloperskich. Później spowalnia naszą stronę. Zobaczmy wady i zalety.

Zalety:

  • kod jest samokomentujący. Nazwa zmiennej mówi do czego ma być używana
  • komentarz dodatkowo może tłumaczyć zawiłości lub dziwne przypadki

Zasięg zmiennych – domknięcia JS

Autor wiadomości Styczeń 20, 2011

Javascript jak każdy znany mi język programowania posiada zmienne. Posiada także zasięg zmiennych. Jednak dla programistów przyzwyczajonych do C (Javy, C++, C#) zasada działania zasięgu zmiennych może okazać się mylna...

Prosty kod

var x = 10;
function example()
{
    var x = "To w ogóle inny typ!";
    alert(x);
}

alert(x);
example();

Powyższy kod wyświetli:

10
To w ogóle inny typ!

Póki co żadnych niespodzianek. Czego jednak spodziewasz się w takim wypadku:

Skrócony zapis if

Autor wiadomości Styczeń 20, 2011

Z pewnością nie raz używałeś instrukcji warunkowej if. Niekoniecznie musiałeś programować w JS, aby się z warunkami spotkać. Często warunki w programie stanowią największą część kodu (choć czasem może to oznaczać, że kod jest źle napisany). Czy muszą zajmować aż tyle miejsca? Nie...

Normalny if wygląda tak:

if (warunek) {
    // wykonaj
} else {
    // wykonaj co innego
}

Jeśli to, co ma zostać wykonane ma jedynie jedną linię kodu, np:

Operatory porównań w JS

Autor wiadomości Styczeń 19, 2011

W JS typ danych jest bardziej podpowiedzią dla programisty niż jakimkolwiek limitem. Na przykład taki kod:

var a = 12;
a = "To jest string";

Nie wywoła błędu. Zmienna to po prostu pudełko, co w nią włożymy to tam będzie.

Co jeśli będziemy chcieli porównać dwie wartości?

var a = 10,
    b = '10';
if (a == b) { alert('są równe'); }

Czy oby jednak naprawdę są równe... Jedna zmienna jest liczbą, a druga ciągiem znaków.

I tu właśnie wchodzi operator "identyczności"  `===".

Funkcje anonimowe w JS

Autor wiadomości Styczeń 19, 2011

JS jako jeden z najbardziej ekspresyjnych języków posiada ciekawy i często wygodny mechanizm funkcji anonimowych.

Polega to na tworzeniu funkcji, które nie mają nazwy i są jakby przypisane do konkretnego miejsca w kodzie.

Spójrzmy na przykład (wykorzystanie zwykłych funkcji):

function example1()
{
    alert("example 1");
}

function example2()
{
    // tu cos robimy
    return example1();
}

example2();

Rozszerzanie typu obiektu

Autor wiadomości Styczeń 19, 2011

W poradzie dotyczącej dodawania nowych metod do istniejących obiektów wspomniałem, że da się dodawać metody do wszystkich obiektów - nie tylko do tego jednego wybranego.

Przykładowy kod

String.prototype.letterSpacing = function()
{
    var n = this.length;
    var str_result = '';
    for(var i=0; i < n; i++)
    {
        str_result += this.charAt(i) + ' ';
    }
    return str_result;
}

Rozszerzanie obiektu

Autor wiadomości Styczeń 19, 2011

Każdy obiekt w JS [niezależnie od tego w jaki sposób stworzony] może być rozszerzany. W tym artykule pokażę, jak rozszerzać istniejący obiekt JavaScript.

Stwórzmy sobie obiekt [String]:

var txt = new String('To jest mój napis');

Różne sposoby konkatencji stringów w JS

Autor wiadomości Styczeń 12, 2011

Jest kilka sposobów na łączenie cięgów znaków. W tym artykule opiszę 3.

Sposób I - "optymistyczny"

Optymistyczny dlatego, że używa się samych plusów.

var string_1 = 'Ala ma ';
var string_2 = 'kota';
alert(string_1 + string_2);

Korzystając z tej metody pamiętaj o różnych niespodziankach związanych z wykorzystywaniem operatora `+', który jest też wykorzystywany do dodawania liczb.

Konkatenacja stringów w JS

Autor wiadomości Styczeń 12, 2011

Polecam nowszy wpis:

W JS operatorem łączącym dwa stringi [ciągi znaków] jest '+'. W prostych wygląda to tak:

var string_1 = "To jest";
var string_2 = "tekst";

alert(string_1 + ' ' + string_2);
// można oczywiście połączyć to też tak:
// alert(string_1 + string_2);

W wyniku tego kodu otrzymamy alert wyświetlający: „To jest tekst”.