转载:http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/
So far with every single workshop I’ve given, both for advanced JavaScript and jQuery for Designers, this question (or some variation thereof) has come up:
How do you know if the plugin is good to use?
It’s always dependant on the problem they’re trying to solve, but in lieu of a better jQuery plugin ranking system, here’s a couple of tips that should raise a red flag.
Consider the following:
$.fn.myplugin =function(){
var me = $(this).each(function(){
return $(this).bind('someEvent',function(){
// does something
});
});
return me;
};
Although the code may be perfect once some event has run, most times you don’t have time to read through all the code carefully and you need to make a decision so you can move on to the actual problem you’re trying to solve.
In the code above, there’s a number of red flags that have gone up for me, and I tend to look in this area of code first. If these patterns have been used, it tells me the author hasn’t quite grasped how jQuery works and hasn’t considered making simple tuning changes.
The inline return
$.fn.myplugin =function(){
var me = $(this).each(fn);
return me;
};
Should be written as:
$.fn.myplugin =function(){
return $(this).each(fn);
};
The me
variable isn’t being used again, so there’s no point in creating it.
Double jQuery
$.fn.myplugin =function(){
return $(this).each(fn);
};
Whilst within the context of the plugin code – i.e. within the function attached to .fn
, the keyword this
refers to the jQuery instance, not DOM elements.
If I were to rewrite this
to show you the value, you’d see:
$.fn.myplugin =function(){
return $($('div.foo')).each(fn);
};
So within the actual plugin (not jQuery callbacks), this
refers to jQuery, so we can access jQuery’s methods directly:
$.fn.myplugin =function(){
returnthis.each(fn);
};
Returning what to each?
$.fn.myplugin =function(){
returnthis.each(function(){
return $(this).bind('someEvent', fn);
});
};
jQuery’s each iterator simply loops, it doesn’t collect anything. The result variable is jQuery with the original collection inside it still – you can’t modify the collection by returning or not returning.
So return
isn’t required at all in this case:
$.fn.myplugin =function(){
returnthis.each(function(){
$(this).bind('someEvent', fn);
});
};
Wasteful use of each
$.fn.myplugin =function(){
returnthis.each(function(){
$(this).bind('someEvent', fn);
});
};
Hopefully by removing all the cruft from the starting version, this next step should be obvious. If not, here’s a clue:
- What’s returned from an
each
call? A jQuery collection. - What’s returned from a
bind
call? A jQuery collection.
Since we’re running the bind
on each
element, and only doing that, it means there’s no difference. So let’s throw away the each
call and just return the bind
:
$.fn.myplugin =function(){
returnthis.bind('someEvent', fn);
};
Remember that within the plugin, this
refers to the jQuery instance, and not the element, so we don’t need the wrapping $()
.
All better now, eh?
相关推荐
signs_of_the_stars
情绪智力(EQ,Emotional Quotient)是指个体识别、理解、管理自我及他人情绪的能力。高情绪智力的人通常在人际交往和自我管理方面表现出色,而低情绪智力的人则可能在这方面遇到困难。以下是根据提供的内容对高情绪...
精品ppt模板PPT素材signs_of_the_stars025
...The book can be used as a learning tool for residents and as a great reference for fellows and practicing radiologists" - The Bookshelf February 2011, Vipul Sharma, MD Presented by a team of ...
国外的数学标记和符号Abroad, signs and symbols of mathematics
signs of its origins in a teaching establishment. The flexibility of the user interface, the open source nature of much of the code, the CCL programming language which is very similar to C, and real ...
行业研究报告
It’s a must have if you own a BlackBerry, and maybe it’s the perfect gift for a friend who is showing signs of a BlackBerry addiction. What You'll Learn • Dozens of user stories that are just too ...
It’s a must have if you own a BlackBerry, and maybe it’s the perfect gift for a friend who is showing signs of a BlackBerry addiction. What You'll Learn • Dozens of user stories that are just too ...
标题“Traffic_signs_EPS_EPS_signs_trafficsign_”暗示了这个压缩包包含与交通标志相关的EPS(Encapsulated PostScript)文件。EPS是一种图形文件格式,常用于存储矢量图形,这意味着无论放大多少倍,图像都能保持...
标题“Signs”暗示我们可能讨论的是一种字体或者与标识、符号相关的设计元素。在IT领域,字体扮演着至关重要的角色,特别是在用户界面设计、网页设计、图形设计以及电子出版等领域。字体不仅传达信息,还影响着用户...
6. have a good sense of humour - 很有幽默感 7. hate to be like sb. - 不喜欢与别人一样 8. all kinds of different ideas - 各种各样的想法 9. show off - 炫耀 10. have problems with sth./doing sth. - 做某...
标题中的"Traffic Signs Dataset in YOLO format.zip"指出这是一个基于YOLO(You Only Look Once)框架的交通标志数据集。YOLO是一种实时目标检测系统,尤其适合处理图像中的多个对象,如本例中的交通标志。这个数据...
在给定的“Unity Sinuous Sci-Fi Signs (SSFS) 控制代码”中,我们主要关注的是如何在Unity环境中通过Animator或脚本来控制特定的动画效果。"Sinuous Sci-Fi Signs"可能指的是具有科幻风格的动态图形元素,这些元素...
any string derived from the grammar can be considered to be a sequence consisting of 11, 1001 and 0, and not prefixed with 0. the sum of this string is: sum = Σn (21 + 20) * 2 n + Σm (23 + 20) * 2m ...
Sinuous+Sci-Fi+Signs+1.5
8Signs Firewall 是一款简单易用的软件网络防火墙,使用它,可以帮助你限制非法的网络连接访问本地资源,或者也可以帮助你限制本地电脑访问网络中的不良资源!
本文将深入探讨一个名为“trafic-signs-recognition”的项目,该项目利用Keras这一强大的深度学习框架,构建了一个深度神经网络模型,该模型在测试集上实现了99%的高准确率,用于识别各类交通标志。 一、Keras深度...