编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护。

在编写jQuery插件的时候,我们一般会遵循一些约定:

  • jQuery插件推荐命名为:jquery.插件名.js。
  • 所有对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上。
  • 在插件内部,this指向的是当前通过选择器获取的jQuery对象;而一般的方法如click()方法,内部的this指向的是DOM元素。
  • 所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现问题,甚至可以在插件头部先加上一个分号,以免他人的不规范代码给插件带来影响。
  • 插件应该返回一个jQuery对象,以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量,例如字符串或者数组等。
  • 为了避免冲突,避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示。当然,也可以利用闭包技术来回避这个问题,使插件内部继续使用$作为jQuery的别名。

闭包:当内部函数在包含它们的外部函数之外被调用的时候,就会形成闭包,即内部函数会在外部函数返回后执行。

function a(){
var i = 0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();

以上代码中,当函数a的内部函数b被函数a外的一个变量c引用的时候,就创建了一个我们通常所谓的“闭包”。

另外,还可以通过匿名函数创建闭包(一个函数是不是匿名函数和是不是闭包并没有直接关系):

var JSON = JSON || {};
(
function(){
var f = function(n){
for(var i=0;i<n;i++){
alert(i);
}
};
JSON.f=f;
})();
JSON.f(1);

内部函数:函数定义和函数表达式位于另一个函数的函数体内,并且这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。

闭包的作用:1、保护函数内的变量安全;2、在内存中维持一个变量(javascript垃圾回收机制)。

利用闭包的特性,我们可以在既避免内部临时变量影响全局空间,又可以在插件内部使用$符号作为jQuery的别名。常见的jQuery插件都是以下这种形式:

(function(){
/*编写代码*/
})();

首先定义一个匿名函数function(){/*编写代码*/},然后用括号括起来,最后通过()这个运算符来执行。可以传递参数进去,以供内部函数使用。

//为了更好的兼容性,开始前有个分号
;(function($){ //此处将$作为匿名函数的形参
/*编写代码,可以使用$作为jQuery的别名*/
})(jQuery); //将jQuery作为实参传递给匿名函数

编写jQuery插件(一)——插件约定及插件中的闭包的更多相关文章

  1. 如何编写jQuery插件

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  2. 编写jquery常用插件的基本格式

    写jquery插件需要明白的那些知识点 1.jquery中$是神马?$.fn又是神马? 稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知: 我们在jquery(1. ...

  3. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  4. 编写JQuery插件-3

    该了解我们也知道的差不多了,接下来编写我们第一个jq插件吧 封装对象方法的插件 我们编写一个设置和获取颜色的插件,我们需要实现两个功能 1.设置匹配元素的颜色 2.获取匹配元素(元素集合的第一个)的颜 ...

  5. 如何编写JQuery 插件详解

    转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq ...

  6. 编写jQuery 插件

    编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 r ...

  7. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

  8. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  9. 编写jQuery插件的方法和注意点

    编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的 ...

随机推荐

  1. 【转】每天一个linux命令(43):killall命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/21/2827366.html Linux系统中的killall命令用于杀死指定名字的进程(kill ...

  2. Java HashMap原理

    HashMap存储结构 HashMap中数据的存储是由数组与链表一起实现的 数组寻址非常容易,其时间复杂度为O(1),但是当要插入或删除数据时,时间复杂度就会变为O(n).链表插入和删除操作的内存复杂 ...

  3. Mac 下安装python3.7 + pip 利用 chrome + chromedriver + selenium 自动打开网页并自动点击访问指定页面

    1.安装python3.7https://www.python.org/downloads/release/python-370/选择了这个版本,直接默认下一步 2.安装pipcurl https:/ ...

  4. JS怎么把字符串数组转换成整型数组

    今天在学习highcharts时,遇到了一个把字符串数组转换为整形数组的问题,拿在这里讨论一下: 比如有一个字符串: var dataStr="1,2,3,4,5"; 现在需要把它 ...

  5. ES(1): Creat linux VM on Azure

    本章记录在ES集群之前的环境准备工作,主要包含的内容如下: 目录: 创建linux虚拟机 启用root用户 创建linux虚拟机 首先创建一个云服务 按向导创建云服务名称,如下 创建虚拟机, 第二步: ...

  6. eclipse中的XML文件无法快捷键注释问题

    好多朋友都发现在ME6.0或跟高版本中“Ctrl+Shift+c”或者是“Ctrl+Shift+/”快捷键无论你怎么点,它就是不起作用,恼火吧? 百度 还是 google 都没有找到 合理的说法,更有 ...

  7. android自定义tabhost,tabcontent用intent获得

    地址:http://my.oschina.net/aowu/blog/36282 自己改的自定义tabhost组建,效果图如左.有更好的朋友可以相互交流一下,嘿嘿. 1.先上AndroidManife ...

  8. [转]SendKeys.Send 方法

    SendKeys.Send 方法 向活动应用程序发送击键. 转载自: https://msdn.microsoft.com/zh-cn/library/system.windows.forms.sen ...

  9. XStream和Dom4j的区别

    对于搞技术的人来说,xml文件的处理应该并不陌生吧,先总述下,个人感觉XStream在处理XML文件和JavaBean对象互转时比较好,dom4j对常用的xml配置文件操作比较好点:首先,Dom4j ...

  10. php 七种数据类型介绍

    PHP有7个数据类型.七个类型: 字符串, 整数, 浮动, 布尔, 数组, 对象, 资源. 字符串 字符串保持字符,如“一”.“abc”,“www.manongjc.com”等.PHP字符串是区分大小 ...