Chinaunix首页 | 论坛 | 博客
  • 博客访问: 187809
  • 博文数量: 174
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1800
  • 用 户 组: 普通用户
  • 注册时间: 2018-04-16 06:56
文章分类

全部博文(174)

文章存档

2020年(7)

2019年(29)

2018年(138)

我的朋友

分类: IT业界

2018-08-26 20:00:15

JQuery的Callbacks()函数的应用和技巧(图)
一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表。 
$.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Deferred() 基本功能组件。它可以用来作为类似基础定义的新组件的功能。 
$.Callbacks() 支持的方法,包括 callbacks.add(),callbacks.remove(), callbacks.fire() and callbacks.disable()等 
详细的API见: $.Callbacks API 比如:add | fire | fired | fireWith | has | disable | disabled | empty
$.Callbacks
我们通过调用$.Callbacks获取到一个callback实例,如下
var cb = $.Callbacks();
1
当然也可以使用 new 关键字来实例化出这个对象
var cb = new $.Callbacks();    
1
为了尽可能的节省代码和避免混乱我们还是统一采用var cb = $.Callbacks();的方式去调用。
$.Callbacks(flgs)
同时,在实例化一个 cb 的时候,还可以传递一些参数,参数类型为一个可以使用空格分隔的字符串。
支持的 Flags描述:
这个 flags 参数是$.Callbacks()的一个可选参数, 结构为一个用空格标记分隔的标志可选列表,用来改变回调列表中的行为 (比如. $.Callbacks( ‘unique stopOnFalse’ )).
可用的 flags:
参数名 描述
once 确保这个回调列表只执行一次(像一个递延 Deferred).
memory 当函数队列fire或fireWith一次过后,内部会记录当前fire或fireWith的参数。当下次调用add的时候,会把记录的参数传递给新添加的函数并立即执行这个新添加的函数。
unique 确保一次只能添加一个回调(所以有没有在列表中的重复).
stopOnFalse 当一个回调返回false 时中断调用
默认情况下,回调列表将像事件的回调列表中可以多次触发。 
如何在理想情况下应该使用的flags的例子,见下文:
实例
1. Once
function fn1(val) {console.log(val)};
function fn2(val) {console.log(val)};
var callbacks = $.Callbacks( "once" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
/*
output: 
foo
*/
2. Memory
function fn1(val) {console.log(val)};
function fn2(val) {console.log("fn2 says:" + val)};
var callbacks = $.Callbacks( "memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );//Do immediately of fn2
//Do fn1 at this time
callbacks.fire( "bar" );
callbacks.remove( fn2 );//Do immediately of fn2
//Do fn1 at this time
callbacks.fire( "foobar" );
/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
foobar
*/
3. Unique
var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // repeat addition will not usefull, only one fn1 exist.
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
/*
output:
foo
bar
fn2 says:bar
foobar
*/
4. StopOnFalse
function fn1( value ){
console.log( value );
return false;
}
function fn2( value ){
fn1("fn2 says:" + value);
return false;
}
var callbacks = $.Callbacks( "stopOnFalse");
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
/*
output:
foo
bar
foobar
*/
因为$.Callbacks() 支持一个列表的flags而不仅仅是一个,设置几个flags,有一个累积效应,类似“&&”。这意味着它可能结合创建回调名单,unique 和确保如果名单已经触发,将有更多的回调调用最新的触发值 (i.e.$.Callbacks(“unique memory”)).
function fn1( value ){
console.log( value );
return false;
}
function fn2( value ){
fn1("fn2 says:" + value);
return false;
}
var callbacks = $.Callbacks( "unique memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // repeat addition
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.add( fn2 );
callbacks.fire( "baz" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
baz
fn2 says:baz
foobar
*/
Flag结合体是使用的$.Callbacks()内部的.done() 和 .fail()一个递延容器-它们都使用 $.Callbacks(‘memory once’).
$.Callbacks 方法也可以被分离, 为方便起见应该有一个需要,定义简写版本:
var callbacks = $.Callbacks(),
add = callbacks.add,
remove = callbacks.remove,
fire = callbacks.fire;
add( fn1 );
fire( "hello world");
remove( fn1 );
jQuery:
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery的模块可以分为3部分:入口模块、底层支持模块和功能模块。
在构造jQuery对象模块中,如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式,则会调用选择器Sizzle(一款纯JavaScript实现的CSS选择器引擎,心得体会,用于查找与选择器表达式匹配的元素集合)遍历文档,查找与之匹配的DOM元素,并创建一个包含了这些DOM元素引用的jQuery对象。
浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果,其他模块则基于这些测试结果来解决浏览器之间的兼容性问题。
在底层支持模块中,回调函数列表模块用于增强对回调函数的管理,支持添加、移除、触发、锁定、禁用回调函数等功能;异步队列模块用于解耦异步任务和回调函数,它在回调函数列表的基础上为回调函数增加了状态,并提供了多个回调函数列表,支持传播任意同步或异步回调函数的成功或失败状态;数据缓存模块用于为DOM元素和Javascript对象附加任意类型的数据;队列模块用于管理一组函数,支持函数的入队和出队操作,并确保函数按顺序执行,它基于数据缓存模块实现。
在功能模块中,事件系统提供了统一的事件绑定、响应、手动触发和移除机制,它并没有将事件直接绑定到DOM元素上,而是基于数据缓存模块来管理事件;Ajax模块允许从服务器上加载数据,而不用刷新页面,它基于异步队列模块来管理和触发回调函数;动画模块用于向网页中添加动画效果,它基于队列模块来管理和执行动画函数;属性操作模块用于对HTML属性和DOM属性进行读取、设置和移除操作;DOM遍历模块用于在DoM树中遍历父元素、子元素和兄弟元素;DOM操作模块用于插入、移除、复制和替换DOM元素;样式操作模块用于获取计算样式或设置内联样式;坐标模块用于读取或设置DOM元素的文档坐标;尺寸模块用于获取DOM元素的高度和宽度。
阅读(640) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~