JavaScript 设计模式需要帮助:模块的松散扩充



为清楚起见编辑 - @Qantas94Heavy - 我明白它在"说"或应该做什么,我不明白的是为什么,更重要的是它是如何工作的:

我正在阅读有关JS模块模式的高级教程,它给出了这个示例:

var MODULE = (function (my) {
// add capabilities...
return my;
}(MODULE || {}));

困扰我的事情(我需要你的帮助(是最后一句话:

(MODULE || {}));

我很难理解这背后的语法规则,使之成为可能。 在搜索了一些关键字,"JavaScript模块语法"和"模块模式简写"之后,我发现我仍然不太了解这背后的基础。

有人可以解释或指出我正确的方向来摸索/获得更深入的理解吗?

真诚地gggi<</p>

div class="one_answers">
(function(){
})();

是一个自调用匿名函数。在您的情况下,它处理"my"对象参数:它对"my"执行某些操作,然后将其返回。

在您的情况下,函数收到的"my"参数是"(模块||{})".

&&

&和||运算符称为短路运算符。 如果存在"MODULE"对象,则返回"MODULE"对象,否则将创建一个空对象在函数内部使用。该函数将对该对象执行任何操作,该对象将成为返回的"MODULE"对象。

它通过创建闭包来工作:只要 MODULE 存在(它不是垃圾回收(,自调用匿名函数及其在分配时的状态也是如此。这使得添加的任何功能都是持久的。

右侧称为即时函数。为了理解它是如何工作的,让我们稍微分解一下:

  1. (...)()我们可以按名称调用函数,即 f() .但是,我们可以放置任何解析为函数类型变量的表达式,而不是函数名称。在我们的例子中,第一组括号只包含一个表达式。第二组是函数调用运算符。最终,(f)()完全等同于f()

  2. 第二步是在第一个括号集中提供一个匿名函数。其结果是 :(function(){})() 。匿名函数完全是函数类型。这会导致在同一语句中创建、执行和丢弃所有函数。

  3. 第二组括号是函数调用运算符,可以接受其中的参数,在我们的例子中是MODULE || {}。这个表达式的意思是:如果定义了MODULE,则使用它,否则,创建一个新的空表达式。

  4. 该参数作为名为 my 的参数传递给匿名函数,匿名函数返回 um、my 。这会导致匿名函数的计算结果为 my 并且实际上:(my)(MODULE || {})

  5. 效果是MODULE自包含的,并且不会导致与外部变量的名称冲突。同时,它可以访问外部变量。

我希望这能清除它:)

很少,特别是对于大型项目,我们将把所有代码放在一个文件中,起初很容易将代码放在不同的文件中,并按特定顺序将它们粉碎在一起,但是这很快就会变得难以管理,使用称为"丢失增强"的未知模式,我们实际上可以利用 JavaScript 异步运行时环境。

为了实现此模式,我们将使用一小段逻辑。 我们要说如果 awesomeNewModule 存在,然后导入它,否则 awesomeNewModule 只是新对象:

    var awesomeNewModule = (function(){
        var exports={
            foo:5,
            bar:10
        };
        exports.helloMars = function(){
            console.log("Hello Mars!");
        };
        exports.goodbye = function(){
            console.log("Goodbye!");
        }
        return exports;
    }(awesomeNewModule || {}));

在这里,由于我们使用 exports 关键字,我们将说 awesomeNewModule 是函数中的导出,现在所有这些导出值 {foo:5, bar:10} 要么被分配给空对象 {},如果这是第一个文件,或者如果这个文件是在模块创建后加载的,将被分配并扩展 awesomeNewModule。

var awesomeNewModule = (function(exports){
    var exports={
        foo:5,
        bar:10
    };
    exports.helloMars = function(){
        console.log("Hello Mars!");
    };
    exports.goodbye = function(){
        console.log("Goodbye!");
    }
    return exports;
}(awesomeNewModule || {}));

要记住的重要事情之一是,如果awesomeNewModule已经存在,那么您应该确保awesomeNewModule中不存在这些键{foo:5,bar:10},并且没有这些方法:export.helloMars,export.goodbye 如果是这样,则最后加载的任何文件都将覆盖在以前的文件中命名相同的任何方法或值。

出于这个原因,你不能在模块之间共享值,如果一个模块的任何方面依赖于另一个模块,那么你就不能安全地依赖这些值,但归根结底,编写模块或代码的全部意义在于你将你的应用程序分成不相互依赖的部分, 这样,如果一个模块向应用程序引入了中断性错误,则不会影响代码的匆忙。 此外,还有一些方法可以保护卡,以确保一个模块不会覆盖从另一个模块创建的模式或方法。

来源:Treehouse Workshop 关于 JavaScript 中模块模式的基础知识

最新更新