Last Updated: September 29, 2021
·
1.324K
· iwootten

Use CommonJS Module Definitions with RequireJS

Your client side apps can quickly become unwieldy, but writing definitions that resemble:

define([
'jquery',
'underscore',
'backbone',
'models/SomeModel',
'views/SomeView',
'jquery.tmpl'
], function ($, _, Backbone, SomeModel, SomeView) {

};

can be cumbersome and error prone. In the above example, if I add a new requirement and new argument and I don't notice that jquery.tmpl isn't defined as a parameter, I'm going to get a failure in my app. It's also annoying to copy and paste to other definitions, due to the module and parameter being on different lines.

I much prefer using the CommonJS format, where the code will be as below:

define(function (require, exports, module) {
  var $         = require('jquery'),
    _           = require('underscore'),
    Backbone    = require('backbone'),
    TimerModel  = require('models/SomeModel'),
    TimerView   = require('views/SomeView');

    require('jquery.tmpl');
};

This way, we can easily add required modules with or without parameters. It's also extremely simple to copy the definition in part or it's entirety.