在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过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的原型对象,jQueryDOM操作方法都在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方法。

作者:留七七
链接:http://www.jianshu.com/p/518d424d4994
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

【转】简单的jQuery插件开发方法的更多相关文章

  1. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  2. 简单的jQuery hide()方法演示

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>jQu ...

  3. 自己动手开发jQuery插件全面解析 jquery插件开发方法

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  4. jQuery插件开发方法

    jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! 很多公司的 ...

  5. 跟我一起学写jQuery插件开发方法(转载)

    jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧!     很 ...

  6. 学写jQuery插件开发方法

    jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧!   很多公 ...

  7. jquery插件开发

    jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...

  8. jQuery插件开发 - 其实很简单

    [前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...

  9. jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...

随机推荐

  1. 一起学Python:协程

    一:协程-yield 协程,又称微线程,纤程.英文名Coroutine. 协程是啥 协程是python个中另外一种实现多任务的方式,只不过比线程更小占用更小执行单元(理解为需要的资源). 为啥说它是一 ...

  2. 【t003】string

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为" ...

  3. 微信小程序来了 要杀死一切App

    从昨晚一些自媒体开始陆续爆料,到微信官方宣布,这一次只隔了短短几小时.就在刚刚,今天早晨,微信官方正式宣布“应用号”开始内测,并暂定名为“小程序”. 应用号变成小程序 腾讯高级副总裁张小龙也在其朋友圈 ...

  4. Node.js,一生所爱

    下午参加了<云品秀--前端前沿>,用友云平台前端架构师郭永峰(站着的那位)讲得很棒,而我最关注的就是Node了.最后我问了他关于独立开发,后端选择Node还是别的语言.他讲了很多,说自己在 ...

  5. 封装QtCore(在非Qt项目里使用QString,QJson,QFileInfo,QFile等类)

    单独封装QtCore 一直以来使用QT的特性使用惯了,很多东西QT都封装得很好.如果突然有一天,不使用QT开发了,是不是不习惯. 比如我们经常使用QString很多方法,string,wstring之 ...

  6. Information Centric Networking Based Service Centric Networking

    A method implemented by a network device residing in a service domain, wherein the network device co ...

  7. WPF 3D中多个模型如何设置某一个在最前?

    原文:WPF 3D中多个模型如何设置某一个在最前? 问题:我们的模型包括导入的3D solid模型和axis坐标轴模型,当模型旋转的时候,3D会将axis挡住. 期望:axis一直在最前面,不会被3D ...

  8. c#调用ffmpeg嵌入srt/ass字幕提示Cannot load default config file...

    c#调用ffmpeg嵌入srt/ass字幕提示 Fontconfig error: Cannot load default config file[Parsed_subtitles_0 @ 00000 ...

  9. OpenCV中基于HOG特征的行人检测

    目前基于机器学习方法的行人检测的主流特征描述子之一是HOG(Histogram of Oriented Gradient, 方向梯度直方图).HOG特征是用于目标检测的特征描述子,它通过计算和统计图像 ...

  10. python 教程 第十三章、 特殊的方法

    第十三章. 特殊的方法 1)    特殊的方法 __init__(self,...) 这个方法在新建对象恰好要被返回使用之前被调用. __del__(self) 恰好在对象要被删除之前调用. __st ...