---恢复内容开始---

  在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及数据jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足形影的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有喝多专门收集jQuery插件的网站。利用jQuery产检确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速理解jQuery插件的开发原理以及掌握jQuery开发的基本技能。

  进行jQuery插件开发前,首先要知道两个问题:什么是jQuery插件?jQuery插件如何使用?

  第一个问题,jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题,也就知道第二个问题的答案了,jQuery插件的使用方式就是jQuery对象方法的调用。

  我们先看个例子:$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素,返回一个a元素的jQuery对象,这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢?其实jQuery内部定义了一个jQuery.fn对象,查看jQuery源码可以发现jQuery.fn=jQuery.prototype,也就是说jQuery.fn 对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的,然后jQuery对象就可以通过原型继承这些方法。

  基础版jQuery插件

  知道了上面的这些知识,我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色,就可以按下面的方式来实现这个插件:

$.fn.changStyle=function(colorStr){
this.css("color","colorStr);
}

  然后按下面的方式来使用插件:

  $("p").changeStyle("red");

  插件调用的时候,插件内部的this就是当前调用插件的jQuery对象,这样的话每个使用$()的方法选择的标签,在使用changeStye()插件时都会使用css()方法重设color样式。

  满足链式调用的jQuery插件

  链式调用是jQuery的一大特色,一个通用的插件应该遵循jQuery风格,满足链式调用要求。实现链式调用的方式也很简单:

$.fn.changStyle=function(colorStr){
this.css("color","colorStr);
return this;
}

  然后使用的时候就可以链式调用其他方法了:

  $("p").changeStyle("red").addClass("red-color");

  实现链式调用的关键点就一行代码return this,插件中加入了这行代码,那么在插件执行完之后,就会把当前的jQuery对象返回,然后就可以在插件方法后面继续调用其他方法;

  防止$符号污染的jQuery插件

  有很多js库都会使用$符号,虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权,但是如果定义插件的饿时候,使用$.fn 对象来定义的,那么这些插件使用的时候就会受到其他使用$变量的js库的影响。对于这种情况,我们协议使用立即执行函数通过传参的方式封装插件。形式如下:

(function($){
$.fn.changStyle=function(colorStr){
this.css("color","colorStr);
return this;
}
})(jQuery);

  因为使用了立即执行函数,所以此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。

  可以接受参数的jQuery插件

  继续上面的例子,假如我还想那个为这个插件添加一个设置标签元素内容文字大小的功能,那么我可以这么来实现:

(function($){
$.fn.changStyle=function(colorStr,fontSize){
this.css("color","colorStr).css("fontSize",fontSize+"px");
return this;
}
})(jQuery);

  上面这种插件传参方式适用于参数比较少的情况,如果需要传给插件内部的参数比较多,我们可以定义一个参数对象,然后把需要传给插件的参数放在参数对象中。插件定义时如下:

(function($){
$.fn.changeStyle=function(option){
this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");
return this;
}
})(jQuery);

  使用方式:$("p").changStyle({colorStr:"red",fontSize:14});

  把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值,例如:

(function($){
$.fun.changeStyle=function(option){
var defaultSetting={colorStr:"green",fontSize:12};
var setting=$.extend(defaultSetting,option);
this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
return this;
}
})(jQuery);

  上面的代码用到了$.extend方法,这个方法在这里的用法就是合并两个对象,即把后面一个对象的存在的属性值赋值给第一个对象,具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。

  这样定义的插件,我们在使用时如果不传fontSize,那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。

  使用方式:$("p").changeStyle({colorStr:"red"});

  注意:在为插件定义默认参数时,一定要把默认参数写在插件方法内部,这样默认参数的作用域就在插件内部。

  总结

  定义插件的方式除了上面说的用$.fn来定义,还有另外一种方式来定义插件,那就是使用$fn.extend方法。类似下面的写法:

(function($){
$.fn.extend({
changeStyle:function(option){
var defaultSetting={colorStr:"green",fontSize:12};
var setting=$.extend(defaultSetting,option);
this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px";
return this;
}
});
})(jQuery);

  PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能,通过阅读jQuery源码我们可以发现两个方法的本质区别,那就是$.extend方法是在jQuery全局对象上扩展方法,$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法,定义插件一般用$.fn.extend方法

  

掌握jQuery插件开发,这篇文章就够了的更多相关文章

  1. Vue开发入门看这篇文章就够了

    摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了 作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...

  2. 想让安卓app不再卡顿?看这篇文章就够了

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由likunhuang发表于云+社区专栏 实现背景 应用的使用流畅度,是衡量用户体验的重要标准之一.Android 由于机型配置和系统的 ...

  3. Python正则表达式,看完这篇文章就够了...#华为云·寻找黑马程序员#【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  4. 数据可视化之PowerQuery篇(四)二维表转一维表,看这篇文章就够了

    https://zhuanlan.zhihu.com/p/69187094 数据分析的源数据应该是规范的,而规范的其中一个标准就是数据源应该是一维表,它会让之后的数据分析工作变得简单高效. 在之前的文 ...

  5. 还不会Traefik?看这篇文章就够了!

    文章转载自:https://mp.weixin.qq.com/s/ImZG0XANFOYsk9InOjQPVA 提到Traefik,有些人可能并不熟悉,但是提到Nginx,应该都耳熟能详. 暂且我们把 ...

  6. 了解 HTTPS,读这篇文章就够了

    今天接到个活儿,让我科普 HTTPS .讲 HTTP 我都“方”,想要通俗易懂的说完 HTTPS, 我有点“圆”.在讲什么是 HTTPS 之前,我们先来看个漫画.   △ 图片来源于阮一峰的网络日志 ...

  7. 阮一峰:jQuery的几篇文章

    jQuery的设计思想:http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html jQuery的最佳实践:http://www.r ...

  8. 【转】学习MOS管技术知识,这篇文章就够了!

    MOS管学名是场效应管,是金属-氧化物-半导体型场效应管,属于绝缘栅型.本文就结构构造.特点.实用电路等几个方面用工程师的话简单描述. 其结构示意图: 解释1:沟道 上面图中,下边的p型中间一个窄长条 ...

  9. Kafka面试,看这篇文章就够了

    原文链接:https://mp.weixin.qq.com/s/zxPz_aFEMrshApZQ727h4g** 引言 MQ(消息队列)是跨进程通信的方式之一,可理解为异步rpc,上游系统对调用结果的 ...

随机推荐

  1. 设置cas server使用http非安全协议

    目录 1.tomcat添加https安全协议 2.下载cas server端部署到tomcat上 3.CAS服务器深入配置(连接MYSQL) 4.Apache Shiro 集成Cas作为cas cli ...

  2. 随笔: WC2016感想

    在某些时刻,我可以体会到非常复杂的情感,这种情感神秘的来源不能被描述.它非常的复杂.你无法分清,这种情感是来源于一个个神经元控制的情感系统的一时冲动,亦或是你如实地反馈了你所正在感知的外界. 但我曾在 ...

  3. PHP扩展开发(6) - VS2012下strncasecmp和fopen函数warning

    1. fopen   warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s i ...

  4. 如何在symfony 控制器里面创建soap web service

    通过一些工具将一个控制器设置成一个soap服务将会非常简单.首先,你必须安装了php soap扩展.由于php soap扩展现在不能生成wsdl,你要么自己从头开始创建要模使用第三方生成器. php中 ...

  5. JS判断手机端和PC端自动跳转

    <script type="text/javascript">     function browserRedirect() {     var sUserAgent ...

  6. Lintcode--009(单词切分)

    http://www.lintcode.com/zh-cn/problem/word-break/ 单词切分 给出一个字符串s和一个词典,判断字符串s是否可以被空格切分成一个或多个出现在字典中的单词. ...

  7. windows下adb+flash_image刷机

    刷机是常事,总要把刷机包放在卡上,然后关机三键一起按到recovery再刷,觉得不爽,麻烦,所以研究出了adb调用flash_image刷system分区,全部脚本windows脚本执行,点点鼠标就o ...

  8. JAVA中this用法小结[转]

    Java关键字this只能用于方法方法体内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是 this.因此,this只能在类中的非静态方法中使用,静 ...

  9. EE就业最好的方向是转CS,其次是VLSI/ASIC DESIGN & VERIFICATION

    Warald在2012年写过一篇文章<EE现在最好就业的方向是VLSI/ASIC DESIGN VERIFICATION>,三年过去了,很多学电子工程的同学想知道现在形势如何. 首先,按照 ...

  10. 响应头location 页面跳转

    登陆:http://192.168.32.161/DEVOPS/index.php/Index/do_login Cache-Control no-store, no-cache, must-reva ...