Skip to content

Instantly share code, notes, and snippets.

@andrewgunn

andrewgunn/AdvancedjQuery.md

Last active December 16, 2015 09:09
Show Gist options
  • Save andrewgunn/5411325 to your computer and use it in GitHub Desktop.
Save andrewgunn/5411325 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AdvancedjQuery.md

#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 of element.href
  • $.proxy(callback, obj) - change the context of a callback
  • e.target - element that created the event (and bubbled it up)
  • e.currentTarget - element bound to the event (equivalent to this)
  • 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
  • focusin and focusout for delegated events, instead of focus and blur
  • mouseover and mouseout for delegated events, instead of hover
  • e.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
  • 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
  • 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 IIFE
        • require()
        • 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
  • Be aware of methods that perform implicit iteration
  • Plugins
    • Reusable code that depends on jQuery
    • Code organisation
    • Extend $.fn (alias for prototype)
    • this is a jQuery object inside a plugin
    • Always return this for 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?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment