Archive for the ‘jQuery’ Category

jQuery 1.4 vs. jQuery 1.3.2

sty 17, 2010 jQuery

Poprzednio informowałem o wydaniu nowej wersji biblioteki jQuery – 1.4.

Teraz pora aby przyjrzeć się jej dokładniej: na początek postanowiłem sprawdzić wydajność dwóch często wykorzystywanych przeze mnie metod: html() oraz remove().

Test metody html() polegał na wykonaniu jej w pętli – 100 powtórzeń. Kod dla wersji 1.4 oraz 1.3.2 był identyczny:

$("#htmlTest").click(function() {
   perfChecker.setStartTime();
   for (i = 0; i < 100; i++) {
      $("#results").html(testMessage);
   }
   alert(perfChecker.getDiff());
});

dodatkowo wykonałem ten test wykorzystując metodę standardowo dostępną w JavaScripcie – bez dodatkowych bibliotek:

$("#htmlTest").click(function() {
   perfChecker.setStartTime();
   for (i = 0; i < 100; i++) {
      document.getElementById('results').innerHTML = testMessage;
   }
   alert(perfChecker.getDiff());
});

Każdy z testów wykonałem 5 razy. Przedstawiony poniżej wykres przedstawia średni czas pojedynczego wykonania metody html(). Zmienna testMessage zawierała kod html składający się ze 100 paragrafów (<p>); każdy z nich zawierał 200 literowy tekst.

Test metody remove() polegał na usunięciu 1000 paragrafów (<p>) zagnieżdżonych w divie:

$("#removeTest").click(function() {
   perfChecker.setStartTime();
   $("#results2 p").remove();
   alert(perfChecker.getDiff());
});

Tutaj również postanowiłem porównać czas wykonania standardowych metod javascript:


$("#removeTest").click(function() {
   perfChecker.setStartTime();
   var a = document.getElementById('results2');
   var b = a.getElementsByTagName('p');
   var len = b.length;
   for (var i = len; i > 0; i--) {
      a.removeChild(b[i-1]);
   }
   alert(perfChecker.getDiff());
});

Rzadko piszę kod w czystym JavaScripcie, dlatego jeżeli znacie bardziej wydajny sposób na usunięcie paragrafów z diva to podajcie kod w komentarzu.

A teraz pora na wyniki:

jquery_perf_test

Jak widać jQuery w wersji 1.4 całkowicie deklasuje wersję 1.3.2.

Jeżeli chodzi o konfrontacje z klasycznym JavaScriptem to w przypadku “zwykłej” zmiany zawartości elementów jQuery jest trochę wolniejszy. Jednak jeżeli weźmiemy pod uwagę łatwość pobierania elementów w jQuerym, to różnica ta nie odgrywa większej roli.

W przypadku bardziej złożonych operacji jQuery w wersji 1.4 poradził sobie najlepiej – ale tutaj mógł zaistnieć problem nie do końca optymalnej metody JavaScript użytej w teście.

Mam nadzieję, że ten post zachęci Was do dokładniejszego przyjrzenia się nowej bibliotece.

Zapraszam na kolejne posty związane z jQuerym 1.4.

Tags: ,

jQuery 1.4 już jest!

sty 14, 2010 ASP.NET AJAX, jQuery

Na początku chciałbym serdecznie powitać wszystkich Czytelników mojego bloga w nowym, dotnetowym 2010 roku!

Niezmiernie trudno podnieść się po długiej, świątecznej przerwie, ale kiedyś do świata żywych powrócić trzeba. Na początek fantastyczny news:

dzisiaj została wydana nowa wersja mojej ulubionej biblioteki javascript – jQuery 1.4! Choć dotychczasowa wersja – 1.3.2 – sprawowała się bardzo dobrze, twórcy stwierdzili, że można tam jeszcze coś poprawić :)

Największą nowością w wersji 1.4 jest poprawa wydajności wielu najczęściej używanych funkcji – szczególnie metody html(). Niedawno miałem okazję wykorzystywać tą metodę do wyświetlania dużej ilości danych i faktycznie efekty nie zawsze były zadowalające.

W nowej wersji znalazło się również kilka nowych metod, oraz ‘rozszerzono’ kilka już istniejących np. teraz do metody html() możemy przekazać funkcję, która zwróci oczekiwany tekst:

$('a').html(function(i,html){
 return html.replace(/&amp;/gi,'<span>&amp;</span>');
});

Pełna lista zmian i nowości dostępna jest na stronie: http://jquery14.com/day-01/jquery-14.

Osobom, które zechcą uaktualnić wersję 1.3.2 do nowej 1.4 szczególnie polecam część poświęconą niekompatybilnym zmianom: http://jquery14.com/day-01/jquery-14#backwards.

Na dzisiaj tyle – zabieram się do testowania nowego jQuerego – jeszcze o nim na pewno napiszę…

Tags: ,

Intellisense dla jQuery i innych bibliotek javascript

mar 19, 2009 ASP.NET, jQuery

W Visual Studio 2008 mamy możliwość korzystania z intellisense dla różnych bibliotek javascript. Aby jednak korzystać z tego dobrodziejstwa musimy:

Po instalacji tych elementów możemy korzystać z instellisense dla różnych bibliotek javascript. Oczywiście biblioteki te musimy zadeklarować na naszej stronie.


<script src="js/mylibrary.js" type="text/javascript"></script>

Poza standardowym “podpowiadaniem” funkcji/metod/itp. dla bibliotek js, path ten umożliwia korzystanie również z dokumentacji. Dokumentację tworzymy pisząc komentarze podobne do komentarzy z C#, np.:


function TestFunction(imie) {
///	Przykładowa funkcja javascript
///     Pierwszy parametr funkcji
///	Wartość zwracana
return "test";
}

JavaScript intellisense

Funkcjonalność patha jest bardzo przemyślana i umożliwia korzystanie z komentarzy umieszczonych w innym pliku niż nasza biblioteka.  Jak wiadomo, pliki javascript powinny być jak najmniejsze, a tworzenie w nich dokumentacji na pewno w tym nie pomaga :)

Kolejność przeszukiwania plików w poszukiwaniu dokumentacji wygląda tak:

  • mylibrary-vsdocs.js
  • mylibrary-debug.js
  • mylibrary.js

Jeżeli nie zostanie znaleziony plik mylibrary-vsdocs.js szukany jest mylibrary-debug.js, itd. Oczywiście deklarujemy tylko mylibrary.js – plik z dokumentacją powinien jednak znajdować się w tym samym katalogu (jednak nie musi być nawet includowany w projekcie).

JavaScript intellisense

Jeżeli deklaracja pliku js znajduje się innym pliku (np. w MasterPage), wtedy w naszym pliku musimy podać referencję:


/// <reference path="js/mylibrary.js" />

lub


/// <reference path="Default.aspx" />

Wszystkich, którzy piszą w jQuery z pewnością ucieszy fakt, iż od jakiegoś czasu przygotowywane są pliki z dokumentacją do tej biblioteki.

Dokumentację znaleźć można na stronie jQuery.

JavaScript intellisense

Tags: ,