Revealing module pattern adding modules

JavaScript
1

I am currently using he revealing module pattern in a project and i have a page that needs some js code to be used that will be quite large.
I’d like to add this page’s js as a module but it will only work if it can access the main modules private functions.
Is this possible?

2

If you’re attempting to access private modules, that is almost certainly a bad-code smell that indicates that something else should be done instead, for which well-known patterns and solutions are all but guaranteed to exist.

Can you give us further information on what you’re wanting to achieve, and what you’re considering on doing?

3

Thanks for the reply. Essentially i have a main script that is using the revealing module pattern. I am now creating a new page that has some heavy js on it which i d rather have in a separate file and only include it on this page. The problem i have is that the main js file has some private functions that id like to use in the second file. I was hoping there would be a way to write it so the second file could be added to the main one.

So if first file has a namespace of mod then i can in the second file use either mod.second for example or still use mod but add new functions to it.

The main file has functions for Ajax calls and loaders and generic items i need to use in the second file.
hope that helps

4

It’s normally more beneficial to keep modules separate, so from what I’ve heard so far, it seems that it would be a good idea to either extract those private functions, or to provide a public interface for them so that the can be used.

5

I found a Sitepoitn article:

Where they use these functions but im not sure if this is good or not?

//protected utility functions
    utils =
    {
        //add properties to an object
        extend : function(root, props)
        {
            for(var key in props)
            {
                if(props.hasOwnProperty(key))
                {
                    root[key] = props[key];
                }
            }
            return root;
        },

        //copy an object property then delete the original 
        privatise : function(root, prop)
        {
            var data = root[prop];
            try         { delete root[prop]; } 
            catch(ex)   { root[prop] = null; }
            return data;
        }
    };
6

It is not a good idea to chuck your code in to another module, just because you want to use some private parts from within there. There are better solutions to the problem.

Can you give us more information about your specific situation?

7

If you’re after a nice modular approach that gives you a dependency management system as well, I would recommend using RequireJS. As an added advantage, it loads your scripts asynchronously.

Get started by including RequireJS:

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.6/require.min.js" data-main="scripts/main.js"></script>

Note that the <script> has a data-main attribute that should point to your RequireJS configuration/bootstrap.

For the purposes of this demo we’ll assume we have the following file structure:

/scripts/main.js
/scripts/app/app.js
/scripts/app/some-module.js
/scripts/lib/util.js
/index.html

We only need a really basic configuration file called “main.js”:

// Define the baseURL if your scripts live in a different directory than the
// "main.js" that you indicated as the "main" script on the RequireJS script tag
require.config({
    baseURL: "scripts"
});

// Define this module with it's only dependency being the app.js module.
define(["app/app"],    function(App){ 
    "use strict"; 
    // we can do whatever here - I expose the 
    // main App to the window because it helps with debugging 
    window.App = App;
});

A module is defined as follows:


define(["some/dependency/module1", "another/module2"], function(Module1, Module2) { 
   
    // RequireJS expects that an object of some sort is returned. 
    // This can be an object literal, an instantiated class, etc. 
   
    return { 
        something: "someValue" 
    }
});

I’ve set up a demo on http://afterlight.com.au/sitepoint/RequireJSSample/ (which includes a link to a ZIP file to download that example).

Hope this helps :slight_smile:

8

Thanks AussieJohn i have used require js before but that doesnt help with my current problem which is using the module pattern to be able to have two modules that can use the main module’s methods. Thank you for your detailed help.

Paul: i currently have one script.js file that using the module pattern has many private methods and only 2 public methods. On a particular page i need to do bespoke code that will be quite large but only for this one page so i really do not want to load this on any other page. I want to be able to use 2 or 3 of the private methods on this page.i don’t want to make them public and id rather not have to copy them over as maintaining them will be a pain. One of the main private methods is for ajax calls and some of the others id like to be able to use are for modal windows.

9

Those sound like perfect methods to expose publicly so all other modules can see them. As Paul suggested earlier you could either put them in their own library/utility module or create a public accessor for them on their current module.

10

is it not better to have your ajax function private?

11

I’m sure from an (ideal) application design point of view there might be some benefits to having those methods private, however I tend to go with whichever approach is more pragmatic. Privacy is a question of “do I want to expose or hide this property?” - you’ll need to weigh up the benefits of one over the other. In your case it makes perfect sense to expose these private methods publicly so your entire application can take advantage of them. It is of course also useful to create appropriate abstractions of those methods so they can be reused across your app with ease.

If your application design is making your job hard, change the design :slight_smile:

12

thanks for the advice :slight_smile: