JavaScript should be compatible with libraries other than jQuery

JavaScript should be made compatible with libraries other than jQuery by adding a small wrapper around your existing code:

(function ($, Drupal) {
  // Original JavaScript code.
})(jQuery, Drupal);

This wrapper is an anonymous closure that provides state throughout the page's lifetime and ensures your code does not unintentionally create/override global variables.

It also explicitly imports the global jQuery variable so that your code can use the local $ variable instead of the jQuery global. This is essential because Drupal loads jQuery with noConflict() compatibility so the jQuery library does not setup the normal $ as a global variable.

The wrapper above also explicitly refers to the Drupal global. It is good JavaScript coding practice to explicitly list the globals your code is relying on in this way. It will also minify better.

A detailed explanation of this JavaScript pattern can be found in the article JavaScript Module Pattern: In-Depth.