Object JavaScript – Code Walkthrough Initializing a Module That Needs RequireJS, jQuery, LoDash

RequireJS is a JavaScript file and module loader. In Getting Started with Modules Using RequireJS, you have learned a lot about how you can use it to load your dependencies using define() and require().

In this code snippet, you will learn how you can load the dependencies, initialize a module with values that you pass in, and then make public some of the methods.

And you will see how to put files in folders to help keep identify which modules you write in your app and which modules are from third parties.

You will have just a few files:

main.js and sample.js in Scripts/app.
the require and lodash libraries.
the HTML file.

HTML file

First set up require.js in the body of your html file. In the following line of code on your HTML page, you call the main.js file that is in the Scripts/app folder.

<script data-main="Scripts/app/main" src="scripts/require.js"></script>

Typically you would put the files you use in your apps into a separate folder. In my case, I like to have NuGet take care of updates and making sure that when I use a particular JavaScript library that all of its dependencies are available. NuGet helps me manage all those dependencies. (Require helps me manage those dependencies at runtime.)

In your Scripts/app/main.js file, you configure require. In this case, for the purpose of this code sample, you want to have lodash ready to work with collections and arrays. I also set up the baseUrl and paths to your libraries.

(function () {
  "use strict";

  require.config({
    baseUrl: 'Scripts',
    paths: {
      "underscore": "lodash"
    }
  });
})();

sample.js

Let’s explore the sample.js in two steps.

Initialize and Return Module

First step — you can initialize the values and set up the module.

In Scripts/app/sample.js you define a new module that requires underscore and then passes it in.

define(['underscore'], function (_) {
  "use strict";
    var initialValue;

  var module = {
    // goes here
  };

  // initialization function
  var init = function (myInitialValue) {
    initialValue = myInitialValue;
    // initialization
    return module;
  };

  return init;
});

Using this technique, you expose the init method publicly outside of sample.js. And have the init method return the module, which you will use to expose the sample’s public methods.

Create Methods, Make Some of Them Public

Second step — create some methods and expose them publicly through module.

So let’s make the module do something with two private methods: one that logs out the initial value to the console and one that adds to the initial value. Neither method is exposed outside of sample.js. And you can make those methods public using literals inside module.

define(['underscore'], function (_) {
  "use strict";
  var initialValue;

  var myLog = function () {
    console.log("in sample object:" + initialValue);
  };

  var myAdd = function (aNumber) {
    return initialValue + aNumber;
  };

  var module = {
    log: myLog,
    add: myAdd
  };

  // initialization function
  var init = function (myInitialValue) {
    initialValue = myInitialValue;
    // initialization
    return module;
  };

  return init;
});

Back to main.js

Now you will want to call your require.js module.

In Scripts/app/main.js you require the app/sample module. RequireJS will find the sample js file along the path from the baseUrl that you defined in a previous section. It returns sample object after the sample’s requirement (lodash) has been loaded.

Next you initialize it, and then use it to log and add.

require(['app/sample'], function (sample) {
  // initialize here
  var mySample = sample(3);

  // then call a method
  mySample.log();

  // and call another method
  var seven = mySample.add(4);
});