我正在用 jQuery 开始一个项目。
您在 jQuery 项目中有哪些陷阱/错误/误解/滥用/误用？
要避免的 jQuery 陷阱
IT技术
javascript
jquery
2021-02-19 03:21:26
6个回答
不知道性能下降和过度使用选择器而不是将它们分配给局部变量。例如：-
$('#button').click(function() {
$('#label').method();
$('#label').method2();
$('#label').css('background-color', 'red');
});
而不是：-
$('#button').click(function() {
var $label = $('#label');
$label.method();
$label.method2();
$label.css('background-color', 'red');
});
或者甚至更好的链接：-
$('#button').click(function() {
$("#label").method().method2().css("background-color", "red");
});
当我意识到调用堆栈如何工作时，我发现这是一个启发性的时刻。
编辑：在评论中加入了建议。
了解如何使用上下文。通常，jQuery 选择器会搜索整个文档：
// This will search whole doc for elements with class myClass
$('.myClass');
但是您可以通过在上下文中搜索来加快速度：
var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);
不要使用裸类选择器，如下所示：
$('.button').click(function() { /* do something */ });
这将最终查看每个元素以查看它是否具有“按钮”类。
相反，您可以提供帮助，例如：
$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });
我去年从Rebecca Murphy 的博客中了解到这一点
更新- 这个答案是在 2 年前给出的，对于当前版本的 jQuery是不正确的。其中一个评论包括一个测试来证明这一点。还有一个更新版本的测试，其中包括本答案时的 jQuery 版本。
尝试拆分匿名函数，以便您可以重用它们。
//Avoid
$('#div').click( function(){
//do something
});
//Do do
function divClickFn (){
//do something
}
$('#div').click( divClickFn );
- 避免滥用文档就绪。
- 将文档准备好仅用于初始化代码。
- 总是在文档之外提取函数准备好以便它们可以被重用。
我在 doc ready 语句中看到了数百行代码。丑陋，不可读且无法维护。