Refactoring Crossrider extension code

Question

I built my extension using Crossrider and at the moment all my code is in the extension.js file. However, it's getting rather long and becoming more difficult to maintain in this monolithic file. Is there a way to split my code into separate files and still use them in my extension?

So for example, if I my extension.js file is structured like the following example, I would like functions f1 & f2 to be in a separate file that I can load into the extension:

appAPI.ready(function($) {
  init();
  f1();
  f2();
  ...

  function init() {
    // init code
    ...
  }
  function f1() {
    //hundreds of lines of code
  }
  function f2() {
    //hundreds of lines of code
  }
  ...
});

score 5 · Answer 1 · answered Aug 18 '14 at 11:11

You can define the functions in one or more resource files (e.g. init.js, functions.js) and then include it from within appAPI.ready. For more information about resources, see appAPI.resources.

So, using your example, your code would be something like:

extension.js:

appAPI.ready(function($) {
  appAPI.resources.includeJS('init.js');
  appAPI.resources.includeJS('functions.js');
  init();
  f1();
  f2();
  ...
});

init.js:

function init() {
  // init code
  ...
}

functions.js:

function f1() {
  //hundreds of lines of code
}
function f2() {
  //hundreds of lines of code
}

[Disclosure: I am a Crossrider employee]

Refactoring Crossrider extension code

1 Answers1