javascript 跳转页面-自定义jQuery翻页插件-jQuery Callbacks

当前位置: 编程技术>WEB前端

本页文章导读:

▪javascript 跳转页面 window.location.href = "你的URL";//本页URL重定向window.showModalDialog(URL,[param],[param]);//模态窗口（打开新窗口）window.showModalessDialog(URL,[param],[param]);//非模态窗口（打开新窗口）window.open(URL,[param],[param]);.........

▪自定义jQuery翻页插件第一次写jQuery插件。自己感觉写的也不怎么样。写jQuery插件利用的就是这个东东 jQuery.fn，例如jQuery.fn.pluginName=function(){};这个是我写的分页插件的样子插件通过一个外放的函数来进行翻页.........

▪jQuery Callbacks jQuery.Callbacks是jQuery的多用途核心组件，专职负责回调函数列队管理，其在jQuery的$.ajax() 和 $.Deferred()提供了一些基础功能。其主要提供了易于管理的批量回调函数处理的功能。说到批处.........

[1]javascript 跳转页面

来源: 发布时间: 2013-11-06

window.location.href = "你的URL";//本页URL重定向

window.showModalDialog(URL,[param],[param]);//模态窗口（打开新窗口）

window.showModalessDialog(URL,[param],[param]);//非模态窗口（打开新窗口）

window.open(URL,[param],[param]);//打开新窗口

window.location="http://www.baidu.com/" //第1种

//window.location.href="http://www.baidu.com/" //第2种

//location="http://www.baidu.com/" //第3种

//location.href="http://www.baidu.com/" //第4种

</script>

location.href='http://www.***.com/'; 在当前页面打开
window.open('http://www.***.com/');在新窗口打开

本文链接

[2]自定义jQuery翻页插件

来源: 发布时间: 2013-11-06

第一次写jQuery插件。自己感觉写的也不怎么样。写jQuery插件利用的就是这个东东 jQuery.fn，例如

jQuery.fn.pluginName=function(){};

这个是我写的分页插件的样子

插件通过一个外放的函数来进行翻页操作，无论是点击前进、后退、还是改变页面大小，都会调用该函数。

先看看插件的代码结构

1 (function ($) {
2
3 //存放插件所需的属性字段
4 var PagerFields = {
5 };
6
7 //插件的私有函数
8 function setImageButtonSate() {
9
10
11 }
12
13 //插件的公共函数
14 var methods = {
15 _pagerFields: null,
16 ini: function (options) {
17
18
19 },
20 destory: function (options) {
21 return $(this).each(function () {
22 var $this = $(this); $this.removeData('HGPager2');
23 });
24 }
25 };
26
27 //定义插件
28 $.fn.HGPager2 = function () {
29 var method = arguments[0];
30
31 if (methods[method]) {
32 method = methods[method];
33 arguments = Array.prototype.slice.call(arguments, 1);
34 }
35 else if (typeof (method) == 'object' || !method) {
36 method = methods.ini;
37 }
38 else {
39 $.error('Method ' + method + ' does not exist on jQuery.pluginName');
40 return this;
41 }
42
43 return method.apply(this, arguments);
44 };
45 })(jQuery);

这个结构是按照《深入理解jQuery插件开发》文中的模式(这篇文章个人感觉不错的，一开始学习写插件的朋友建议先看看这篇文章)。整个插件的定义、以及它的私有变量函数都被包在$(function(){});里面了。用这种方式即可以保护插件私有变量的安全性，从另一个角度看也可以避免了变量名重复而导致的麻烦。如果把私有变量放在$.fn.HGPager2 = function () {}这个函数里面的话，会有弊端，要是插件外放了一些函数来获取插件的一些参数信息（如当前的页码，当前页大小诸如此类）就不能获取到确切的参数信息。因为根据js的作用域理论之前构造插件时的参数信息与后来调用函数进入的作用域是不一样的。上面的这种模式，就确保了构造插件与调用插件函数时进入的作用域是一样的。

下面再列举插件的各个部分

这是插件的私有变量，用一个PagerFields类来存放。

var PagerFields = {
pageSize: 10, //页面大小
pageCount: 0,//页面数量
recordCount: 0,//记录总数
currentPage: 0,//当前页码
pagerFunction: null //翻页时触发的调用的函数，用于读取数据。
};

这个是插件的私有函数，用于设置翻页按钮的状态（按钮的图片没有上传，若是把代码直接复制粘贴运行的话没有图片的）

function setImageButtonSate() {

if (PagerFields.currentPage <= 1)
$("#HG_pagerPre").css("backgroundPosition", "-3px -3px"); //grey pre
else
$("#HG_pagerPre").css("backgroundPosition", "-3px -19px"); // black pre

if (PagerFields.currentPage == PagerFields.pageCount)
$("#HG_pagerNext").css("backgroundPosition", "-20px -3px"); //grey next
else
$("#HG_pagerNext").css("backgroundPosition", "-20px -19px");

[3]jQuery Callbacks

来源: 发布时间: 2013-11-06

jQuery.Callbacks是jQuery的多用途核心组件，专职负责回调函数列队管理，其在jQuery的$.ajax() 和 $.Deferred()提供了一些基础功能。

其主要提供了易于管理的批量回调函数处理的功能。

说到批处理，在Javascript库中屡见不鲜：

Baidu七巧板有baidu.each()
Prototype有Enumerable#each
jQuery有.each()

等等…………

为了理解Callbacks函数的实现，我们先来了解下jQuery.each()。

each()

我们可以在jQuery的源文件core.js找到其完整实现：

/*********************
* obj: 队列列表
* callback: 回调函数
* args: 回调函数的参数
*/
jQuery.each = function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj ); //obj是否是类Array对象

//如果有参数
if ( args ) {
//如果obj是类Array对象
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
//否则
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
//如果没有参数，则是一个更为常用的each函数
} else {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
}
}

return obj;
}

借助这个函数我们jQuery实现了其他each函数。如：

$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});

这里的each实际上只是一个没有args回调函数参数的jQuery.each。

简易Callbacks

实际上对简单的回调函数进行变形，我们也能弄成类似回调函数队列的效果：

function dosomething(__callbacks){
//do something......
for(var i = __callbacks.length; i--;){
__callbacks[i]();
}
}

但jQuery.CallBacks可以为我们提供更丰富的功能，和更方便的管理方法。

jQuery.Callbacks(flags)

flags：一个用空格标记分隔的标志可选列表,用来改变回调列表中的行为

once: 确保这个回调列表只执行一次(像一个递延 Deferred).
memory: 保持以前的值和将添加到这个列表的后面的最新的值立即执行调用任何回调 (像一个递延 Deferred).
unique: 确保一次只能添加一个回调(所以有没有在列表中的重复).
stopOnFalse: 当一个回调返回false 时中断调用

callbacks.add(callbacks)

回调列表中添加一个回调或回调的集合。

callbacks：一个函数，或者一个函数数组用来添加到回调列表。

callbacks.remove(callbacks)

删除回调或回调回调列表的集合。

callbacks：一个函数或函数数组，是从回调列表中删除。

callbacks.fire(arguments)

调用所有回调函数，并将arguments传给他们。

arguments：这个参数或参数列表传回给回调列表。

callbacks.disable()

禁用回调列表中的回调。

例子：

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 ); //重复添加
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
*/

optionsCache

我们看到上面的例子中，flags参数是以字符串形式，每个参数以空格间隔，如：

$.Callbacks( "unique memory" );

大家会如何将字符串转成参数呢？

在这里Callbacks会通过正则表达式将字符串转数组，然后再组装成参数对象，如上面的例子，则最后参数对象是：