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动画效果类封装代码
Aug 28 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 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命名空间设计思想、用法与缺点分析
2019/07/17 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
js实现搜索栏效果
2018/11/16 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python正则表达式和元字符详解
2018/11/29 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python机器学习库xgboost的使用
2020/01/20 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
软件测试常见笔试题
2012/02/04 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
联谊活动策划书
2014/01/26 职场文书
史上最牛的辞职信
2015/02/28 职场文书
参加招聘会后的感想
2015/08/10 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
5道关于python基础 while循环练习题
2021/11/27 Python