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
).