我可以像这样模块化我的javascript代码吗？

Question

I really don't like all of my javascript code ending up in just one file, I tried using libraries like require.js to help me modularize but they end up getting a little complex for me. So I was wondering if I can do something like this.

Context : Say I want a different module to take care of Random Number generation. I create a new file (with a capital first letter my self made convention)

// File : RandomNumberGenerator.js

(function(){
    // export this to the outer world
    _randomGenerator = new RandomNumberGenerator();

    function RandomNumberGenerator() {
    }

    RandomNumberGenerator.prototype.getRandomNumber = function(rangeLower, rangeHigher) {
        if(rangeLower !== undefined && rangeHigher === undefined) { // user passed in just one parameter
            rangeHigher = rangeLower;
            rangeLower = 0;
        }else if (rangeLower === undefined && rangeHigher === undefined) {
            return (Math.random());
        }

        return (Math.floor((Math.random() * (rangeHigher - rangeLower)) + rangeLower));
    };
})();

Now _randomGenerator is visible to the global scope. I added '_' as again a self made convention.

Now I can use this in my main js file like

(function() {
    console.log(_randomGenerator.getRandomNumber(5));
})();

Can I do this? Is there something I am overlooking that can cause problems in the long run? Is there a possibility of polluting the global scope by doing something like this ?

Answer 1

What you've described is the Immediately invoked function expression module pattern.

To export functions and objects you need to attach them to the global window object, usually it's recommended you place them under a namespace to avoid collisions with other code:

(function() {

    function RandomNumberGenerator() {
    }

    RandomNumberGenerator.prototype.getRandomNumber = function(rangeLower, rangeHigher) {
        ...
    };

    // Create new namespace
    window.MyModule = {};

    // Export the RandomNumberGenerator
    window.MyModule.RandomNumberGenerator = RandomNumberGenerator;

    // Export a single instance
    window.MyModule.defaultRandomNumberGenerator = new RandomNumberGenerator();
})();

You can also import values into an IIFE, which allows you to create aliases:

(function(rng, max) {

    console.log(rng.getRandomNumber(max));

})(MyModule.defaultRandomNumberGenerator, 5);

Can I do this?

Yes

Is there something I am overlooking that can cause problems in the long run?

Don't let your IIFE's get too big, or you'll lose the benefit. Small well-defined modules are easier to maintain.

Also if you want two modules to share the same namespace you'll need to do something more elaborate than my example above otherwise one module will overwrite the other.

IIFE's can hold state but they are effectively singletons, try to ensure you create objects and put any state in those to avoid global state .

Is there a possibility of polluting the global scope by doing something like this?

Yes it is possible; you should still name your namespace carefully - don't use window.jQuery for example!

Answer 2

Yes, you can do that. In fact, it's a very frequent pattern. It's commonly combined with automatic concatenation of the JS files, keeping the distinction between the source files (unconcatenated) and the production file (concatenated, and also often minified).

Just be explicit that you're creating a property of the window object. Change

_randomGenerator = new RandomNumberGenerator();

to

window._randomGenerator = new RandomNumberGenerator();

This explicit declaration is mandatory in strict mode .

Answer 3

Whilst you can modularize your code like that, you are still potentially introducing a large number of global variables. You are using a defensive strategy, by adding the _ prefix, but it's still safer not to have them there at all.

You only actually need one for a module pattern. So long as your first file has something like this:

window.module = {};

Then the rest of your modules, can just register themselves as properties on the module object, without having to contort their names.

module.randomNumberGenerator = new RandomNumberGenerator();

function RandomNumberGenerator() {
  ...
}    

Then in any another file you can use that instance.

var rng = module.randomNumberGenerator;
// ...
var number = rng.getRandomNumber();

Answer 4

That works, but it's overly complicated unless you have some data declared that you need to put in the scope to keep it isolated.

For your example, you can just create the object directly, instead of having a constructor to create just a single instance:

// File : RandomNumberGenerator.js

_randomGenerator = {

    getRandomNumber: function(rangeLower, rangeHigher) {
        if(rangeLower !== undefined && rangeHigher === undefined) { // user passed in just one parameter
            rangeHigher = rangeLower;
            rangeLower = 0;
        }else if (rangeLower === undefined && rangeHigher === undefined) {
            return (Math.random());
        }

        return (Math.floor((Math.random() * (rangeHigher - rangeLower)) + rangeLower));
    }

}

If you have a class, you still don't need to wrap it in a scope if you don't have any static data for it:

function SomeClass() {
  // ...
}

SomeClass.prototype.someMethod = function(){
  // ...
}

You would use a scope if you have some static data for classes, for example to keep track of all instances:

var SomeClass = (function(){

  var instances = [];

  function SomeClass() {
    instances.push(this);
  }

  SomeClass.prototype.getAllInstances = function(){
    return instances;
  }

  // expose the constructor
  return SomeClass;

})();