jQuery Crash

Szukając dzisiaj pewnego plugina do jQuerego moją uwagę zwróciła nazwa “jQuery Crash”.

Z ciekawości postanowiłem sprawdzić, co się za tym kryje. Przedstawiony opis tłumaczy wszystko :)

Summary
A jQuery plugin for crashing IE6. That’ll teach those motherf!%@*#s to upgrade their s#*t.
Usage
To crash IE6 call

Trzeba przyznać, że autor ma ciekawe podejście do życia :)

Jakby kogoś plugin zainteresował, to można go pobrać z tej strony: http://plugins.jquery.com/project/crash

jQuery 1.4 vs. jQuery 1.3.2

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:

[sourcecode language=”jscript”]
$("#htmlTest").click(function() {
perfChecker.setStartTime();
for (i = 0; i < 100; i++) {
$("#results").html(testMessage);
}
alert(perfChecker.getDiff());
});
[/sourcecode]

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

[sourcecode language=”jscript”]
$("#htmlTest").click(function() {
perfChecker.setStartTime();
for (i = 0; i < 100; i++) {
document.getElementById(‘results’).innerHTML = testMessage;
}
alert(perfChecker.getDiff());
});
[/sourcecode]

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:

[sourcecode language=”jscript”]
$("#removeTest").click(function() {
perfChecker.setStartTime();
$("#results2 p").remove();
alert(perfChecker.getDiff());
});
[/sourcecode]

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

[sourcecode language=”jscript”]

$("#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());
});
[/sourcecode]

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.

jQuery 1.4 już jest!

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:

[sourcecode language=”jscript”]
$(‘a’).html(function(i,html){
return html.replace(/&amp;/gi,'<span>&amp;</span>’);
});
[/sourcecode]

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ę…

Intellisense dla jQuery i innych bibliotek javascript

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.

[sourcecode language=”xhtml”]

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

[/sourcecode]

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.:

[sourcecode language=”xhtml”]

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

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ę:

[sourcecode language=”xhtml”]

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

[/sourcecode]

lub

[sourcecode language=”xhtml”]

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

[/sourcecode]

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