`
hongtoushizi
  • 浏览: 378887 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

Signs of a poorly written jQuery plugin

阅读更多

转载: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

    signs_of_the_stars

    Signs of High and Low EQ.pdf

    情绪智力(EQ,Emotional Quotient)是指个体识别、理解、管理自我及他人情绪的能力。高情绪智力的人通常在人际交往和自我管理方面表现出色,而低情绪智力的人则可能在这方面遇到困难。以下是根据提供的内容对高情绪...

    精品ppt模板PPT素材signs_of_the_stars025

    精品ppt模板PPT素材signs_of_the_stars025

    英文原版-MR Imaging of the Abdomen and Pelvis 1st Edition

    ...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

    国外的数学标记和符号Abroad, signs and symbols of mathematics

    OSLOEDU646正版免费软件

    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 ...

    【德意志银行-2024研报-】Asia Macro Strategy Notes India – Signs of.pdf

    行业研究报告

    [CrackBerry True Tales of BlackBerry Use and Abuse][part.1]

    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 ...

    [CrackBerry True Tales of BlackBerry Use and Abuse][part.2]

    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_

    标题“Traffic_signs_EPS_EPS_signs_trafficsign_”暗示了这个压缩包包含与交通标志相关的EPS(Encapsulated PostScript)文件。EPS是一种图形文件格式,常用于存储矢量图形,这意味着无论放大多少倍,图像都能保持...

    Signs

    标题“Signs”暗示我们可能讨论的是一种字体或者与标识、符号相关的设计元素。在IT领域,字体扮演着至关重要的角色,特别是在用户界面设计、网页设计、图形设计以及电子出版等领域。字体不仅传达信息,还影响着用户...

    A Unit1 Star signs基础知识测试题及答案2精选.doc

    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

    标题中的"Traffic Signs Dataset in YOLO format.zip"指出这是一个基于YOLO(You Only Look Once)框架的交通标志数据集。YOLO是一种实时目标检测系统,尤其适合处理图像中的多个对象,如本例中的交通标志。这个数据...

    Unity Sinuous Sci-Fi Signs (SSFS)控制代码

    在给定的“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

    Sinuous+Sci-Fi+Signs+1.5

    8Signs Firewall + 破解汉化 经典的服务器防火墙

    8Signs Firewall 是一款简单易用的软件网络防火墙,使用它,可以帮助你限制非法的网络连接访问本地资源,或者也可以帮助你限制本地电脑访问网络中的不良资源!

    trafic-signs-recognition.tar.gz

    本文将深入探讨一个名为“trafic-signs-recognition”的项目,该项目利用Keras这一强大的深度学习框架,构建了一个深度神经网络模型,该模型在测试集上实现了99%的高准确率,用于识别各类交通标志。 一、Keras深度...

Global site tag (gtag.js) - Google Analytics