jquery 1.3 and jquery ui
TRANSCRIPT
jQuery 1.3 andjQuery UI
John Resighttp://ejohn.org/ - http://twitter.com/jeresig/
jQuery✦ jQuery Plugins✦ jQuery UI
✦ Themeroller✦ jQuery 1.3:
✦ Selector Engine✦ Manipulation✦ Sniffing
✦ jQuery Testing✦ jQuery Performance
Plugins✦ Huge plugin ecosystem✦ Managed by Plugin tracker
http://plugins.jquery.com/✦ Hundreds in the tracker - even more on
the web
jQuery Plugins✦ Extend the jQuery system✦ Add on extra methods:
jQuery(“div”).hideRemove();✦ Trivial to implement:
jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); });};
jQuery UI✦ A complete set of themed, cross-browser,
user interface components (plugins!).✦ Drag, Drop, Sort, Select, Resize✦ Accordion, Datepicker, Dialog, Slider, Tabs✦ More info:
http://ui.jquery.com/✦ 1.6 is almost ready
Accessibility✦ Keyboard Accessible✦ Screenreader Accessible✦ Grant from Mozilla Foundation to
implement ARIA
Themeroller✦ Customize the styling of any jQuery UI
component✦ Full CSS, images for all components✦ Easy to customize and use✦ http://themeroller.com/
Todo Listhttp://jquery.com/files/todo/
http://jquery.com/files/todo/done.php
Code name “Sizzle”✦ http://github.com/jeresig/sizzle/tree/master✦ New Selector Engine for jQuery✦ 1.5 - 4x faster than other libraries✦ 4KB Compressed✦ No dependencies, can be used by other
libraries (MochiKit, Prototype, Dojo)
Injecting✦ Loop through elems, cloneNode(true)
each, insert into DOM✦ 5 paragraphs✦ 100 divs✦ 2 method calls (insert, clone)✦ 1000 method
✦ *Very* slow✦ Simple plugin provides 10-15x speed-up:
http://dev.jquery.com/~john/ticket/append/
Document Fragments✦ Move the nodes into a Document
Fragment✦ Husk DOM container✦ Whole container can be cloned✦ and whole container can be injected✦ Saves a ton of repetition
Sniffing✦ All major JS libraries use browser sniffing✦ Look at the user agent and make guesses
✦ navigator.userAgent is bad! :-(✦ We can get rid of this!✦ Makes our code more resilient to change
Detection✦ Object Detection
✦ if ( document.getElementsByTagName )✦ Feature Simulation
✦ var div = document.createElement(“div”);div.innerHTML = “<!--test-->”;var a = div.getElementsByTagName(“*”);if ( a.length > 0 ) { // Why did we match a comment?}
JavaScript Test Suite✦ qUnit (jQuery Test Suite)
http://docs.jquery.com/QUnit✦ By Joern Zaefferer
qUnit Usage✦ test("a basic test example", function() {
ok( true, "this test is fine" ); var value = "hello"; equals( "hello", value, "We expect value to be hello" );});
module("Module A");test("first test within module", function() { ok( true, "all pass" );});test("second test within module", function() { ok( true, "all pass" );});
module("Module B");test("some other test", function() { expect(1); ok( true, "well" );});
Profiling✦ Deep Profiling Plugin✦ Watch all method calls and events✦ http://ejohn.org/blog/deep-profiling-
jquery-apps/✦ http://dev.jquery.com/~john/plugins/profile/
github.com.html ✦ javascript:jQuery.displayProfile();
Thank You!✦ John Resig✦ http://ejohn.org/✦ http://twitter.com/jeresig/