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

Question

我真的不喜欢我所有的 javascript 代码都只放在一个文件中，我尝试使用像 require.js 这样的库来帮助我模块化，但它们对我来说最终变得有点复杂。所以我想知道我是否可以做这样的事情。

上下文:假设我想要一个不同的模块来处理随机数生成。我创建一个新文件(首字母大写是我自己制定的约定)

// 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));
    };
})();

现在 _randomGenerator 对全局范围可见。我再次添加“_”作为自制约定。

现在我可以在我的主 js 文件中使用它，例如

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

我可以这样做吗？有什么我忽略的东西从长远来看会导致问题吗？这样做是否有可能污染全局范围？

Answer 1

您描述的是 Immediately invoked function expression模块模式。

要导出函数和对象，您需要将它们附加到全局 window 对象，通常建议您将它们放在命名空间下以避免与其他代码冲突:

(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();
})();

您还可以将值导入 IIFE，这允许您创建别名:

(function(rng, max) {

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

})(MyModule.defaultRandomNumberGenerator, 5);

我可以这样做吗？

是

有什么我忽略的东西从长远来看会导致问题吗？

不要让您的 IIFE 变得太大，否则您将失去优势。定义明确的小模块更易于维护。

此外，如果您希望两个模块共享同一个命名空间，您需要做一些比我上面的示例更详细的事情，否则一个模块将覆盖另一个。

IIFE 可以保存状态但它们实际上是单例，请尽量确保您创建对象并将任何状态放入其中以避免 global state .

这样做是否有可能污染全局范围？

是的，这是可能的；你仍然应该小心命名你的命名空间——例如不要使用 window.jQuery!