我开始一个项目与jQuery。
在你的jQuery项目中有哪些陷阱/错误/误解/滥用/误用?
我开始一个项目与jQuery。
在你的jQuery项目中有哪些陷阱/错误/误解/滥用/误用?
当前回答
不要滥用插件。
大多数情况下,您只需要库和用户界面。如果你保持简单,你的代码在长期运行中是可维护的。并不是所有插件都得到支持和维护,实际上大多数插件都不是。如果你可以使用核心元素模拟功能,我强烈推荐你这么做。
插件很容易插入到代码中,为您节省了一些时间,但是当您需要额外的东西时,修改它们是一个坏主意,因为您失去了可能的更新。您在开始时节省的时间将在稍后更改已弃用插件时浪费掉。
明智地选择您使用的插件。 除了库和用户界面,我经常使用$。Cookie, $。形式,美元。验证和thickbox。至于其余部分,我主要开发自己的插件。
其他回答
总是缓存$(this)到一个有意义的变量 特别是在.each()中
像这样
$(selector).each(function () {
var eachOf_X_loop = $(this);
})
缺陷:使用循环而不是选择器。
如果你发现自己在寻找jQuery '。每个方法迭代DOM元素,问问自己是否可以使用选择器来获取元素。
关于jQuery选择器的更多信息: http://docs.jquery.com/Selectors
缺点:没有使用Firebug这样的工具
Firebug实际上就是为这种调试而设计的。如果您打算在DOM中使用Javascript,则需要像Firebug这样的好工具来提供可见性。
有关Firebug的更多信息: http://getfirebug.com/
其他很棒的想法都在这一期的多态播客中: (jQuery秘密与戴夫沃德) http://polymorphicpodcast.com/shows/jquery/
避免滥用文件准备。 保持文档仅为初始化代码准备。 始终在文档外部提取函数,以便它们可以被重用。
我在doc ready语句中看到了数百行代码。丑陋,不可读,不可能维护。
用回调“链接”动画事件。
假设你想让一个段落在点击后消失。您还希望随后从DOM中删除该元素。你可能认为你可以简单地链接这些方法:
$("p").click(function(e) {
$(this).fadeOut("slow").remove();
});
在这个例子中,.remove()将在. fadeout()完成之前被调用,破坏渐变效果,只是让元素立即消失。相反,当你想在完成前一个命令后才触发一个命令时,使用回调函数:
$("p").click(function(e){
$(this).fadeOut("slow", function(){
$(this).remove();
});
});
. fadeout()的第二个参数是一个匿名函数,它将在. fadeout()动画完成后运行。这使得逐渐褪色,并随后删除元素。
误解在正确的上下文中使用此标识符。例如:
$( "#first_element").click( function( event)
{
$(this).method( ); //referring to first_element
$(".listOfElements").each( function()
{
$(this).someMethod( ); // here 'this' is not referring first_element anymore.
})
});
这里有一个解决方法的例子:
$( "#first_element").click( function( event)
{
$(this).method( ); //referring to first_element
var $that = this;
$(".listOfElements").each( function()
{
$that.someMethod( ); // here 'that' is referring to first_element still.
})
});