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扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
vue实现列表垂直无缝滚动
Apr 08 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
Oracle 常见问题解答
2006/10/09 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
Python struct.unpack
2008/09/06 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python之pandas用法大全
2018/03/13 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python K近邻算法的kd树实现
2018/09/06 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
初二学习计划书范文
2014/04/27 职场文书
本科应届生求职信
2014/08/05 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
写给领导的感谢信
2015/01/22 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python