JavaScript best practices

Prefix jQuery objects with the dollar sign ($) so they can be distinguished from other objects.

var $header = $("#header");

Instead of using the $ variable directly use a wrapper to inject the jQuery object and only use the dollar sign in the local scope.

// The dollar sign will be used only inside the anonymous function here.
(($) => {
    // The variable $ now refers to jQuery.

Add any DOM manipulation code and event handlers inside the document.ready() function to make sure the script does not try to find the elements before the DOM has finished loading. This is recommended by the official jQuery documentation.

// Notice how it's a shorthand for a wrapper for the $ variable (as above) and also a document.ready() at once.
// Use this if you only want to write a quick document.ready().
jQuery(($) => {
    $('.elementClass').on('click', () => { // Click event handler.
        alert('I have been clicked.');

Try to avoid adding variables to the global scope. A handy way of exposing globals is to namespace them under jQuery as demonstrated with the following example:

(($) => {
    $.extend(true, {
        myModule: {
            // Such deep nesting is not always necessary, the method could be on this level directly
            myClass: { // More of a "class" than a real class of course
                myMethod() {
                    alert('myMethod called!');

    // You can use the above like this:

When you want to access resources under a given URL of the current web application (like fetching data from a web API endpoint) never hard-code the URL into yours scripts. URLs can change and may depend on the environment (a trivial example being the usage of ApplicationPath that e.g. could prefix URL's during local development but can be empty in the production environment).

Instead inject such information into your scripts from templates.

This page is part of the Orchard Dojo Library!

This page and many others here are part of the open-source, portable package of Orchard Core goodies: the Orchard Dojo Library for Orchard Core. The Library is freely accessible by anyone; just go to its repository to download its full content (you can even download the textual content of the Library as a big concatenated document in HTML), file issues or fork it! You can even edit it online on Bitbucket, just click on the Edit link in the upper right corner!

Note that the Library also has an Orchard 1.x version, check it out here!