jQuery - odc. 8

Ostatni jak na razie post o jQuery, a w nim trochę zapisek na temat zdarzeń i asynchroniczności,  obsługi danych (w tym atrybutów data- z HTML5) oraz co nieco o wydajności.

 

Zdarzenia jQuery

Metoda on()

Zastępuje bind(), delegate(), live()

off() - odpięcie handlera

$(“selector”).on(“click.namespace1”, handler); //przestrzenie nazw

$(“selector”). off(“click”);

$(“selector”).off(“click”, handler);

$(“selector”).on(“click hover”, handler);  //skrótowe zapisy dla wielu zdarzeń

$(“selector”).on({

“click”: clickHandler,

“hover”: hoverHandler

});

Możliwość zatrzymywania domyślnej akcji, bubblingu i propagacji

$(“selector”).on(“click”, false);  // skrót dla $(“selector”).on(“click”, function() { return false; });

$(“#parent”).on(“click”, “tr.dataRow”, handler);  // alternatywa dla live()

Własne zdarzenia

$(“#myDiv”).on(“myEvent”, handler);

$(“#myDiv”).trigger(“myEvent”);

Obiekt deferred

$.ajax(“url”, {

success: successHandler,

error: errorHandler,

complete: completeHandler

});

Właściwości

• utrzymuje i wywołuje kolejkę callbacków: success/failure/complete
• umożliwia rejestrację wielu callbacków
• umożliwia rejestrację callbacków w każdym momencie (przy tworzeniu, wykonywaniu lub po zakończeniu)

var deferred = $.Deferred();

deferred.done(function() { … });

deferred.fail(function() { … });

deferred.always(function() { … });

$(“#button1”).click(function() { deferred.resolve(); });

$(“#button1”).click(function() { deferred.reject(); });

console.log(deferred.state());

Asynchroniczność

• Ajax
• SetTimeout
• Animacje

var bullet = {

shoot: function() {

        bullet.shot = $.Deferred();

        …

        $b.animate( { … }, …, bullet.shotFinished);

        return bullet.shot.promise();

},

shotFinished: function() {

        …

        bullet.shot.resolve(‘1’);

}

}

var boy1 = {

     shootBoy2:  function() {

             return bullet.shoot();

     }

}

var boy2 = {

       die: function() { … },

       shotFired:  function(shot) {

                shot.done(boy2.die);

                if (shot.reject)

                         shot.reject();

       }

}

function start() {

     var shot = boy1.shootBoy2();

boy2.shotFired(shot);

shot.done(function(winner) { … });

}

$(function() {

$(“#boy1”).click(start);

$(“#btn”).click(function() { bullet.shot.done(function(winner) { … } });

});

Funkcja $.when

• Kombinacja 1 lub więcej obiektów deferred
• Zwraca promise
• Zostaje rozwiązana jeśli wszystkie obiekty zostaną rozwiązane
• Rezygnuje jeśli jakikolwiek obiekt zrezygnował

var promise1 = $(“#div1”).fadeIn(2000).promise();

var promise2 = $(“#div2”).fadeIn(4000).promise();

var when = $.when(promise1, promise2).done(function() { … });

var def = $.Deferred();

var when = $.when(promise1, promise2, def).then(

function() { … }, //done

function() { … }, //reject

);

setTimeout(def.reject(), 500);

 

Operacje na danych

Przechowywanie

var div1 = $(“#div1”);

div1.data(“version”, 8);

console.log(div1.data(“version”));

var product = { name: “kajtek”, price: 12 }

div1.data(“product”, product);

var name = div1.data(“product”).name;

var myFunc = function() {

console.log(“xxx”);

};

div1.data(“func”, myFunc);

div1.data(“func”) ();

$.data(div1.get(0), “key”, 20);

var key = $.data(div1.get(0), “key”);

var data = div1.data(); //wszystkie dane

console.log(data);

Klucze zarezerwowane: “events”, “handle”, “_xxxx”

Zdarzenia

• getData
• setData (przed ustawieniem wartości)
• changeData (po ustawieniu wartości)

div1.on(‘setData’, function(e, key, value) { … });

div1.on(‘changeData’, function(e, key, value) { … });

div2.on(‘getData’, function(e, key, value) { return 8; }); //nadpisanie zwracanej wartości

Każdy obiekt jako selektor

var product = { name: “kajtek”, price: 12 }

$(product).data(“price”, 12); //powstanie property data z kluczem “price”

console.log($(product).data(“price”));

Atrybuty HTML5 dla danych

• Każdy atrybut zaczynający się od “data-“
• Dane muszą być przechowywane jako string
• Dane żyją razem z HTML
• Łatwe zapisywanie przez serwer

var value = $(selector).attr(“data-value”);

$(selector).attr(“data-value”, value);

var value = $(selector).data(“value”);

var myValue = $(selector).data(“myValue”); // dla taga “data-my-value”

Metody dla danych przy atrybutach data-:

• Brak możliwości zapisu
• Dobieranie najlepiej pasujących typów przy wyciąganiu
• W pierwszej kolejności dane są pobierane z cache - jeśli zlecimy ich zapisanie i potem będziemy chcieli odczytać, to zostanie wzięta wartość z polecenia zapisu, mimo że fizycznie w HTML wartość nie zmieniła się

Usuwanie danych

div1.removeData(“product”);

div.removeData(); //usunięcie wszystkich danych

Pluginy

filterByData - filtruje po danych wg. key lub wg. key i value

dataAttr - odczytuje i zapisuje atrybuty data-

 

Wydajność

Wykrywanie przyczyn

• Profilery (przycisk lub polecenia: console.profile() i console.profileEnd())
• Ręczne mierzenie czasu (console.time() i console.timeEnd())

Ogólnie

• cachowanie wyników z selektorów
• cachowanie innych obiektów

Selektory

• najprostsze selektory są najszybsze
• find() szybszy od children()

DOM

• dodawanie wiele węzłów do drzewa jest wydajniejsze przy jednym append
• znacznie zyskamy, jeśli wszystkie węzły przed dodaniem opakujemy dodatkowo np. w <div>