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
   

   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