JavaScript 模块使用

Question

我刚刚开始使用 javascript 模块，我想确保我做得正确。

下面是我所遵循的方法的示例，基于我读过的“松散增强模式”here

    //myApp.js
    var myApp = {};


    //someModule1.js
    (function (ma) {
        ma.someModule1.DoStuff = function () {
            alert("hi");
        };
        return ma;
    }(myApp || {}));


    //someModule2.js
    (function (ma) {
        ma.someModule2.DoMoreStuff = function () {
            alert("ho");
        };
        return ma;
    }(myApp || {}));


    //someModule3.js
    myApp.someModule1.DoStuff();
    myApp.someModule2.DoMoreStuff();

myApp.js 中的 myApp 变量将是唯一全局公开的变量，所有其他模块及其函数只能通过此变量访问。

someModule3.js 不一定是一个模块，而是任何想要访问 myApp 对象属性的任意 javascript(在定义了适当的模块之后)。

我不是 100% 清楚的部分是:(myApp || {}, jQuery)这部分叫什么？它到底在做什么(我知道整个事情是一个闭包，但我只是不明白最后一部分是如何工作的)？看起来“ma”最初什么都没有，我在闭包主体中向它添加了一个函数，然后返回ma。此时myApp只有一个功能。

在最后的部分(myApp || {})中，它实际上是在说“ma 并不是什么都不是，它实际上被称为 myApp，如果该对象存在，我会将这些函数附加到该对象。”

这是对的还是我离题太远了？

Answer 1

我看到四个问题:

1. 您的代码将无法按原样运行。您必须先定义.someModule1，然后才能分配给它。

2. 没有理由return ma，因为您没有使用返回值。

3. 没有理由通过 myApp || {} 因为如果 myApp 未定义，那么您的代码将不会执行任何操作，因为您创建的对象不会被任何变量捕获，并且只会立即被垃圾回收并且无法访问。

4. 正如您所展示的代码一样，您封装代码的 IIFE 除了增加代码行和复杂性之外没有完成任何其他任务。

以下是每个问题的更多详细信息。

您的模块不会按原样运行。您需要通过更改此值来定义 .someModule1 ，并且您的代码中没有理由传递 myApp || {}:

//someModule1.js
(function (ma) {
    ma.someModule1.DoStuff = function () {
        alert("hi");
    };
    return ma;
}(myApp || {}));

对此:

//someModule1.js
(function (ma) {
    // you must define .someModule1 before you can assign properties to it
    ma.someModule1 = {};
    ma.someModule1.DoStuff = function () {
        alert("hi");
    };
    return ma;
}(myApp));

也没有理由在代码中执行return ma，因为您没有使用返回值。

原因myApp || {} 在这里没有任何值(value)，因为如果 myApp 未定义，那么模块中的任何代码都不会执行任何有用的操作，因为您要分配内容的底层对象不会被捕获在任何地方的变量中。因此，如果 myApp 未定义，那么您的代码将不会完成任何任务。因此，根据定义，必须已经定义 myApp 才能使您的代码有用，因此，您只需将 myApp 传递到 IIFE 即可。

<小时/>

正如您所显示的代码，将属性分配放入 IIFE 中没有任何好处或理由。您没有任何闭包变量或 IIFE 内的任何私有(private)内容。因此，您将获得完全相同的结果:

myApp.someModule1 = {};
myApp.someModule1.DoStuff = function () {
    alert("hi");
};

使用 IIFE 有一些原因，但在此代码示例中没有显示任何原因。就我个人而言，我喜欢使用最简单的代码来实现您的目标，而不是仅仅为了它而增加额外的复杂性。其他人喜欢将所有代码放入这些 IIFE 模块中。当确实有理由将代码放入 IIFE 中时，我只会将代码放入 IIFE 中。