Imagine this is your module…
define(['Utils/css'], function(css){
console.log(css);
});
If your Utils/css
dependancy was like the following…
define(['require'], function(require){
return {
style: require('Utils/CSS/getAppliedStyle'),
classes: require('Utils/CSS/getArrayOfClassNames'),
add: require('Utils/CSS/addClass'),
remove: require('Utils/CSS/removeClass'),
has: require('Utils/CSS/hasClass')
}
});
…then you would have this error displayed: Uncaught Error: Module name 'Utils/CSS/getAppliedStyle' has not been loaded yet for context: _
because you created a race condition issue.
One work around would be to do…
define(['Utils/CSS/getAppliedStyle', 'Utils/CSS/getArrayOfClassNames', 'Utils/CSS/addClass', 'Utils/CSS/removeClass', 'Utils/CSS/hasClass'], function(getAppliedStyle, getArrayOfClassNames, addClass, removeClass, hasClass){
return {
style: getAppliedStyle,
classes: getArrayOfClassNames,
add: addClass,
remove: removeClass,
has: hasClass
}
});
But that's FUGLY, so instead, go back to what we had before but just don't specify require
as a dependancy…
define(function(require){
return {
style: require('Utils/CSS/getAppliedStyle'),
classes: require('Utils/CSS/getArrayOfClassNames'),
add: require('Utils/CSS/addClass'),
remove: require('Utils/CSS/removeClass'),
has: require('Utils/CSS/hasClass')
}
});
I have an idea of why this works but maybe @jrburke can clarify.
since both will end up pointing at the same place I usually use relative paths to reference things that are inside the same folder, if you change the folder structure or decide to rename folders you don't need to go back and update everything. It's also more concise.