Bulletproof JavaScript for plugins and themes

Slide 1

Slide 1 text

Bulletproof Ja v aScript for plugins and themes

Slide 2

Slide 2 text

Why is this talk needed?

Slide 3

Slide 3 text

Dangerous assumptions

Slide 4

Slide 4 text

all post edit pages are the same

Slide 5

Slide 5 text

all selectors return results

Slide 6

Slide 6 text

All WP installs are in the root of the domain

Slide 7

Slide 7 text

Doing things the right w ay

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Use WP Functions for file paths

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Properly register and enqueue scripts

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Localize your scripts

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Load scripts   Only when needed

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

function prefix_fancy_shortcode( $atts ) { wp_enqueue_script( 'myscript' ); return '

Some fancy shortcode HTML

'; } add_shortcode( 'fancy', 'prefix_fancy_shortcode' );

Slide 22

Slide 22 text

Only use   libraries   if you need to

Slide 23

Slide 23 text

Ja v aScript Best Practices

Slide 24

Slide 24 text

A void global v ariables

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

check that selectors returned results

Slide 27

Slide 27 text

var containers = document.getElementsByTagName(  'div'); if (containers.length > 0) { containers[0].innerHTML = "

Hello world!

" }

Slide 28

Slide 28 text

Unobtrusive

Slide 29

Slide 29 text

C lick me Click me

Slide 30

Slide 30 text

Use progressive enhancement http://apretaste.com

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Cache selectors

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

$('.content .mybutton').val('Submit'); $('.content .mybutton').on('click', function(){ $('.content .mybutton').val('Processing'); });

Slide 37

Slide 37 text

var myButton = $('.content .mybutton'); myButton.val('Submit'); myButton.on('click', function(){ myButton.val('Processing'); });

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Use event delegation

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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