RequireJS conditional dependencies

Question

I'm trying to define a module with conditional dependencies (depending on Modernizr test). I've done something that works but feel hacky to me.

Can you tell me what you think and if there is a better way to do it? Thanks.

var dependencies = ["jquery"];

require(["modernizr"], function() {
  if(Modernizr.canvas) dependencies.push("modernizr/excanvas");
});

define(dependencies, function($) {

  $(function() {
    // code here
  });

});

Answer 1

You are trying to just load that file up when a browser doesn't support something, load more javascript to make it sorta work type scenario?

Or I could see you trying to implement the same feature using different methods based upon wether the method is available or not, and want to load in additional or alternative javascript based on that condition.

Still, bear with me here I'm making assumptions and I haven't tried this exactly but the theory makes sense maybe :)

Perhaps something along the lines of

define("jquery","modernizr", function($) {
  $(function() {
    var functionMain = function() {
      // code here
    }

    var functionA = require(["modernizr/excanvas"], function() {
      functionMain()
    });    
    //require here not strictly necessary
    var functionB = require([""], function() {
      functionMain() 
    });    


    if(Modernizr.canvas)
      functionA();
    else
      functionB()
  }); 
});

I don't know, perhaps just a matter of style or preference, this is just another way of doing the same thing really but without the dependences array which I just took a dislike to (lol) though really there's probably nothing wrong with it if all you want to do is load that file in conditionally and the rest of the code is the same

I got thinking more about splitting implementations up based on a condition and then having different conditional requires per implementation, still its all opinion eh? :)