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 load Page,load css,load js实现代码
Mar 31 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
js实现数组转换成json
Jun 26 Javascript
Angular实现form自动布局
Jan 28 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
你准备好迎接vue3.0了吗
Apr 28 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
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
jQuery 技巧小结
2010/04/02 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python中random模块用法实例分析
2015/05/19 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python ATM功能实现代码实例
2020/03/19 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
python利用faker库批量生成测试数据
2020/10/15 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
python 将Excel转Word的示例
2021/03/02 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
销售员求职个人的自我评价
2014/02/19 职场文书
超市开学活动方案
2014/03/01 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
安全生产专项整治方案
2014/05/06 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
黄山导游词
2015/01/31 职场文书
楚门的世界观后感
2015/06/03 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
python实现学生信息管理系统(面向对象)
2022/06/05 Python