Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Natalie MacLees

September 10, 2016
Tweet

More Decks by Natalie MacLees

Other Decks in Technology

Transcript

  1. Bulletproof
    Ja
    v
    aScript
    for plugins and themes

    View Slide

  2. Why is this talk
    needed?

    View Slide

  3. Dangerous
    assumptions

    View Slide

  4. all post edit
    pages are the same

    View Slide

  5. all selectors
    return results

    View Slide

  6. All WP installs are in
    the root of the domain

    View Slide

  7. Doing things the
    right w
    ay

    View Slide

  8. Use included
    libraries
    http://developer.wordpress.org/reference/functions/wp_enqueue_script/#defaults

    View Slide

  9. Use WP Functions
    for file paths

    View Slide

  10. get_stylesheet_directory_uri();
    get_template_directory_uri();
    plugins_url( 'myscript.js',
    __FILE__ );

    View Slide

  11. Properly
    register and
    enqueue scripts

    View Slide

  12. wp_register_script( $handle,
    $src, $deps, $ver,
    $in_footer );
    wp_enqueue_script( $handle,
    $src, $deps, $ver,
    $in_footer );

    View Slide

  13. function prefix_register_scripts() {
    wp_register_script( 'myscript',
    get_template_directory_uri() . '/js/
    myscript.js' );
    }
    add_action( 'init',
    'prefix_register_scripts' );

    View Slide

  14. function prefix_script_load() {
    wp_enqueue_script( 'myscript'
    );
    }
    add_action( 'wp_enqueue_scripts
    ', 'prefix_script_load' );

    View Slide

  15. Localize your
    scripts

    View Slide

  16. wp_localize_script( $handle,
    $object_name, $l10n );

    View Slide

  17. wp_localize_script( 'fancy-slider',
    'sliderText', array(
    'next' => __( 'Next', 'fslide' ),
    'prev' => __( 'Prev', 'fslide' ),
    'page' => __( 'Page', 'fslide' ),
    ) );

    View Slide

  18. sliderText.next;
    sliderText.prev;
    sliderText.page;

    View Slide

  19. Load scripts 

    Only when needed

    View Slide

  20. function prefix_script_load() {
    if ( is_home() ) {
    wp_enqueue_script( 'myscript' );
    }
    }
    add_action( 'wp_enqueue_scripts',
    'prefix_script_load' );

    View Slide

  21. function
    prefix_fancy_shortcode( $atts ) {
    wp_enqueue_script( 'myscript' );
    return 'Some
    fancy shortcode HTML';
    }
    add_shortcode( 'fancy',
    'prefix_fancy_shortcode' );

    View Slide

  22. Only use 

    libraries 

    if you need to

    View Slide

  23. Ja
    v
    aScript Best
    Practices

    View Slide

  24. A
    void global
    v
    ariables

    View Slide

  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();
    });

    View Slide

  26. check that selectors
    returned results

    View Slide

  27. var containers =
    document.getElementsByTagName(

    'div');
    if (containers.length > 0) {
    containers[0].innerHTML =
    "Hello world!"
    }

    View Slide

  28. Unobtrusive

    View Slide

  29. href="javascript:myFunction();">C
    lick me
    onclick="myFunction();">Click
    me

    View Slide

  30. Use progressive
    enhancement
    http://apretaste.com

    View Slide

  31. V
    alidate and lint
    your Ja
    v
    aScript
    http://www.jslint.com

    View Slide

  32. Follow WordPress’s
    Ja
    v
    aScript coding
    standards
    https://make.wordpress.org/core/handbook/best-practices/coding-standards/
    javascript

    View Slide

  33. Cache selectors

    View Slide

  34. document.querySelector('.content .my
    -button').value = 'Submit';
    document.querySelector('.content .my
    -button').addEventListener('click',
    function(){
    document.querySelector('.content
    .my-button').value = 'Processing';
    });

    View Slide

  35. var myButton =
    document.querySelector('.content .my-
    button')
    myButton.value = 'Submit';
    myButton.addEventListener('click',
    function(){
    myButton.value = 'Processing';
    });

    View Slide

  36. $('.content .my-
    button').val('Submit');
    $('.content .my-
    button').on('click', function(){
    $('.content .my-
    button').val('Processing');
    });

    View Slide

  37. var myButton = $('.content .my-
    button');
    myButton.val('Submit');
    myButton.on('click', function(){
    myButton.val('Processing');
    });

    View Slide

  38. myButton.on('click', function(){
    var $this = $(this);
    ...
    });

    View Slide

  39. Use event
    delegation

    View Slide

  40. document.getElementById("mainNav")

    .addEventListener("click",function
    (e) {
    if (e.target &&
    e.target.matches("a.nav-link")) {
    console.log("Anchor element
    clicked!");
    }
    });

    View Slide

  41. $('#mainNav').on('click', 'a.nav-
    link', function(e){
    console.log("Anchor element
    clicked!);
    });

    View Slide

  42. Stay up-to-date on
    jQuery releases

    View Slide

  43. Looking to the
    future

    View Slide

  44. Ja
    v
    aScript
    Renaissance

    View Slide

  45. New possibilities
    and opportunities

    View Slide

  46. REST API

    View Slide

  47. Ecmascript 6

    View Slide

  48. Build tools

    View Slide

  49. Keep learning!

    View Slide

  50. http://wpdrawattention.com

    View Slide

  51. http://websiteweekend.la

    View Slide

  52. Questions?

    View Slide

  53. Thank you

    View Slide