#jQuery UK Advanced jQuery Training
https://gist.github.com/dcneiner/0c8505e1b19f804d628f
##Notes
- Use event delegation e.g.
$(document).on('click', 'a', function () { })- One bound event, instead of n
- Complex selectors are no longer a performance issue because they're only used after each event, instead of DOM ready
element.id, instead of$(element).prop('id')$(element).prop('href'), instead ofelement.href$.proxy(callback, obj)- change the context of a callbacke.target- element that created the event (and bubbled it up)e.currentTarget- element bound to the event (equivalent tothis)e.originalEvent- browser event (boolean).triggerHandler()- no event bubbling.prevUntil()and.nextUntil()- prevAll up to and not including a specified element (or.prevAll()/.nextAll()if that element is not found).closest()- find the closest ancestor, less brittle than.parent*().offsetParent()- first ancester that does not have static position.end()- go to previous selector for extending traversing and does not require cached variables- Use CSS for showing/hiding
.slice()- returns a collection of elements between the starting index and the ending index (or the end of the set).not()not equivalnent to.is().addBack()- add the previous result set (from the stack) into the current result set$('[data-foo][data-foo!="baz"]')- find elements with the speficied data attribute that does not match the specified value- Selectors read right to left (unless the selector contains an ID)
- Keep selectors small and contextual
- DOM ready selectors need to be optimised
focusinandfocusoutfor delegated events, instead offocusandblurmouseoverandmouseoutfor delegated events, instead ofhovere.preventDefault()at the beginning of the callback to guard against JS errors, unless there is a server-side fallback- CSS class at the root of a component
<html class="no-js">- One-time initialisation - only initialise once and when we need to
- Variable
.one()followed by.on()- Class name with delegation (e.g.
:not(.is-ready))
- Click - always delegate
- Mouse enter/leave - expensive and try to avoid
- Mouse enter/leave + delay
- jQuery doTimeout http://benalman.com/projects/jquery-dotimeout-plugin/
- Scrolling
- Throttle or Debounce
- jQuery Waypoints
- jQuery Sonar
- Resizing
- Throttle or Debounce
- Beacon interaction - first indication that provides sufficient intent
- Setup when required
- Slideshow - click event (next slide)
- Setup first few slides on load
- Initialise JS and load more slides after the click event
- amplify.js - local storage
- Loading icon + delay
- Throttle and Debounce
- Underscore.js
- jQuery throttle and jQuery debounce http://benalman.com/projects/jquery-throttle-debounce-plugin/
- Globals - bad!!!
- window.status - always a string
- Cannot be garbage-collected
- Scope
- IIFE
- Separate code into logical files
- Modularity - http://addyosmani.com/resources/essentialjsdesignpatterns/book/ by Addy Osmani
- Module pattern
- Revealing module pattern
- CommonJS?
- Asynchronous module definition (AMD)
- RequireJS
define()- similar to an IIFErequire()- main.js
- baseUrl
- paths (without file extensions)
- shims (to support AMD)
- r.js - combine (and minify?)
- Text plugin - templating
- Separate files for templates
- *.tmpl.html
- RequireJS
- Be aware of methods that perform implicit iteration
- Plugins
- Reusable code that depends on jQuery
- Code organisation
- Extend
$.fn(alias for prototype) thisis a jQuery object inside a plugin- Always return
thisfor chaining - $.fn..defaults
.jquery()- determine if a variable is a jQuery object$.noop- default function for callbacks- Rich callbacks - plugin depends on the return value (e.g. HTML template)
.pushStack()wraps multiple traversal operations$.param()- convert object literal into a query string- jQuerify - add jQuery to any page http://www.learningjquery.com/2006/12/jquerify-bookmarklet
jQuery.getScript- load a script into the page$0- access the selected element from the console window
##Misc
- State machine (machina.js)?
- Backbone vs Knockout
- Universal module declaration?