By Tom

Bootstrap JavaScript File

We talk a lot about the idea of having bootstrap files in WordPress plugins, which I think are great, but we seem to limit it to those files that are responsible just for starting our WordPress plugins.

This isn’t exactly what I meant, but I dig the picture.

I mean, hooking into plugins_loaded and then instantiating some classes, setting up a service registry, or things like that are important. But what about other components that make up our plugins?

And by that, I mean what about our JavaScript files? Should they have their way to be bootstrapped?

Bootstrapping JavaScript Files

When it comes to working with WordPress, you’re more than likely going to be working with jQuery.

  • It’s a tried and true library,
  • It ships with core,
  • The UI library is available so that you can take advantage of other elements, as well.

And sure, this isn’t to discount the use of other libraries like Backbone, but when it comes to working with DOM manipulation on both the client-side and the server-side you’re less likely to use Backbone (and more likely to use jQuery).

Furthermore, there are already JavaScript standards for WordPress and I think, just as we should be using the WordPress Coding Standards with our PHP files, we should be linting our JavaScript with JSHint.

But this still doesn’t answer the question:

Should we be bootstrapping our JavaScript files?

First, I want to be clear that what I mean by bootstrapping JavaScript files is making sure that our document ready handler isn’t cluttered with all kinds of calls to manipulate the DOM.

Secondly, I’m of the mindset that there should be a JavaScript file related to individual tasks and that these should be put together into a single file during the build process. This is a topic for another post, though.

With that said, here’s a basic boilerplate for a jQuery-based JavaScript file to use with WordPress:

And here’s an example of what I’d like to avoid:

And this code isn’t even that great of an offender. But I still argue that too much functionality exists in the ready handler. Bootstrapping the JavaScript files, instead, would look something like this:

Obviously, I’ve left out the method implementation, but I’ve tried to make the point clear enough. There should be functions each of which have a responsibility, and they should call other functions they need when they need them.

The ready handler just invokes whatever function or functions should fire as soon as the DOM is ready. This ultimately makes the code that has so much potential to be difficult to read a bit easier to follow, to document, and to trace.

Sure, there are more sophisticated ways to write your JavaScript, and I’m not discounting those, but if you’re in the habit of throwing all of your code into the ready handler, consider smaller functions, starting only the ones that are needed, and then building them out from there.

In a future post, I’ll talk about separating the files and then combining them into a single file during the build process as that will take the benefits of this idea even further.

Bootstrapping JavaScript Files in WordPress was written by Tom. For more on WordPress, development, and resources then visit Tom McFarlin’s blog.

Read more here:: Bootstrapping JavaScript Files in WordPress