Bulletproof JavaScript for plugins and themes

Bulletproof JavaScript for plugins and themes

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

9c9bcdbab2f098f69b3adadde6ee2936?s=128

Natalie MacLees

September 10, 2016
Tweet

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