Modular design with Require.js

Question

I am trying to get a better understanding of the modular design pattern and I am using Requirejs to manage my dependencies.

I understand separating code into modules (using define with RequireJS) so they take on only single responsibilities and also splitting them into separate JavaScript files so Require JS can load them.

In my main.js, the entry points looks like this (which depends on work module). For brevity, I have left out the require.config, paths, etc.:

require(     
  ['work'],     
  function(work) {         
     var url = "urlstring";         
     work.buildHTMLTable(url);     
  } 
);

the method buildHTMLTable will append html table to a div tag.

I want to build a re-usable generic js library that will handle vertical/horizontal scroll event and arrow key navigation event. I need direction on how to incorporate these events. The below method is working, but I wanted to make sure I was setting everything up correctly.

1. Should I have one define method that has a function which takes care of handling the scrolling like so?

   define('scrollingGrid',
       ['jquery'],
       function ($) {
   
          var bindScroll = function (hs, vs) {
   
          $(hs).on('scroll', function (e) {
   
          }
   
          $(vs).on('scroll', function (e) {
   
          }
   
   
           }; return {
           bindScroll: bindScroll
           };
   
   
   
       }
   
   );
   

   and then I can call it from the main as so:

   require(     
         ['work', 'grid'],     
         function(work) {         
            var url = "urlstring";         
            work.buildHTMLTable(url);  
   
            grid.bindScroll('#hscroll', '#vscroll');
   
         } 
       );
   

2. Should I also handle the arrow key navigation in the same scrollingGrid module (see below)?

   require(     
             ['work', 'grid'],     
             function(work) {         
                var url = "urlstring";         
                work.buildHTMLTable(url);  
   
                grid.bindScroll('#hscroll', '#vscroll');
                grid.bindArrow('#tab');
   
   
             } 
           );
   

In summary, I am creating a re-usable JavaScript control that could handle events on an HTML table. Is what I am doing okay or is there a better way?

Answer 1

First, unless the work module is about force times distance in a physics simulator, it is a terribly over-generic name! What does the name work communicate to someone who is sitting down with your application for the first time? Name modules after what they do and be as specific as possible but not more so.

Second, if you're only exposing a single method in that module just return that method directly, no need for an object.

Next, won't your scrolling handlers depend on a specific structure being present already? You might want to make it explicit. I can't really make a recommendation how without understanding better how you plan to use this (I'm really confused what work.buildHTMLTable(url) could possibly do).

As for where key navigation should go, it really is all about naming. So if you view the arrow key navigation to be a part of the grid scrolling then yes, it should be in the module that sets that up, otherwise it should not be.

Finally, What if you have two grids on the same page? seems like you're trying to apply a lot of stuff globally? Perhaps your modules can accept the grid you want to modify as a parameter?

Answer 2

It seems like this is creating an unnecessary namespace:

return {
   bindScroll: bindScroll
};

When it might as well be:

return bindScroll;

Initialised with:

bindScroll('#hscroll', '#vscroll');