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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
javascript下function声明一些小结
Dec 28 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
Bootstrap插件全集
Jul 18 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP在线书签系统分享
2016/01/04 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
介绍Python中的__future__模块
2015/04/27 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
文案策划求职信
2014/04/14 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
北京英文导游词
2015/02/12 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书