Bulletproof JavaScript for plugins and themes

A look at using best practices and avoiding bad assumptions when writing JavaScript for WordPress plugins and themes.

Transcript

1. Bulletproof Ja v aScript for plugins and themes
2. Why is this talk needed?
3. Dangerous assumptions
4. all post edit pages are the same
5. all selectors return results
6. All WP installs are in the root of the domain
7. Doing things the right w ay
8. Use included libraries http://developer.wordpress.org/reference/functions/wp_enqueue_script/#defaults
9. Use WP Functions for file paths
10. get_stylesheet_directory_uri(); get_template_directory_uri(); plugins_url( 'myscript.js', __FILE__ );
11. Properly register and enqueue scripts
12. wp_register_script( $handle, $src, $deps, $ver, $in_footer ); wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
13. function prefix_register_scripts() { wp_register_script( 'myscript', get_template_directory_uri() . '/js/ myscript.js' ); } add_action( 'init', 'prefix_register_scripts' );
14. function prefix_script_load() { wp_enqueue_script( 'myscript' ); } add_action( 'wp_enqueue_scripts ', 'prefix_script_load' );
15. Localize your scripts
16. wp_localize_script( $handle, $object_name, $l10n );
17. wp_localize_script( 'fancy-slider', 'sliderText', array( 'next' => __( 'Next', 'fslide' ), 'prev' => __( 'Prev', 'fslide' ), 'page' => __( 'Page', 'fslide' ), ) );
18. sliderText.next; sliderText.prev; sliderText.page;
19. Load scripts 
 Only when needed
20. function prefix_script_load() { if ( is_home() ) { wp_enqueue_script( 'myscript' ); } } add_action( 'wp_enqueue_scripts', 'prefix_script_load' );
21. function prefix_fancy_shortcode( $atts ) { wp_enqueue_script( 'myscript' ); return '<p class="fancy">Some fancy shortcode HTML</p>'; } add_shortcode( 'fancy', 'prefix_fancy_shortcode' );
22. Only use 
 libraries 
 if you need to
23. Ja v aScript Best Practices
24. A void global v ariables
25. ;(function ($, objectName, undefined) { var mainNav = function() { // This is a private function }; objectName.init = function() { // This is a public funciton }; }(jQuery, window.objectName = window.objectName || {})); jQuery(function(){ objectName.init(); });
26. check that selectors returned results
27. var containers = document.getElementsByTagName(
 'div'); if (containers.length > 0) { containers[0].innerHTML = "<p>Hello world!</p>" }
28. Unobtrusive
29. <a href="javascript:myFunction();">C lick me</a> <button onclick="myFunction();">Click me</button>
30. Use progressive enhancement http://apretaste.com
31. V alidate and lint your Ja v aScript http://www.jslint.com
32. Follow WordPress’s Ja v aScript coding standards https://make.wordpress.org/core/handbook/best-practices/coding-standards/ javascript
33. Cache selectors
34. document.querySelector('.content .my -button').value = 'Submit'; document.querySelector('.content .my -button').addEventListener('click', function(){ document.querySelector('.content .my-button').value = 'Processing'; });
35. var myButton = document.querySelector('.content .my- button') myButton.value = 'Submit'; myButton.addEventListener('click', function(){ myButton.value = 'Processing'; });
36. $('.content .my- button').val('Submit'); $('.content .my- button').on('click', function(){ $('.content .my- button').val('Processing'); });
37. var myButton = $('.content .my- button'); myButton.val('Submit'); myButton.on('click', function(){ myButton.val('Processing'); });
38. myButton.on('click', function(){ var $this = $(this); ... });
39. Use event delegation
40. document.getElementById("mainNav")
 .addEventListener("click",function (e) { if (e.target && e.target.matches("a.nav-link")) { console.log("Anchor element clicked!"); } });
41. $('#mainNav').on('click', 'a.nav- link', function(e){ console.log("Anchor element clicked!); });
42. Stay up-to-date on jQuery releases
43. Looking to the future
44. Ja v aScript Renaissance
45. New possibilities and opportunities
46. REST API
47. Ecmascript 6
48. Build tools
49. Keep learning!
50. http://wpdrawattention.com
51. http://websiteweekend.la
52. Questions?
53. Thank you