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 相关文章推荐
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
webpack优化的深入理解
Dec 10 Javascript
js实现简单页面全屏
Sep 17 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
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
php中count获取多维数组长度的方法
2014/11/03 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
javascript中clone对象详解
2014/12/03 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python写入中英文字符串到文件的方法
2015/05/06 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python实现翻译word表格小程序
2020/02/27 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
国际会计专业求职信
2014/08/04 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
员工年度工作总结2015
2015/05/18 职场文书
病假条格式范文
2015/08/17 职场文书