Building Robust jQuery Plugins

1
Building Robust jQuery Plugins
2
Why bother?
3

• .each(
• focus 'focusin',
• blur 'focusout'
• , function( original, fix )
• .event.specialfix
• setupfunction()
• if ( .browser.msie ) return false
• this.addEventListener( original,
  .event.specialfix.handler, true )
• ,
• teardownfunction()
• if ( .browser.msie ) return false
• this.removeEventListener( original,
• .event.specialfix.handler, true )
• ,
• handler function(e)
• arguments0 .event.fix(e)
• arguments0.type fix
• return .event.handle.apply(this, arguments)

4
Don't reinvent the wheel
5
Given enough eyeballs, all bugs are shallow
-- Eric S. Raymond
6
Infrastructure
7
Design
8
Consider the audience
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12

• jQuery.validator.addMethod("domain",
  function(value)
• return /http//mycorporatedomain.com/.test(value
  )
• , "Please specify the correct domain")
• jQuery.validator.addMethod("nowhite",
  function(value)
• return /\S/.test(value)
• , "No white space please")
• jQuery.validator.addMethod("nowhite",
  function(value)
• return /\d/.test(value)
• , "Please enter only digits")

13
(No Transcript)
14
Test-driven development
15
(No Transcript)
16
(No Transcript)
17
Tests first
18
Behaviour-driven developement
19
Why bother?
20
QUnit
21
test("my ajax code", function()
expect(1) stop() .get("myurl",
function(response) equals(response, "expected
response") start() ))
22
Implementing
23
(function() .fn.plugin function()
return this.each(function() // your code
here ) )(jQuery)
24
(function() .fn.delegate function(type,
delegate, handler) return this.bind(type,
function(event) var target
(event.target) if (target.is(delegate))
return handler.apply(target,
arguments) ) )(jQuery)
25
(function() .fn.plugin function(settings)
settings .extend(, .plugin.defaults,
settings) return this.each(function()
// your code here ) .plugin
defaults )(jQuery)
26
Document
27

• /
• The number of elements currently matched.
• _at_example ("img").length
• _at_before ltimg src"test1.jpg"/gt ltimg
  src"test2.jpg"/gt
• _at_result 2
• _at_property
• _at_name length
• _at_type Number
• _at_cat Core
• /
• /
• The number of elements currently matched.
• _at_example ("img").size()
• _at_before ltimg src"test1.jpg"/gt ltimg
  src"test2.jpg"/gt
• _at_result 2

28
Purpose
29
Dependencies
30
Puplic API
31
Options
32
Examples
33
Browsing
34
(No Transcript)
35
Release
36
jquery.plugin-1.2.3.zip - jquery-plugin-1.2.3 j
query.plugin.js jquery.plugin.min.js jquery.pl
ugin.pack.js - demo -docs -test
37
lttarget name"tooltip"gt ltantcall
target"generic"gt ltparam name"name"
value"tooltip" /gt lt/antcallgtlt/targetgtant
tooltip
38
1.3--- Added fade option (duration in ms) for
fading in/out tooltips IE lt 6 is excluded when
bgiframe plugin is included Fixed imagemaps in
IE, added back example Added positionLeft-option
- positions the tooltip to the left of the
cursor Remove deprecated .fn.Tooltip in favor
of .fn.tooltip1.2--- Improved bodyHandler
option to accept HTML strings, DOM elements and
jQuery objects as the return value Fixed bug in
Safari 3 where to tooltip is initially visible,
by first appending to DOM then hiding it
Improvement for viewport-border-positioning Add
the classes "viewport-right" and
"viewport-bottom" when the element is moved at
the viewport border. Moved and enhanced
documentation to docs.jquery.com Added examples
for bodyHandler footnote-tooltip and thumbnail
Added id option, defaults to "tooltip", override
to use a different id in your stylesheet Moved
demo tooltip style to screen.css Moved demo
files to demo folder and dependencies to lib
folder Dropped image map example - completely
incompatible with IE image maps aren't supported
anymore
39
(No Transcript)
40
(No Transcript)
41
Maintain
42
Avoid Blog Comments
43
(No Transcript)
44
(No Transcript)
45
(No Transcript)
46
(No Transcript)
47
(No Transcript)
48
Mailing list
49
(No Transcript)
50
(No Transcript)
51
General questions
52
Tracking
53
Questions?
54
Thank you