I wonder how module dependency manager like RequireJS really works.

Yuu Aoi San!

After rereading the last chapter of Scope & Closure of YDKJS (You Don’t Know JavaScript) book series, I impose myself to explain this interesting code in my own words.

  var MyModules = (function Manager() {
    var modules = {};

    function define(name, deps, impl) {
      for (var i=0; i<deps.length; i++) {
          deps[i] = modules[deps[i]];
      }

      modules[name] = impl.apply( impl, deps );
    }

    function get(name) {
      return modules[name];
    }

    return {
      define: define,
      get: get
    };
  })();

As a person with beginner’s mind, I always think I already know about something but God knows that I know nothing about it.

To begin with, let’s this snippet speaks volume before we go any further.

Without familiarity with apply, call or bind, the snippet above would be hardly understood. If you find it confusing, it’s well advised to review apply before rereading my comments on the snippet. Here’s the best JavaScript documentation that explains apply thoroughly.

Yuu Aoi San! I am sorry, she is too cute!


Well done! After reading the documentation about apply, I am sure you understand the snippet more than I do. With that premise, I can say that you recognize that the $mod or ModuleManager make any objects (modules) we define persist throughout the runtime. Those modules resides in private variable, modules.

  // There... cannot be accessed directly.
  var modules = {};

Let’s say I’d like to have a module that greets anyone I meet.

  // $mod and ModuleManager are two sides of the same coin.
  $mod.define('greeting', [], function greeting() {
    var attributes = {
      sayHello: function sayHello(name) {
        return `Hello ${name}, nice to meet you.`;
      }
    };

    return attributes;
  });

Here’s how I make use of it.

  var greeting = $mod.get('greeting');
  greeting.sayHello('ちえさ せれな');

Right now, my heart burns with high dosage of cuteness. I really want to confess this feeling to the ones I like the most, but I need to greet them before I do that. Why not I make use of existing module (‘greeting’) we just defined? Don’t repeat yourself they say!

  $mod.define('confession', ['greeting'], function confession(greeting) {
    var attributes = {
      // Pick up line for each girl (we can override it).
      pickUpLines: {},

      // Store the name of my crushes for later use.
      names: [],

      // `crushes` is an array of girl's names I like
      confess: function confess(crushes) {
        crushes.map(function (name, index) {
          (function (name, index) {
            // Store the girl's name.
            attributes.names[index] = name;
            // Store the default pick up line.
            attributes.pickUpLines[name] = function pickUpLine() {
              var wording = greeting.sayHello(name);
              return `${wording} I love you.`;
            };
          })(name, index);
        });
      },

      // Melt a girl's heart with implicit words.
      setCustomPickUpLine: function setCustomPickUpLine(wording, name) {
        attributes.pickUpLines[name] = function pickUpLine() {
          return `Dear ${name}, ${wording}`;
        }
      }
    };

    return attributes;
  });

Alright! Now I can confess my feeling to multiple girls at once! I am fabulous!

  var confession = $mod.get('confession');
  confession.confess([
    'ルル オーリア',
    'メリー メディオーアティ',
    'ちえさ せれな'
  ]);

Oh, for that cute girl endowed with cute ponytail (if she happens to wear one), I have prepared a special pick up line I borrow from a friend. I am sure I can touch her heart with it.

  confession.setCustomPickUpLine("I hate a lot of people but I don't \
  hate you, therefore I love you.", 'ちえさ せれな');

List my pick up lines toward those cute girls.

  confession.names.map(function (name) {
    var pickUpLine = confession.pickUpLines[name]();
    console.log(`${pickUpLine}`);
  });

  // Hello ルル オーリア, nice to meet you. I love you.

  // Hello メリー メディオーアティ, nice to meet you. I love you.

  // Dear ちえさ せれな, I hate a lot of people but I don't hate you,
  // therefore I love you.

You know what, I lie about me loving them. I am sure it’s not about “love”, it’s a mere infatuation, a long lasting desire of attachment that would vanish in no time. It’s hormonal. One thing I can tell them truthfully is that I love my family and my hobbies. I am sorry darling.

  $mod.define('lying', ['confession'], function lying(confession) {
    var attributes = {
      lieToThem: function lieToThem() {
        confession.names.map(function (name) {
          var apology = "I am sorry... That was a lie.\n\n";
          var wording = confession.pickUpLines[name]();
          console.log(`I once said, "${wording}" ${apology}`);
        });

        return "That's it."
      }
    };

    return attributes;
  });

Truth be told.

  var lying = $mod.get('lying');
  lying.lieToThem();

  // I once said, "Hello ルル オーリア, nice to meet you. I love you."
  // I am sorry... That was a lie.

  // I once said, "Hello メリー メディオーアティ, nice to meet you. I love you."
  // I am sorry... That was a lie.

  // I once said, "Dear ちえさ せれな, I hate a lot of people but
  // I don't hate you, therefore I love you."
  // I am sorry... That was a lie.

That’s it for today. I want to kiss ちえさ せれな on the cheek.