PNW Drupal Summit Session: Javascript Workshop

I need a session on how to choose which session to go to. So much great information and so little time. I started out in a different session but had to pop in for the last half of this Javascript session led by Katherine Senzee, a Senior Engineer at Acquia.

Here are a few brief take-aways from the session:

For Loops are Your Friend

• Katherine had some pretty strong opinions about this (JS pun, see what I did there?). Anyone who writes Javascript knows how tricky keeping track of 'this' can be. You can write javascript such that 'this' means the same thing as it does in php i.e. the current instance of the object.
• For loops also allow greater readability because you can assign 'this' to a (meaningful) variable and then use the variable within the loop. Unless you *enjoy* spending all your time tracing back through anonymous functions to figure out what 'this' is referring to.
• jQuery provides the .each() function to iterate over collections of objects and lots of people love it. However, it comes with a resource penalty and can take up to eight times longer to process than a simple for-loop
• Event handlers require a function to run. However assigning anonymous functions means the inner function will change the meaning of 'this' to the thing that was clicked, not the object you are working with. You can avoid them by using prototyping to create function handlers and then bind your object to them.

A few other snippets

• jQuery chaining vs variable assignment: no real performance penalty.
• In PHP a function cannot be changed once it is written. In Javascript, a function is just your opinion of how something could work. This is Drupal so you can be sure someone else will want to alter your code. Write your Drupal JS in such a way that other people can get to it and alter it easily
• Use the data or ajax prototype capabilities to write your click handlers and then bind objects to them to keep from using anonymous functions
• If you need access to both the raw DOM node and the jQuery object you can declare them both at the beginning of your function like so: var fieldset = $fieldset[i]; or
  var $fieldset = $(fieldset);
• If you use a good IDE or text editor that automatically shows which of your variables are global, it will help keep you from making accidental global variables
• If your IDE isn't enough to keep you in line, using anonymous self invoking function syntax for your jQuery then any accidental globals will still be limited to just your code. Example: (function ($) { myDumbGlobal will be limited to this scope.})(jQuery);
• Use JSLint or JSHint to clean up your code before deploying.

You can check out Katherine's session slides for more information.