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_ibm
May 16 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 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/10/09 PHP
PHP个人网站架设连环讲(四)
2006/10/09 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
Vue精简版风格概述
2018/01/30 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
深入浅析Python的类
2018/06/22 Python
python怎么对数字进行过滤
2020/07/05 Python
python Tornado框架的使用示例
2020/10/19 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
自我评价是什么
2014/01/04 职场文书
关于读书的演讲稿
2014/05/07 职场文书
幸福终点站观后感
2015/06/04 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
ant design charts 获取后端接口数据展示
2022/05/25 Javascript