快速掌握jQuery插件开发


Posted in Javascript onJanuary 19, 2017

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过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.changeStyle = function(colorStr){
 this.css("color",colorStr);
 }

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

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

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

满足链式调用的jQuery插件

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

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

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

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

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

防止$符号污染的jQuery插件

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

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

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

可以接受参数的jQuery插件

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

(function($){
 $.fn.changeStyle = 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").changeStyle({colorStr:"red",fontSize:14});

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

(function($){
 $.fn.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方法。

参考资料

How to Create a Basic Plugin

http://www.jianshu.com/p/518d424d4994

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中怎么做对象的类型判断
Nov 11 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
Web 开发中Ajax的Session 超时处理方法
Jan 19 #Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 #Javascript
使用JavaScript触发过渡效果的方法
Jan 19 #Javascript
详解支持Angular 2的表格控件
Jan 19 #Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 #Javascript
JS生成一维码(条形码)功能示例
Jan 19 #Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 #Javascript
You might like
PHP字符串的连接的简单实例
2013/12/30 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
用Python创建声明性迷你语言的教程
2015/04/13 Python
pandas中去除指定字符的实例
2018/05/18 Python
python基于property()函数定义属性
2020/01/22 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
库房管理员岗位职责
2014/03/09 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
redis 查看所有的key方式
2021/05/07 Redis
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript