jQuery创建插件的代码分析


Posted in Javascript onApril 14, 2011

创建jQuery插件,基本的格式是上面这段代码:

(function ($) 
{ 
//add code here 
})(jQuery)

我们怎么理解?
第一步:function ($){}定义了一个匿名的函数,有一个参数,$是参数名,和其他的参数名没什么区别。
第二步:(function ($){})(jQuery)
我们要执行一个匿名函数的时候,通常用var func = function ($) { },然后func(参数)这样的形式。这里func就是一个Function对象。但更简洁的(function ($) {}),这时用括号,也同样返回括号的内容,也是一个function对象。我们再执行就可以了:(function ($) {})(jQuery)
第三步:这时我们实际上是执行上面定义的匿名函数,执行的时候为该匿名函数提供一个参数值:jQuery。
第四步:所以最终上面的表达等价于:
var func = function($) { };
func(jQuery);
即定义匿名函数,并以jQuery为参数执行一次。

这里的作用是什么呢?
1、解决$符号冲突问题
jQuery中我们用$来代替jQuery,这是为了简化写法。但$这个符号有时候会冲突。
在上面匿名函数的代码中,我们可以习惯性的用$来写,但执行的时候会用jQuery来代替,这就避免了变量的冲突。
2、解决闭包问题:
一般直接写在脚本里的函数,执行后其中未销毁的变量是继续存在,并能够正常访问的。这个和我们一向理解的函数私有变量是不符的。
但我们用这种方式,将需要的所有函数都包在这个匿名函数里,则其中的局部变量,在外部将不能访问,变相的起到了创建私有的局部变量的作用。只有this.开头的那些成员,才是插件外部可以访问的。

Javascript 相关文章推荐
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 #Javascript
jquery中eq和get的区别与使用方法
Apr 14 #Javascript
基于jquery的blockui插件显示弹出层
Apr 14 #Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 #Javascript
让textarea自动调整大小的js代码
Apr 12 #Javascript
javascript算法学习(直接插入排序)
Apr 12 #Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 #Javascript
You might like
PHP4实际应用经验篇(2)
2006/10/09 PHP
WAF的正确bypass
2017/01/05 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
详解python logging日志传输
2020/07/01 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
优秀中专生推荐信
2013/11/17 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
《实心球》教学反思
2016/02/23 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
二年级作文之动物作文
2019/11/13 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python