W językach programowania słowo kluczowe this wskazuje przeważnie w metodzie na obiekt, w którym jest metoda.
W związku z dynamicznym charakterem JS, fraza this przybiera wartości w zależności od kontekstu w jakim metoda jest wykonana i może być zarówno bardzo pomocne jak i przyprawić o nielichy ból głowy.
W pierwszej części “Tu Haczyk IStnieje” omówie jak zapanować nad this przy użyciu metody bind ulubionego frameworka.

Rozpatrzmy następujący obiekt Car1 z atrybutem color i metodą check zwracającą wartość color:

var Car1 = {
  color: "Red",
  check: function() {
    //console.info(this) - wyświetla wartość w konsoli Firebuga w Firefoxie
    alert( "Car color is " + this.color );
  }
};

Przypadek 1.

Wywołanie metody check działa tak jak byśmy się spodziewali zwracając Red.

// console.info -> Object color=Red
// alert -> Car color is Red
Car1.check();

Przypadek 2.

W drugim przypadku możemy być już trochę zaskoczeni, ale w metodzie check – this będzie już wskazywać na Car2, a nie na Car1 i zwróci Blue.

var Car2 = {
  color: "Blue",
  check: Car1.check
};
//Object color=Blue
//Car color is Blue
Car2.check();

Continue reading →

Dynamiczne elementy DOM, które tworzą stronę i zmieniają się przy zastosowaniu AJAX’a można tworzyć na wiele sposób. Poniżej przedstawie trzy najczęściej przeze mnie używane i porównam je ze względu na wydajność. Testy zostały przeprowadzone na Firefox 3.0.3 na Ubuntu przy użyciu opcji Czas wykonania (ang. Profiler) z pluginu Firebug.

Przeczytaj także wpis Szybkie iteracje czyli przyspieszanie pętli oraz
Wydajne tworzenie elementów DOM C.D..

Na początek mamy link go, który będzie wywoływać każdą testowaną metodę. Metody wykonujemy jedna na raz i mierzymy czas wstawienia 1000 elementów listy li do ul od id list.

<a href="#" id="go">go</a>
<ul id="list"></ul>

1. Sposób

Wstawienie metodą insert elementów LI w pętli, które zostały stworzone przy pomocy silnika template z biblioteki Prototype.

$('go').observe('click',go1);
//Czas wykonania (2136.313ms, 84055 wywołań)
function go1(e){
	e.stop();
	$('list').update();
	var tpl = new Template ('<li class="#{class}" id="#{id}">#{id}</li>');
	$R(1, 1000).each(function(i){
		$('list').insert(tpl.evaluate({
			class: 'klasa',
			id: i
		}));
	})
}

Continue reading →