loading table of contents...

6.4.1.4. JavaScript Files

In the CoreMedia frontend, JQuery is used as the main JavaScript framework. You should also use this framework for your own extensions.

Using a selector in JQuery is an expensive operation and should only be done once. If you want to use the selector multiple times, store it in a variable. In the example, the variable starts with a $, so that it is clear, that it is a jQuery object.

    Bad example

$(".container .children").addClass("black");
$(".container .children").show();

Avoids redundancy but still bad example

var selector = ".container .children";
$(selector).addClass("black");
$(selector).show();

Good example

var $children = $(".container .children");
$children.addClass("black");
$children.show();

    

Example 6.10.  Save selector in variable


In order to avoid conflicts with different JavaScript frameworks the noConflict(true) functionality of jQuery is used to reset the assignment of $ and also of jQuery global scope variables. While $ avoids conflicts with other JavaScript frameworks such as Dojo, removing jQuery assignment also makes sure that there are no conflicts with different jQuery versions used.

For CoreMedia JavaScript this has the consequence that you cannot rely on $ or jQuery as a variable of the global scope. The jQuery functionality used in CoreMedia Blueprint is attached to the variable coremedia.blueprint.$

This can be realized without much refactoring to the JavaScript Code if you declare a local variable $ which is only valid in the current scope (var $ = coremedia.blueprint.$). CoreMedia jQuery plugins already have been adjusted in a more elegant way, where the correct jQuery Version is injected into the function registering the plugin (see for example, jquery.responsiveImages.js).