我们每个网页的Javascript文件中的这些代码行在做什么

What are these lines of code that are in every one of our web pages' Javascript files doing?

本文关键字：代码 什么 网页 Javascript 文件 我们      更新时间：2023-09-26

我刚刚开始的项目的所有 JS 文件都以以下行开头和结尾，谁能告诉我这里发生了什么？我认为这与OOP Javascript有关，但我不确定。

(function(pageName, $, undefined) {
    // Page logic
}(window.pageName = window.pageName || {}, jQuery));

这是定义一个作用域函数，并立即使用一些参数调用它。作用域函数的目的主要是包含其中的内容，以避免创建全局变量。

因此，让我们看一下它传递的参数：

window.pageName = window.pageName || {}

这将传递现有的 window.pageName 属性（如果它有一个 truthy* 值），或者一个新的对象 （ {} 如果它没有，使用 JavaScript 非常强大的 || 运算符，如果该操作数是真数，则会导致它的左操作数，如果不是，则会导致它的右操作数。因此，在范围限定函数中，pageName将始终是真实的（并且可能是一个对象）。

jQuery

这是 jQuery 的非$变量。有时你需要使用 jQuery 的noConflict模式（释放全局$）来与其他库集成。因此，这样做可以让您在范围函数中使用$，知道它将等于jQuery，即使范围函数之外的$不是。

现在关于第三个undefined：请注意，它实际上从未传递过参数来匹配该命名参数。这意味着undefined参数的值将是值undefined。这基本上确保了作用域函数中undefined符号确实具有undefined的值（因为在 ES5 [~2009] 之前，您可以用其他值覆盖它！

* "truthy

" - 在 JavaScript 中，如果值在用作布尔值时强制true，则该值为"truthy"。真值是不是"假"的值（奎尔惊喜！假值是0、NaN、null、undefined、""，当然还有false。

它是使用存储在window.pageName中的自定义对象的代码。当对象已实例化时，将传入该对象。如果对象不存在，则传入一个新对象。它还关闭了jQuery，并确保没有人更改undefined的定义。

这是正在发生的事情。

首先 - 创建一个接受三个参数（pageName、$ 和未定义）的匿名函数（或 IIFE）

(function(pageName, $, undefined) {...

调用函数时，传入 window.pageName（除非它是 null 或未定义的，然后传入一个空对象）作为第一个参数，然后传入 jQuery 作为第二个参数。 第三个参数不是故意传入的，用于在未定义的函数中声明局部变量。

...}(window.pageName = window.pageName || {}, jQuery));

因此，window.pageName成为局部变量pageName，jQuery成为局部变量$，undefined是一个作为快捷方式存在的变量，因此您不必在整个函数中检查typeof someVariable === 'undefined'。 相反，您现在可以执行类似 someVariable === undefined 的检查。

所有这些都是在没有弄乱全局空间的情况下完成的，这就是为什么您在正在处理的代码中看到它的原因。 我希望这有助于为您澄清它。

您可能应该阅读更多关于立即调用的函数表达式（IIFE）或（当我学习时如何称呼它 - 自执行匿名函数）。 关于这个主题有很多资源。

相关文章：