jqPlot Option配置对象详解_jquery_脚本之家

这里主要介绍jqPlot中核心部分——Option配置对象。同时,也会对jqplot的各个渲染器做个简单介绍。
这里主要是参考jqPlot官方网站关于Option的介绍并结自己简单实践和理解来对Option的相关属性进行解释,如有不合适或错误的地方请指正。
复制代码 代码如下: options = {
seriesColors: [ “#4bb2c5”, “#c5b47f”, “#EAA228”, “#579575”,
“#839557”, “#958c12”, “#953579”, “#4b5de4”, “#d8b83f”, “#ff5800”,
“#0085cc”], // 默认显示的分类颜色,
//如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始重新取值赋给相应的分类
stackSeries: false, // 如果置为true并且有多个分类, //
那么每个分类在纵轴上的值为其前所有分类纵轴值总和与其纵
//轴值相加值(eg,当前分类纵轴值为Y3
//,其前有Y2,Y1,那么他显示在Y轴上值为Y2+Y3+Y1,目前该属性支持线图和柱状图
title: ”, //设置当前图的标题 title: { text: ”, // 设置当前图的标题
show: true,//设置当前标题是否显示 }, axisDefaults: { show: false, //
wether or not to renderer the axis. Determined automatically. min: null,
// 横坐标显示的最小值 max: null, // 横坐标显示的最大值 pad: 1.2, //
一个相乘因子,
//轴上最小值)*pad值=该轴显示的横坐标区间长度=横坐标显示的最小值
//如果设置了max和min的值的话,那么会优先考虑min和max设置的值 ticks:
[], //设置横坐标的刻度上的值,可为该ticks数组中的值, // a 1D [val1,
val2, …], or 2D [[val, label], [val, label], …] numberTicks:
undefined, //一个相除因子,用于设置横坐标刻度间隔值=横坐标区间长度/
tickInterval:”, //横坐标刻度间隔值,可为日期字符串 renderer:
$.jqplot.LinearAxisRenderer, //
设置横轴上数据加载的渲染器,有dateAxisRenderer 。 rendererOptions: {}, //
设置renderer的Option配置对象,线状图不需要设置
//不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》
//中各个图表的配置Option对象 tickOptions: { mark: ‘outside’, //
设置横坐标刻度在坐标轴上显示方式,分为坐标轴内,外,穿过坐标轴显示 //
值也分为:’outside’, ‘inside’ 和 ‘cross’, showMark: true,
//设置是否显示刻度 showGridLine: true, //
是否在图表区域显示刻度值方向的网格线 markSize: 4, //
每个刻度线顶点距刻度线在坐标轴上点距离 //如果mark值为 ‘cross’,
那么每个刻度线都有上顶点和下顶点,刻度线与坐标轴
//在刻度线中间交叉,那么这时这个距离×2, show: true, //
是否显示刻度线,与刻度线同方向的网格线,以及坐标轴上的刻度值 showLabel:
true, // 是否显示刻度线以及坐标轴上的刻度值 formatString: ”, //
梃置坐标轴上刻度值显示格式,eg:’%b %#d, %Y’表示格式”月 日,年”,”AUG
30,2008″ fontSize:’10px’, //刻度值的字体大小 fontFamily:’Tahoma’,
//刻度值上字体 angle:40,
//刻度值与坐标轴夹角,角度为坐标轴正向顺时针方向 fontWeight:’normal’,
//字体的粗细 fontStretch:1//刻度值在所在方向度 } showTicks: true, ///
是否显示刻度线以及坐标轴上的刻度值 showTickMarks: true,
//设置是否显示刻度 useSeriesColor: true
//如果有多个纵坐标轴,通过该属性设置这些坐标轴是否以不同颜色显示 },
axes: { xaxis: { // 设置同 axisDefaults }, yaxis: { // 设置同
axisDefaults }, x2axis: { // 设置同 axisDefaults }, y2axis: { // 设置同
axisDefaults } }, seriesDefaults:
{//如果有多个分类,这可通过该配置属性设置各个分类的共性属性 show: true,
// 设置是否渲染整个图表区域 xaxis: ‘xaxis’, // either ‘xaxis’ or
‘x2axis’. yaxis: ‘yaxis’, // either ‘yaxis’ or ‘y2axis’. label: ”, //
用于显示在分类名称框中的分类名称 color: ”, // 分类在图标中表示的颜色
lineWidth: 2.5, // 分类图哪宽度 shadow: true, //
各图在图表中是否显示阴影区域 shadowAngle: 45, // 参考grid中相同参数
shadowOffset: 1.25, // 参考grid中相同参数 shadowDepth: 3, //
参考grid中相同参数 shadowAlpha: 0.1, // 参考grid中相同参数 showLine:
true, //是否显示图表中的折线 showMarker: true, //
是否强调显示图中的数据节点 fill: false, //
是否填充图表中折线下面的区域以及legend
//设置的分类名称框中分类的颜色,此处注意的是如果fill为true,
//那么showLine必须为true,否则不会显示效果 fillAndStroke: false,
//在fill为true的状态下,在填充区域最上面显示一条线 fillColor: undefined,
// 设置填充区域的颜色 fillAlpha: undefined, // 梃置填充区域的透明度
renderer: $.jqplot.PieRenderer, // 利用渲染器渲染现有图表
//,从而转换成所需图表 rendererOptions: {}, //
传给上个属性所设置渲染器的option对象,线状图的渲染器没有option对象,
//不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》
//中各个图表的配置Option对象 markerRenderer: $.jqplot.MarkerRenderer, //
renderer to use to draw the data // point markers. markerOptions: {
show: true, // 是否在图中显示数据点 style: ‘filledCircle’, //
各个数据点在图中显示的方式,默认是”filledCircle”,
//其他几种方式circle,diamond, square, filledCircle, // filledDiamond
or filledSquare. lineWidth: 2, //
数据点各个的边的宽度(如果设置过大,各个边会重复,会显示的类似于实心点)
size: 9, // 数据点的大小 color: ‘#666666’ // 数据点的颜色 shadow: true,
// 是否为数据点显示阴影区 shadowAngle: 45, // 阴影区角度,x轴顺时针方向
shadowOffset: 1, // 参考grid中相同参数 shadowDepth: 3,
//参考grid中相同参数 shadowAlpha: 0.07 // 参考grid中相同参数 }
isDragable: true,//是否允许拖动,默认可拖动 },
series:[//如果有多个分类需要显示,这在此处设置各个分类的相关配置属性
//eg.设置各个分类在分类名称框中的分类名称 //[label: ‘Traps
Division’},{label: ‘Decoy Division’},{label: ‘Harmony Division’}]
//配置参数设置同seriesDefaults ], legend: { show:
false,//设置是否出现分类名称框 location: ‘ne’, // 分类名称框出现位置,
nw, n, ne, e, se, s, sw, w. xoffset: 12, //
分类名称框距图表区域上边框的距离 yoffset: 12, //
分类名称框距图表区域左边框的距离 background:”
//分类名称框距图表区域背景色 textColor:”
//分类名称框距图表区域内字体颜色 ..其他关于样式设计参考官方文档 }, grid:
{ drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: ‘#cccccc’ // 设置整个图标区域网格背景线的颜色
background: ‘#fffdf6’, // 设置整个图表区域的背景色 borderColor:
‘#999999’, // 设置图表的边框的颜色 borderWidth: 2.0,
//设置图表的边框宽度 shadow: true, //
为整个图标边框设置阴影,以突出其立体效果 shadowAngle: 45, //
设置阴影区域的角度,从x轴顺时针方向旋转 shadowOffset: 1.5, //
设置阴影区域偏移出图片边框的距离 shadowWidth: 3, // 设置阴影区域的宽度
shadowDepth: 3, // 设置影音区域重叠阴影的数量 shadowAlpha: 0.07 //
设置阴影区域的透明度 renderer: $.jqplot.CanvasGridRenderer, // renderer
to use to draw the grid. rendererOptions: {} // options to pass to the
renderer. Note, the default // CanvasGridRenderer takes no additional
options. },
/************************jqPlot各个不同插件的Option对象设置******************************/
// BarRenderer
//该Option对象适用与柱状图的series和seriesDefault属性的相关配置对象设置
seriesDefaults: { rendererOptions: { barPadding: 8,
//设置同一分类两个柱状条之间的距离 barMargin: 10,
//设置不同分类的两个柱状条之间的距离 barDirection: ‘vertical’,
//设置柱状图显示的方向:垂直显示和水平显示 //,默认垂直显示 vertical or
horizontal. barWidth: null, // 设置柱状图中每个柱状条的宽度
shadowOffset: 2, // 同grid相同属性设置 shadowDepth: 5, //
同grid相同属性设置 shadowAlpha: 0.8, // 同grid相同属性设置 } }, //
Cursor // 鼠标移动到图中时,鼠标在图中显示形式,常与和高亮功能同时使用
//此外,通过设置该属性的zoom相关属性来对图中某个区域钻取
//该配置对象直接在option下配置 cursor: { style: ‘crosshair’,
//当鼠标移动到图片上时,鼠标的显示样式,该属性值为css类 show: true,
//是否显示光标 showTooltip: true, // 是否显示提示信息栏 followMouse:
false, //光标的提示信息栏是否随光标一起移动 tooltipLocation: ‘se’, //
光标提示信息栏的位置设置。如果followMouse=true,那么该位置为
//提示信息栏相对于光标的位置。否则,为光标提示信息栏在图标中的位置 //
该属性可选值: n, ne, e, se, etc. tooltipOffset: 6,
//提示信息栏距鼠标或坐标轴的位置 showTooltipGridPosition:
false,//是否在信息提示栏中显示光标位置 showTooltipUnitPosition: true,//
是否显示提示光标所在位置的信息栏
//注:注意此处与showTooltipGridPosition值区别,前者显示坐标值,该处显示的是数据值
tooltipFormatString: ‘%.4P’, // 同Highlighter的tooltipFormatString
useAxesFormatters: true, // 同Highlighter的tooltipFormatString
tooltipAxesGroups: [], // show only specified axes groups in tooltip.
Would specify like: // [[‘xaxis’, ‘yaxis’], [‘xaxis’, ‘y2axis’]].
By default, all axes // combinations with for the series in the plot are
shown. }, // Dragable
//该配置对象通过seriesDefaults和series配置对象进行配置 seriesDefaults: {
dragable: { color: undefined, // 当拖动数据点是,拖动线与拖动数据点颜色
constrainTo: ‘none’, //设置拖动的的范围: ‘x’, // ‘y’, or ‘none’. }, },
// Highlighter //设置高亮动作option属性对象
//鼠标移动到某个数据点上时,该数据点增大并显示提示信息框
//该配置对象直接在option下配置 highlighter: { lineWidthAdjust: 2.5,
//当鼠标移动到放大的数据点上时,设置增大的数据点的宽度 //
目前仅适用于非实心数据点 sizeAdjust: 5, //
当鼠标移动到数据点上时,数据点扩大的增量增量 showTooltip: true, //
是否显示提示信息栏 tooltipLocation: ‘nw’, // 提示信息显示位置: n, ne, e,
se, s, sw, w, nw. fadeTooltip: true, // 设置提示信息栏出现和消失的方式
tooltipFadeSpeed: “fast”//设置提示信息栏淡入淡出的速度: slow, def,
fast, 或者是一个毫秒数的值. tooltipOffset: 2, //
提示信息栏据被高亮显示的数据点的偏移位置,以像素计。 tooltipAxes:
‘both’, //
提示信息框显示数据点那个坐标轴上的值,目前有横/纵/横纵三种方式。
//值分别为 x, y or xy. tooltipSeparator: ‘, ‘ //
提示信息栏不同值之间的间隔符号 useAxesFormatters: true //
提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致
tooltipFormatString: ‘%.5P’ //
用于设置提示信息框中数据显示的格式,前提条件是useAxesFormatters //
为false. 此时信息提示框中数据格式不再与坐标轴一致,而是以此为准
//同时,该属性还支持html格式字符串 //eg:’hello %.2f’ }, // LogAxisRenderer //
该渲染器只有两个属性, 指数渲染器通过axesDefaults和axes配置对象进行配置
axesDefaults: { base: 10, // 指数的底数 tickDistribution: ‘even’, //
坐标轴显示方式:’even’ or ‘power’. ‘even’ 产生的是均匀分布于坐标
//轴上的坐标刻度值 。而’power’
则是根据不断增大的增数来确定坐标轴上的刻度 }, // PieRenderer //
饼状图通过seriesDefaults和series配置对象进行配置 seriesDefaults: {
rendererOptions: { diameter: undefined, // 设置饼的直径 padding: 20, //
饼距离其分类名称框或者图表边框的距离,变相该表饼的直径 sliceMargin: 20,
// 饼的每个部分之间的距离 fill:true, // 设置饼的每部分被填充的状态
shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果
shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离 shadowDepth:
5, // 设置阴影区域的深度 shadowAlpha: 0.07 // 设置阴影区域的透明度 } },
//pointLabels //用于在数据点所在位置显示相关信息 seriesDefaults: {
pointLabels: { location:’s’,//数据标签显示在数据点附近的方位 ypadding:2
//数据标签距数据点在纵轴方向上的距离 } } // Trendline //
饼状图通过seriesDefaults和series配置对象进行配置 seriesDefaults: {
trendline: { show: true, // 是否显示趋势线 color: ‘#666666’, //
趋势线颜色 label: ”, // 趋势线名称 type: ‘linear’,
//趋势线类型’linear’, ‘exponential’ or ‘exp’ shadow: true, //
同grid相同属性设置 lineWidth: 1.5, // 趋势线宽度 shadowAngle: 45, //
同grid相同属性设置 shadowOffset: 1.5, // 同grid相同属性设置 shadowDepth:
3, // 同grid相同属性设置 shadowAlpha: 0.07 // 同grid相同属性设置 } } }
相关渲染器介绍 复制代码 代码如下:
1.dateAxisRenderer 相关引用包:

deferred对象是jQuery对Promises接口的实现。它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置。事实上,它扮演代理人的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作、网页动画、web
worker等等。

本文实例分析了jQuery对象与DOM对象的转换方法。分享给大家供大家参考,具体如下:

这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax。为了实现它,jQuery的全部ajax代码都被改写了。

该渲染器主要用于显示刻度为日期格式的坐标轴,它增强了javascript的本地数据处理能力,它几乎支持所有的日期格式。
另外,该渲染器还提供了强大的格式化功能,它能将数据中日期字符串格式化为你需要的格式并显示在坐标轴的刻度线上。
2.categoryAxisRenderer 相关引用包:

jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象。

jQuery对象转换为dom对象

但是,它比较抽象,初学者很难掌握,网上的教程也不多。所以,我把自己的学习笔记整理出来了,希望对大家有用。

该渲染器主要用于将显示于刻度处的值显示与两个刻度之间,当然其表达意思也发生变化,因为刻度值处值表示某个点处的值,而它则代表某个范围内的值。
该渲染器比较适合与柱状图联合使用。 3.barRenderer 相关引用包:

Promises是什么

只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。有时尤其是在初学jQuery,无法记住jQuery的所有函数时,会有很长一段时间使用jQuery选择器配合原始的dom函数进行开发。所以两种对象的转化是很有必要的。

本文不是初级教程,针对的读者是那些已经具备jQuery使用经验的开发者。如果你想了解jQuery的基本用法,请阅读我编写的《jQuery设计思想》和《jQuery最佳实践》。

该渲染器主要用于显示柱状图,该渲染器能够很好的控制每个组内及组间距离,并且该柱状图能够水平显示。
4.cursor 相关引用包:

由于JavaScript单线程的特点,如果某个操作耗时很长,其他操作就必需排队等待。为了避免整个程序失去响应,通常的解决方法是将那些排在后面的操作,写成“回调函数”的形式。这样做虽然可以解决问题,但是有一些显着缺点:

jQuery对象的索引保存的是dom对象,所以可以通过索引将经jQuery对象转化为dom对象(实际上是获取保存在jQuery对象中的dom对象)。

一、什么是deferred对象?

该渲染器主要用于当鼠标移动到图中数据点上时,在鼠标附近显示提示栏,并将相关信息显示在提示栏。默认显示值是横纵坐标轴刻度值。当然,提示框中信息是可以根据自身需要定制的。
该渲染器相关引用包一旦引用到当前页面会,该渲染器立即生效。
6.logAxisRenderer 相关引用包:

1.回调函数往往写成函数参数的形式,导致函数的输入和输出非常混乱,整个程序的可阅读性差;2.回调函数往往只能指定一个,如果有多个操作,就需要改写回调函数。3.整个程序的运行流程被打乱,除错和调试的难度都相应增加。

$[0];

开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作,也有同步的操作,它们都不是立即能得到结果的。

该渲染器主要用于以指数计算的方式生成坐标轴上刻度值。默认情况下,刻度值是均匀显示的,但是刻度值也可以按指数增长的方式显示。
7.ohlcRenderer 相关引用包:

Promises就是为了解决这些问题而提出的,它的主要目的就是取代回调函数,成为非同步操作的解决方案。它的核心思想就是让非同步操作返回一个对象,其他操作都针对这个对象来完成。比如,假定ajax操作返回一个Promise对象。复制代码 代码如下:var promise =
get(‘ 代码如下:promise.then {
console.log可以将上面两段代码合并起来,这样程序的流程看得更清楚。复制代码
代码如下:get(‘ { console.log

通过索引返回dom对象后,就可以使用各种dom对象的方法和属性,比如获取dom对象的src属性:

通常的解决方法是,为它们指定回调函数。即事先规定,一旦它们运行结束,应该调用哪些函数。

该渲染器主要用于显示甘特图。通常情况下,该渲染器与dateAxisRenderer一起使用较多
8.dragable 相关引用包:

在1.7版之前,jQuery的Ajax操作采用回调函数。复制代码 代码如下:$.ajax({ url:”/echo/json/”,
success: function { console.info;

alert;

但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。

通过该渲染器,用户能够拖动某个数据点,jqplot会自动重画拖动后的新图表。同时,被拖动的数据点的数据值也随着拖动发生变化。
9.trendline 相关引用包:

1.7版之后,Ajax操作直接返回Promise对象,这意味着可以用then方法指定回调函数。复制代码 代码如下:$.ajax({ url:
“/echo/json/”,}).then { console.info;

如果想要遍历jQuery对象中的每个元素,通常使用each()函数。

简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是”延迟”,所以deferred对象的含义就是”延迟”到未来某个点再执行。

该渲染器主要用于对现有数据进行线性回归计算,并自动将计算结果以趋势线的形式展示出来,当用户拖动某个数据点时,趋势线亦随用户拖动而变化。
10.pointLabels 相关引用包:

deferred对象的方法

echo;

它解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。它的主要功能,可以归结为四点。下面我们通过示例代码,一步步来学习。

该渲染器主要用于将数据节点相关的的信息以标签的方式放于该数据节点附近;对于相应数据为空的,其标签不显示。

$.deferred()方法

Callback()是一个回调函数,此函数中的this也指向dom元素。

二、ajax操作的链式写法

作用是生成一个deferred对象。复制代码
代码如下:var deferred = $.deferred();

$.each{ this,src="test"+i+".jpg";});

jQuery的ajax操作,传统写法是这样的:

done

对于懒人有一个小窍门,如果不想记忆在不同的jQuery函数中的this到底是jQuery对象还是this对象,可以使用”this”方法都转化成jQuery对象,因为即使一个对象已经是jQuery对象也不会出错。

$.ajax({

这两个方法都用来绑定回调函数。done()指定非同步操作成功后的回调函数,fail()指定失败后的回调函数。复制代码 代码如下:var deferred =
$.Deferred();deferred.done { alert;

Dom对象转化为jQuery对象

url: “test.html”,

它们返回的是原有的deferred对象,因此可以采用链式写法,在后面再链接别的方法。

如果已经获得了一个dom对象,可以使用”jQuery”函数将其转化为jQuery对象:

success: function; },

resolve

var img=document.getElementById;jQuery.css("border","solid 2px #FF0000");

error:function; }

这两个方法用来改变deferred对象的状态。resolve()将状态改为非同步操作成功,reject()改为操作失败。复制代码 代码如下:var deferred =
$.Deferred();deferred.done {
alert;deferred.resolve;一旦调用resolve方法指定的回调函数;一旦调用reject方法指定的回调函数。

上面代码中img是使用dom获取到的dom对象。将其转化为jQuery对象后就可以使用jQuery对象的css()方法更改其样式。

});

state方法

可以使用”$”代替”jQuery”,因为在jQuery的内部有如下实现:

在上面的代码中,$.ajax()接受一个对象参数,这个对象包含两个方法:success方法指定操作成功后的回调函数,error方法指定操作失败后的回调函数。

该方法用来返回deferred对象目前的状态。复制代码 代码如下:var deferred = new
$.Deferred; // “pending”deferred.resolve; //
“resolved”该方法的返回值有三个:

jQuery=window.jQuery=window.$

$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

1.pending:表示操作还没有完成。2.resolved:表示操作成功。3.rejected:表示操作失败。

“$”字符在JavaScript中可用做变量名,并且可以作为前缀出现。但是一些其他的类库或者是程序可能已经使用了”$”作为变量名。

现在,新的写法是这样的:

notify

jQuery.css("border","solid 2px #FF0000");$. css("border","solid 2px #FF0000");

$.ajax

progress()用来指定一个回调函数,当调用notify()方法时,该回调函数将执行。它的用意是提供一个接口,使得在非同步操作执行过程中,可以执行某些操作,比如定期返回进度条的进度。复制代码 代码如下:var userProgress =
$.Deferred(); var $profileFields = $; var totalFields =
$profileFields.length userProgress.progress(function { var pctComplete =
(filledFields/totalFields)*100; $.html(pctComplete.toFixed;
userProgress.done { $.html(“Thanks for completing your
profile!”).show.on { var filledFields = $profileFields.filter.length;
userProgress.notify; if (filledFields == totalFields) {
userProgress.resolve;

以上两条语句是等同的。

.done{ alert

then()

“jQuery”函数的elemients参数还可以是jQuery对象,虽然讲一个jQuery对象在次转化没有意义,这是为了当不确定一个对象的类型是jQuery对象还是dom对象时,可以再次调用此函数进行转化,这样可以保证此对象一定是jQuery对象。

.fail{ alert;

then()的作用也是指定回调函数,它可以接受三个参数,也就是三个回调函数。第一个参数是resolve时调用的回调函数,第二个参数是reject时调用的回调函数,第三个参数是progress()方法调用的回调函数。复制代码 代码如下:deferred.then( doneFilter [,
failFilter ] [, progressFilter ] )在jQuery
1.8之前,then写法的语法糖,两种写法是等价的。在jQuery
1.8之后,then()返回一个新的deferred对象,而done()返回的是原有的deferred对象。如果then()指定的回调函数有返回值,该返回值会作为参数,传入后面的回调函数。

更多关于jquery相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》

可以看到,done相当于error方法。采用链式写法以后,代码的可读性大大提高。

复制代码 代码如下:var defer =
jQuery.Deferred();defer.done{ return a * b;}).done {
console.log;}).then { return a * b;}).done { console.log;}).then {
return a * b;}).done { console.log;});defer.resolve;

希望本文所述对大家jquery程序设计有所帮助。

三、指定同一操作的多个回调函数

在jQuery 1.8版本之前,上面代码的结果是:复制代码 代码如下:result = 2 result = 2 result
= 2 在jQuery 1.8版本之后,返回结果是复制代码 代码如下:result = 2 result = 6 result
= NaN 这一点需要特别引起注意。复制代码
代码如下:$.ajax( url1, { dataType: “json” } ).then { return $.ajax(
url2, { data: { user: data.userId } } );}).done { // 从url2获取的数据});

deferred对象的一大好处,就是它允许你自由添加多个回调函数。

上面代码最后那个done方法,处理的是从url2获取的数据,而不是从url1获取的数据。

还是以上面的代码为例,如果ajax操作成功后,除了原来的回调函数,我还想再运行一个回调函数,怎么办?

利用then()会修改返回值这个特性,我们可以在调用其他回调函数之前,对前一步操作返回的值进行处理。复制代码 代码如下:var post = $.post .then{
return p.firstName; });post.done{
console.log方法,从返回的数据中取出所需要的字段,所以后面的操作就可以只处理这个字段了。

很简单,直接把它加在后面就行了。

有时,Ajax操作返回json字符串里面有一个error属性,表示发生错误。这个时候,传统的方法只能是通过done方法,可以让deferred对象调用fail()方法。复制代码 代码如下:var myDeferred =
$.post(‘/echo/json/’, {json:JSON.stringify .then { if { return
$.Deferred; } return response; },function () { return
$.Deferred().reject;myDeferred.done { $.html.fail { $.html; });

$.ajax

always()

.done{ alert

always()也是指定回调函数,不管是resolve或reject都要调用。

.fail{ alert

pipe方法

.done{ alert;

pipe方法接受一个函数作为参数,表示在调用then方法、done方法、fail方法、always方法指定的回调函数之前,先运行pipe方法指定的回调函数。它通常用来对服务器返回的数据做初步处理。

回调函数可以添加任意多个,它们按照添加顺序执行。

promise对象

四、为多个操作指定回调函数

大多数情况下,我们不想让用户从外部更改deferred对象的状态。这时,你可以在deferred对象的基础上,返回一个针对它的promise对象。我们可以把后者理解成,promise是deferred的只读版,或者更通俗地理解成promise是一个对将要完成的任务的承诺。

deferred对象的另一大好处,就是它允许你为多个事件指定一个回调函数,这是传统写法做不到的。

你可以通过promise对象,为原始的deferred对象添加回调函数,查询它的状态,但是无法改变它的状态,也就是说promise对象不允许你调用resolve和reject方法。

请看下面的代码,它用到了一个新的方法$.when():

复制代码 代码如下:function getPromise(){
return $.Deferred;}try{ getPromise;} catch { console.log;}

$.when, $.ajax

上面的代码会出错,显示TypeError {} 。

.done{ alert

jQuery的ajax()
方法返回的就是一个promise对象。此外,Animation类操作也可以使用promise对象。复制代码 代码如下:var promise = $.promise();

.fail{ alert;

$.when()方法

这段代码的意思是,先执行两个操作$.ajax和$.ajax,如果成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。

$.when()接受多个deferred对象作为参数,当它们全部运行成功后,才调用resolved状态的回调函数,但只要其中有一个失败,就调用rejected状态的回调函数。它相当于将多个非同步操作,合并成一个。复制代码 代码如下:$.when( $.ajax, $.ajax,
$.ajax.then(successFunc, failureFunc);

五、普通操作的回调函数接口

上面代码表示,要等到三个ajax操作都结束以后,才执行then方法指定的回调函数。

deferred对象的最大优点,就是它把这一套回调函数接口,从ajax操作扩展到了所有操作。也就是说,任何一个操作—-不管是ajax操作还是本地操作,也不管是异步操作还是同步操作—-都可以使用deferred对象的各种方法,指定回调函数。

when方法里面要执行多少个操作,回调函数就有多少个参数,对应前面每一个操作的返回结果。复制代码 代码如下:$.when( $.ajax, $.ajax,
$.ajax.then(function { console.log; console.log; console.log;

我们来看一个具体的例子。假定有一个很耗时的操作wait:

上面代码的回调函数有三个参数,resp1、resp2和resp3,依次对应前面三个ajax操作的返回结果。

var wait = function(){

when方法的另一个作用是,如果它的参数返回的不是一个Deferred或Promise对象,那么when方法的回调函数将
立即运行。复制代码 代码如下:$.when.done{
console.log; // “123”});

var tasks = function(){

上面代码中指定的回调函数,将在when方法后面立即运行。

alert;

利用这个特点,我们可以写一个具有缓存效果的异步操作函数。也就是说,第一次调用这个函数的时候,将执行异步操作,后面再调用这个函数,将会返回缓存的结果。复制代码 代码如下:function maybeAsync { var dfd
= $.Deferred { setTimeout { dfd.resolve; return dfd.promise(); } return
num;}$.when.then{ $.append(‘

};

‘ + resp + ‘

setTimeout;

‘);});$.when.then{ $.append( ‘

};

‘ + resp + ‘

我们为它指定回调函数,应该怎么做呢?

‘);});

很自然的,你会想到,可以使用$.when():

上面代码表示,如果maybeAsync函数的参数为1,则执行异步操作,否则立即返回缓存的结果。

$.when

实例

.done{ alert

wait方法

.fail{ alert;

我们可以用deferred对象写一个wait方法,表示等待多少毫秒后再执行。复制代码 代码如下:$.wait = function { return
$.Deferred { setTimeout; });}使用方法如下:复制代码 代码如下:$.wait { alert(“Hello from
the future!”);});

但是,有一个问题。$.when()的参数只能是deferred对象,所以必须对wait进行改写:

改写setTimeout方法

var dtd = $.Deferred(); // 新建一个deferred对象

在上面的wait方法的基础上,还可以改写setTimeout方法,让其返回一个deferred对象。复制代码 代码如下:function doSomethingLater {
var dfd = $.Deferred(); setTimeout { dfd.resolve; return
dfd.promise();}var promise = doSomethingLater{ console.log;

var wait = function{

自定义操作使用deferred接口

var tasks = function(){

我们可以利用deferred接口,使得任意操作都可以用done指定回调函数。复制代码 代码如下:Twitter = { search:function {
var dfr = $.Deferred(); $.ajax({
url:””, data:{q:query},
dataType:’jsonp’, success:dfr.resolve }); return dfr.promise(); }}

alert;

使用方法如下:复制代码
代码如下:Twitter.search.then {
alert;});deferred对象的另一个优势是可以附加多个回调函数。复制代码 代码如下:function doSomething { var
dfr = $.Deferred(); setTimeout { dfr.reject(“Sorry, something went
wrong.”); }); return dfr;}doSomething.done { alert(“Won’t happen, we’re
erroring here!”);}).fail { alert;

dtd.resolve();// 改变deferred对象的执行状态

};

setTimeout;

return dtd.promise();

};

这里有两个地方需要注意。

首先,最后一行不能直接返回dtd,必须返回dtd.promise()。原因是jQuery规定,任意一个deferred对象有三种执行状态—-未完成,已完成和已失败。如果直接返回dtd,$.when()的默认执行状态为”已完成”,立即触发后面的done()方法,这就失去回调函数的作用了。dtd.promise()的目的,就是保证目前的执行状态—-也就是”未完成”—-不变,从而确保只有操作完成后,才会触发回调函数。

其次,当操作完成后,必须手动改变Deferred对象的执行状态,否则回调函数无法触发。dtd.resolve()的作用,就是将dtd的执行状态从”未完成”变成”已完成”,从而触发done()方法。

最后别忘了,修改完wait之后,调用的时候就必须直接传入dtd参数。

$.when

.done{ alert

.fail{ alert;

六、普通操作的回调函数接口

除了使用$.when()为普通操作添加回调函数,还可以使用deferred对象的建构函数$.Deferred()。

这时,wait函数还是保持不变,我们直接把它传入$.Deferred():

$.Deferred

.done{ alert

.fail{ alert;

jQuery规定,$.Deferred()可以接受一个函数作为参数,该函数将在$.Deferred()返回结果之前执行。并且,$.Deferred()所生成的Deferred对象将作为这个函数的默认参数。

七、普通操作的回调函数接口

除了上面两种方法以外,我们还可以直接在wait对象上部署deferred接口。

var dtd = $.Deferred(); // 生成Deferred对象

var wait = function{

var tasks = function(){

alert;

dtd.resolve(); // 改变Deferred对象的执行状态

};

setTimeout;

};

dtd.promise;

wait.done{ alert

.fail{ alert;

wait

这里的关键是dtd.promise这一行,它的作用就是在wait对象上部署Deferred接口。正是因为有了这一行,后面才能直接在wait上面调用done。

八、小结:deferred对象的方法

前面已经讲到了deferred对象的多种方法,下面做一个总结:

生成一个deferred对象。

指定操作成功时的回调函数

指定操作失败时的回调函数

没有参数时,作用为保持deferred对象的运行状态不变;接受参数时,作用为在参数对象上部署deferred接口。

手动改变deferred对象的运行状态为”已完成”,从而立即触发done$.when()为多个操作指定回调函数。

除了这些方法以外,deferred对象还有三个重要方法,上面的教程中没有涉及到。

有时为了省事,可以把done合在一起写,这就是then()方法。

$.when)

.then(successFunc, failureFunc );

如果then方法的回调函数,第二个参数是fail只有一个参数,那么等同于donedeferred.reject()

这个方法与deferred.resolve()正好相反,调用后将deferred对象的运行状态变为”已失败”,从而立即触发faildeferred.always()

这个方法也是用来指定回调函数的,它的作用是,不管调用的是deferred.resolve,最后总是执行。

$.ajax

.always { alert;

相关文章