jQuery 开发者应该注意的9个错误

引入jQuery的方式错误

错误的方式如下：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

在上述代码的例子中，我们通过引入了互联网上的jquery库来使用它。这种方式是错误的，因为该方法会在页面被打开的时候立即下载 jQuery 代码。因此，如果访问者的网络较慢，也可能会因为等待jQuery库的下载时间而导致页面加载时间过长。

正确的方式是将jQuery下载到本地，然后将其包含在您的项目中。如下所示：

<script src="js/jquery-3.5.1.min.js"></script>

在上面的例子中，我们将jQuery库文件存放在本地项目的 js 文件夹中，并在我们的 HTML 文件中包含了它。这种方法允许在访问者观看您的网页之前加载jQuery库。这可以显着缩短加载时间，减少页面请求。

不合适的 CSS 选择器

为了使用 jQuery 来选择元素，我们使用类似于 CSS 选择器的语法来选择 DOM 元素 。如果您不使用正确的 DOM 元素选择器，可能会选择错误的元素或通过想象得到的选择器无法选择任何元素。

示例：

<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
  });
});
</script>

在上面的代码中，我们想在单击按钮时使 div1 消失。但是我们没有 #div1 的选择器。这个代码虽然会在测试和开发期间运行，但是当项目变得复杂时，就有可能会导致选择器错误。

正确的做法是具体给出唯一元素的选择器，如下所示：

<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div#div1").fadeOut();
  });
}); 
</script>

在上面的代码中，我们使用了 $（“div＃div1”）选择器，它具有更精确的元素选择机制，接下来的步骤就是使 div1 消失。

没有优化性能

使用 jQuery 的开发人员，在实际编写代码时需要避免降低性能的问题。在 jQuery 中，性能是很重要的，因为它的操作会涉及到对 DOM 的许多查询、操作、插入或删除。因此，我们必须遵循最佳实践，以避免任何可能的性能问题。

优化 jQuery 性能的建议：

• 缓存选择器的结果。这样，当我们需要在 DOM 中进行多次操作时，我们可以避免重复查询相同的元素。
• 合并 JavaScript 和 CSS 文件。这样可以减少文件请求次数，增加页面加载速度。
• 避免使用复杂的选择器。更精确的选择器可以将代码时度保持在较低的水平。

改变全局 $ 或 jQuery 变量

很多开发者经常犯的一个错误是改变了$或jQuery变量，这个变量在使用jQuery库时十分重要。通过修改它，我们可能会影响其他插件或脚本的运行。

例如，在代码中定义了一个新的 $ 变量，它将与 jQuery 的变量冲突：

<script src="js/jquery-3.5.1.min.js"></script>
<script>
var $ = "I am a string";
</script>

在上面的例子中，我们将$定义为一个字符串。这将导致访问 $（“选择器”）时出现错误，因为它不再指向 jQuery 对象。

不需要使用 jQuery 的特定函数

jQuery 库非常强大，它提供了很多函数来简化开发人员的工作。但是，这并不意味着你需要在所有情况下都使用 jQuery，有时原生 JavaScript 更适合你的目的。

例如，在下面的代码段中，我们使用 jQuery 的 on() 函数监听点击事件：

<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $("p").on("click", function(){
    $(this).hide();
  });
});
</script>

在这里，我们可以使用原生 JavaScript 的 addEventListener() 函数来完成相同的操作：

<script>
document.querySelector("p").addEventListener("click", function(){
  this.style.display = "none";
});
</script>

在上述代码中，我们使用了原生 JavaScript 的addEventListener()方法来监听单击事件。这比通过使用 jQuery on() 函数来监听事件要高效得多。

遗漏错误处理程序

jQuery 函数可以通过 jQuery 对象来链接调用，在调用链条上一旦发生了错误，可能会导致程序崩溃。例如，下面的例子中，当 “#myDiv” 不存在时会导致访问 null 的属性出现错误。

<script src="js/jquery-3.5.1.min.js"></script>
<script>
$("#myDiv").hide().slideDown("slow");
</script>

为了避免空指针异常或其他错误，我们应该采取一些措施在开发中增加容错处理程序。例如，下面的示例可以处理语法错误：

<script>
if($("#myDiv").length > 0){
    $("#myDiv").hide().slideDown("slow");
} else {
    console.log("myDiv not found");
}  
</script>

在上述代码中，我们使用了 if 语句检查ID的myDiv是否存在。如果存在该元素，我们进行滑动动画，否则将向控制台输出错误信息。

在事件处理程序中未正确绑定this

在 jQuery 事件处理程序内部， this 关键字始终引用当前元素。这使得我们可以轻松访问要操作的元素。问题是，当我们使用函数传递事件处理程序时， this 可能会引用其他事物，而不是当前元素。

例如，在下面的代码段中，我们使用一个按钮的 click 事件来启动名为 showMessage() 的自定义方法：

<script src="js/jquery-3.5.1.min.js"></script>
<script>
function showMessage(){
  alert(this.innerHTML);
}
$("button").click(showMessage);
</script>

在上面的代码中，当“按钮”被单击时， showMessage() 被使用。而 showMessage() 中的 this 关键字引用了window对象，而不是按钮元素。

解决这个问题的方法是 jQuery 提供了一个proxy() 方法。它可以更好地替换特定函数的 this 关键词，在事件处理程序中调用指定的函数。下面是代码示例：

<script>
$("button").click($.proxy(showMessage, this));
</script>

在上述代码中，我们使用了 jQuery 的 proxy()方法来将 showMessage() 方法的 this 强制转换为当前元素。这使得我们能够正确地在 showMessage() 方法内部访问当前元素。

没有优化代码量

最小化代码量是一个好的编程习惯，特别是在 jQuery 的使用过程中。如果您没有合适地使用 jQuery，它将会产生冗余代码，尤其在处理大型网站时这个问题变得尤为严重。

其中一种方法是使用链式编程来避免重复代码。当你调用一个函数时，有许多 jQuery 函数将返回它们自己的 jQuery 对象，这样就可以继续链它们的操作。这将有助于最小化代码，如下所示：

<script src="js/jquery-3.5.1.min.js"></script>
<script>
$("#myDiv").addClass("error")
          .removeClass("success")
          .html("An error occurred.");
</script>

在上述代码中，我们使用了$("#myDiv") 来选择元素，然后调用 addClass()，removeClass() 和 html() 方法来添加、删除样式和内容。

忽略了属性前缀

许多 jQuery 函数可以使用对象来设置多个属性实现相同的效果。这是十分方便的，但有些开发人员可能会忽略需要带有前缀的属性。

例如，当使用 css() 方法更改样式时，我们会将属性名作为对象的参数传递：

<script src="js/jquery-3.5.1.min.js"></script>
<script>
$("p").css({
    "background-color": "yellow",
    "font-size": "200%"
});
</script>

在上述代码中，我们使用了$（“p”）选择器选择所有段落，然后调用css()方法来设置背景颜色和字体大小。我们注意到在设置“background-color”和“font-size”属性时，我们分别使用了“-”来连接单词。这是必要的，因为在 CSS 中需要前缀，否则可能会导致属性设置失败。

因此，jQuery 开发人员应该为使用对象设置属性而不是字符串时记住添加属性前缀。