jQuery插件手把手教会(一)
jQuery插件开发教程
——让你的jQuery水平提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统。这好比大公司们争相做平台一样,得平台者得天下。苹果、微软、谷歌等巨头,都有各自的平台及生态圈。
学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。如果想将能力提升一个台阶,编写一个属于自己的插件是个不错的选择。
本教程可能不是最精品的,但一定是最详细的。
jQuery插件开发模式
软件开发过程中是需要一定的设计模式来指导开发的,有了模式我们就能更好地组织我们的代码,并且从这些前辈们总结出来的模式中学到很多好的开发经验。
根据《jQuery高级编程》中的描述,jQuery插件开发方式主要有三种:
1、通过$.extend()来扩展jQuery
2、通过$.fn 向jQuery添加新的方法
3、通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存、各种关于插件的常用方法等,非常贴心,这里不细说。
而第一种方式又太简单,仅仅是在jQuery命名空间或者理解成在jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时,直接通过$符号调用($.myfunction()),而不需要选中DOM元素($('#example').myfunction())。请看下面的例子。
首先准备<script type="text/javascript" src="jquery.js"></script>在html中引用,可以在jQuery官网去下载最新版本,
新建plug.html文件和plug.js,并在html中引用;
如下:
<!DOCTYPE html>
<html>
<head>
<title>plug</title> <meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> //引入jQuery开发必备的开发库
<script type="text/javascript" src="plug.js"></script> //引入自定义的js
</head>
<body>
<p></p>
</body>
</html>
在plug.js中写js:
$.extend({
sayHello : function(name){
$('p').html('hello,'+(name?name: 'Dute')+'!');
console.log('hello,'+(name?name: 'Dute')+'!');
}
});
然后在html中引用他,在body中加入如下这几行代码:
<script type="text/javascript">
$.sayHello();
$.sayHello('Lucy');
</script>
运行结果:
文本页面显示带参数的是因为覆盖了默认的。
上面代码中,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用。到此你可以认为我们已经完成了一个简单的jQuery插件了。
但如你所见,这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console,输出特定格式的信息,定义一次后可以通过jQuery在程序中任何需要的地方调用它。
看下面这个例子:
$.extend({
logg : function(message){
var now = new Date(),
y=now.getFullYear(),
m=now.getMonth()+1,
d=now.getDate(),
h=now.getHours(),
mins=now.getMinutes(),
s=now.getSeconds(),
time=y + '/' + m + '/' + d + ' ' + h + ':' + mins + ':' + s;
console.log(time+' by: '+message);
$('p').html(time+' by: '+message);
}
});
调用方式:$.logg('EthanCoco');
运行结果:
但这种方式无法利用jQuery强大的选择器带来的便利,要处理DOM元素以及将插件更好地运用于所选择的元素身上,还是需要使用第二种开发方式。
你所见到或使用的插件也大多是通过此种方式开发。
先看一下它的基本格式:
$.fn.pluginName = function() {
//your code goes here
}
基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。
比如我们将页面上所有链接颜色转成红色,则可以这样写这个插件:
$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
this.css('color', 'red');
}
在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合,且这个集合已经是jQuery包装类型了,也就是说,在对其进行操作的时候可以直接调用
jQuery的其他方法而不需要再用美元符号来包装一下。
所以在上面插件代码中,我们在this身上调用jQuery的css()方法,也就相当于在调用 $('a').css()。
理解this在这个地方的含义很重要。这样你才知道为什么可以直接调用jQuery方法的同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用,下面会讲到。初学容易被this的值整晕,但理解了就不难了。
现在就可以去页面试试我们的代码了,在页面上放几个链接,调用插件后链接字体变成红色。
在body中添加如下代码:
<ul id="ulp">
<li>
<a href="http://www.qq.com/">Tencent</a>
</li>
<li>
<a href="http://souhu.com/">Souhu</a>
</li>
<li>
<a href="http://taobao.com/">Taobao</a>
</li>
</ul>
<p>I am label p, I am fine! I am not like label a!</p>
调用方式:
$(function(){
$('a').myPlugin();
});
运行结果:
下面进一步,在插件代码里处理每个具体的元素,而不是对一个集合进行处理,这样我们就可以针对每个元素进行相应操作。
我们已经知道this指代jQuery选择器返回的集合,那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了,但此刻要注意的是在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法,那就需要用$来重新包装一下。
比如现在我们要在每个链接处显示链接的真实地址,首先通过each遍历所有a标签,然后获取href属性的值,再加到链接文本后面。
更改后我们的插件代码为:
$.fn.myPlugin = function(){
this.css('color','red');
this.each(function(){
$(this).append(' ' + $(this).attr('href'));
});
};
运行结果:
到此,你已经可以编写功能简单的jQuery插件了,是不是也没那么难。
下面开始jQuery插件编写中一个重要的部分,参数的接收。
支持链式调用
我们都知道jQuery一个非常优雅的特性是支持链式调用,选择好DOM元素后可以不断地调用其他方法。
要让插件不打破这种链式调用,只需return一下即可。
$.fn.myPlugin = function(){
this.css('color','red');
return this.each(function(){
$(this).append(' ' + $(this).attr('href'));
});
};
让插件接收参数
一个强劲的插件是可以让使用者随意定制的,这要求我们提供在编写插件时就要考虑得全面些,尽量提供合适的参数。
比如现在我们不想让链接只变成红色,我们让插件的使用者自己定义显示什么颜色,要
做到这一点很方便,只需要使用者在调用的时候传入一个参数即可。同时我们在插件的代码里面接收。另一方面,为了灵活,使用者可以不传递参数,插件里面会给出参数的默认值。
在处理插件参数的接收上,通常使用jQuery的extend方法,上面也提到过,但那是给extend方法传递单个对象的情况下,这个对象会合并到jQuery身上,所以我们就可以在jQuery身上调用新合并对象里包含的方法了,像上面的例子。当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。
利用这一点,我们可以在插件里定义一个保存插件参数默认值的对象,同时将接收来的参数对象合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值。
为了演示方便,再指定一个参数fontSize,允许调用插件的时候设置字体大小。
$.fn.myPlugin = function(options){
var defaults={
'color' : 'red',
'fontSize' : '12px'
};
var settings=$.extend(defaults,options);
return this.css({
'color' : settings.color,
'fontSize' : settings.fontSize
});
};
现在,我们调用的时候指定颜色,字体大小未指定,会运用插件里的默认值12px。
调用代码:
$('a').myPlugin({
'color': '#2C9929'
});
运行结果:
同时指定颜色与字体大小
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '30px'
});
运行结果:
保护好默认参数
注意到上面代码调用extend时会将defaults的值改变,这样不好,因为它作为插件因有的一些东西应该维持原样,另外就是如果你在后续代码中还要使用这些默认值的话,当你再次访问它时它已经被用户传进来的参数更改了。
一个好的做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。
如下代码:
$.fn.myPlugin = function(options){
var defaults={
'color' : 'red',
'fontSize' : '14px'
};
var settings=$.extend({},defaults,options);
return this.css({
'color' : settings.color,
'fontSize' : settings.fontSize
});
};
到此,插件可以接收和处理参数后,就可以编写出更健壮而灵活的插件了。若要编写一个复杂的插件,代码量会很大,如何组织代码就成了一个需要面对的问题。没有一个好的方式来组织这些代码,整体代码就会感觉杂乱无章,同时也不好维护,所以将插件的所有方法属性包装到一个对象上,用面向对象的思维来进行开发,无疑会使工作轻松很多。
到此先介绍到这里,下一节将介绍“面向对象的插件开发”!
jQuery插件手把手教会(一)的更多相关文章
- jQuery插件手把手教会(二)
上次我们将到了简单的jQuery插件,这次我们继续: 面向对象的插件开发 为什么要有面向对象的思维,因为如果不这样,你可能需要一个方法的时候就去定义一个function,当需要另外一个方法的时候,再去 ...
- [原创作品]手把手教你怎么写jQuery插件
这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件(导航、轮播)、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- centos增加软连接
#增加软连接 ln -s /usr/local/git/bin/* /usr/bin/
- C#DirectX播放视频
文章地址:http://www.cnblogs.com/zhangjun1130/archive/2009/09/15/1566814.html 很多人第一次接触到DirectX大都是通过游戏,至于安 ...
- C++:CursorType光标类型 和 LockType锁定类型
简要: CursorType光标类型: 1. AdOpenForwardOnly (默认值)一次只能向前移动一行. 2. AdOpenKeyset 打开键集类型游标. 3. AdO ...
- Linux下 sleep函数的注意事项
1. 休眠sleep(unsigned int)为线程内操作 所以如果不同线程,信号量SIGALRM是不能中断sleep(): 编写程序进行测试 //timercreate_demo.cpp #i ...
- python 操作redis之——有序集合(sorted set) (七)
#coding:utf8 import redis r =redis.Redis(host=") 1.Zadd 命令用于将一个或多个成员元素及其分数值加入到有序集当中.如果某个成员已经是有序 ...
- java中native关键字的用法
前言: 如果阅读过JDK的源码,我们会发现Thread.java类里有一个方法比较特殊 private native void start0(); 概念: native关键字说明其修饰的方法是一个原生 ...
- redis五种基本数据类型
1.string类:一个key对应一个value(key:value).string类是二进制安全,可以包含任何数据(例如:图片.音乐). 2.hash类:string类型field和value的映射 ...
- 查看linux系统某宏的定义(另类)
有一次我想查看time_t类型的定义,一开始想直接在/usr/include/time.h中查找,结果里面没有,而是转到另外一个:__time_t(2个下划线), 结果又转到:__STD_TYPE _ ...
- 架构设计--用户端全http参数接口详细说明v1
1. 用户端全http参数接口详细说明v1.doc 1 2. change histor 1 3. 接口通用参数说明 1 4. 函数注册接口(规划中) 3 5. 用户权限模块 3 5.1. 用户注册接 ...
- atitit.提升研发管理的利器---重型框架 框架 类库的区别
atitit.提升研发管理的利器---重型框架 框架 类库的区别 1. 重型框架就是it界的重武器. 1 2. 框架 VS. 库 可视化图形化 1 3. 应用框架 1 4. 类库 2 5. 框架是不可 ...