Co nowego u jQuery

jQuery Project - organizacja przygotowująca jeden z najpopularniejszych framework'ów do JavaScriptu wypuściła ostatnio dwa produkty - kolejną mniejszą wersję z serii 1.4 - oznaczoną kolejno 1.4.3. Drugą rzeczą jest przygotowanie specjalnej wersji framework'u na platformy mobilne - jQuery Mobile, póki co w wersji alpha.

jQuery 1.4.3

Pomimo, że numeracja wskazuje na jedynie drobne poprawki team jQuery postarał się, aby tradycyjnie przyspieszyć niektóre funkcje, a przy okazji wprowadził kilka nowych interesujących funkcjonalności.

Rozszerzenia CSS .css() i .animate()

Przepisana funkcja do zarządzania stylami pozwala obecnie zdefiniować swoje własne nazwy atrybutów (wcześniej takim przykładem było opacity, które w IE było generowane na filtrach, zaś w pozostałych przeglądarkach jako właściwość). W tym celu używamy obiektu $.cssHooks, który zawiera definicje stylów. Przykładem może być plugin do obrotu jQuery Rotate, który dla różnych przeglądarek nadaje różne atrybuty.

$('#divTest').css('rotate', 90);
$('#divTest').animate({rotate: 180});

Obsługa atrybutów data-* z HTML5

W przeglądarkach, które mają zaimplementowaną obsługę rozszerzenia data-* jQuery wykorzystuje je do swojej metody .data().

<div data-hidden="true" data-options="{"name":"John"}" data-role="page">
</div>

$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

Wprowadzono też zdarzenie changeData, w momencie, kiedy któraś wartość danych węzła została zmieniona.

var user = new User();
$(user).bind("changeData", function( event, name, value ) {
  $("#user").find("#" + name).val( value );
});

Zdarzenia

Dwie główne nowości to możliwość zablokowania propagowania zdarzeń i domyślnej akcji już w metodzie bind oraz wprowadzenie namespace'ów dla zdarzeń.

Blokowanie propagowania zdarzeń jest możliwe poprzez dodanie wartości false jako trzeci argument metody bind. Wówczas automatycznie zdarzenie nie zostanie przekazane do kolejnych obiektów, a domyślna akcja wyłączona.

$('a').bind('click', function() {
  alert($(this).attr('href')); // wyświetli jedynie wartość atrybutu href klikniętego linku
}, false);

Namespace'y dla zdarzeń to nic innego jak podział nazwy zdarzenia kropką. Wówczas pierwsza część odnosi się do zdarzenia, zaś druga do namespace'u. Obiekt event przekazywany do funkcji callback'owej dodatkowo otrzymuje właściwość namespace.

$("p").bind("test.namespace", function(event) {
  alert( event.namespace ); // wyświetla 'namespace'
});
$("button").click(function(event) {
  $("p").trigger("test.namespace");
});

Typy

Do jQuery zostało obecnie wprowadzone rozpoznawanie typów danych. Czym się różni od standardowego typeof? Są rozpoznawane typy takie jak tablica (array), data (Date) oraz wyrażenia regularne (regexp).

jQuery.type(true) === "boolean"
jQuery.type(3) === "number"
jQuery.type(“test”) === "string"
jQuery.type(function(){}) === "function"
jQuery.type([]) === "array"
jQuery.type(new Date()) === "date"
jQuery.type(/test/) === "regexp"

Efekty

Wprowadzono dodatkową kontrolę czasu trwania jednego interwału czasowego pomiędzy kolejnymi zmianami poprzez dodanie właściwości jQuery.fx.interval. Domyślnie wartość jest ustawiona na 13 - jeżeli wartość ustawimy na mniejszą wówczas animacja powinna odbywać się płynniej, jednak będzie wymagać więcej zasobów.

jQuery.fx.interval = 100;

$("input").click(function(){
  $("div").toggle( 3000 );
});

jQuery Mobile

Od pewnego czasu można było słyszeć o specjalnej wersji jQuery na urządzenia mobilne. Oprócz klasycznego framework'u ma on mieć także wbudowane kontrolki - buttony, select'y itd., które według zamierzeń programistów na każdym testowanym systemie mają wyglądać i działać identycznie. Oczywiście mowa tutaj głównie o smartphonach - pełna lista wspieranych przeglądarek jest na stronach jQuery Mobile.

Screenshot'y dema przygotowanego do jQuery Mobile na Androidzie 2.1 (WebKit)

Inne podstawowe założenie projektu to możliwość oskórkowania kontrolek - obecnie w demach możemy przełączać pomiędzy dwoma skórkami - ale myślę, że do czasu wydania finalnej wersji doczekamy się ich większej ilości.

Screenshot'y dema z Opery Mobile (WM6)

Zamieszczone demo na pewno powinno spodobać się użytkownikom przeglądarek opartych na WebKit'cie - tutaj wszystko chodzi ładnie i płynnie. Pod Operą Mobile 10 na Windows Mobile 6 widać pewne braki - np. braku implementacji border-radius. Zatem pozostaje czekać na kolejne release'y i cieszyć się z kolejnej mobilnej platformy dla JavaScriptu.