Why does $($) crash my page?

在前端开发中，我们经常使用 jQuery 中的 $ 函数来选择和操作 DOM 元素。然而，当我们在代码中不小心添加了一个额外的括号时，就可能会导致页面崩溃。

问题描述

考虑下面这段代码：

$(document).ready(function() {
  // do something
}());

你可能已经注意到了，这里的 $(document).ready() 函数后面多了一对括号 ()。这个小小的错误会导致什么呢？

实际上，这个错误会导致页面崩溃。在浏览器的控制台中，你会看到类似于下面的报错信息：

Uncaught TypeError: $(...)(...) is not a function

问题分析

为什么会发生这个错误呢？原因在于 JavaScript 的自我执行函数表达式（IIFE）的语法。JavaScript 中的 IIFE 是一种常用的模块化编程技术，其语法如下：

(function() {
  // code goes here
})();

这个语法中有两个括号：一个括号包含了函数体，另一个括号将整个表达式变成了一个函数调用并立即执行了该函数。

如果我们将 $() 函数视为一个函数，那么当我们在 $() 函数后面再加上一对括号时，就相当于将 $() 函数作为一个参数传递给了另一个函数，这显然是不正确的。

解决方案

为了解决这个问题，我们只需要删除多余的括号即可：

$(document).ready(function() {
  // do something
});

这个代码就可以正常地执行了。

此外，还有一种更简洁的写法：

$(function() {
  // do something
});

这个代码实际上就是 $(document).ready() 方法的简写形式。这种写法更加简洁，也更容易阅读。

结论

在编写前端代码时，小小的语法错误也可能导致页面崩溃。因此，我们需要仔细检查代码，遵循良好的编程习惯，以确保代码的健壮性和可靠性。

同时，我们也可以通过阅读文档、参考示例代码等方式来学习和掌握前端开发中的最佳实践和技术。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29493