02月14, 2012

发布pjax1.1版,包含kissy版本

之前发布了pjax的开源项目,由于大家的需要,近期对pjax进行了重构,并修复了Firefox下的一些bug。同时包含了kissy的版本。

更新功能如下:

1、接口调用的统一

之前的版本对于jquery和qwrap的2个版本的使用方式是不一致的,这次进行了统一,并对参数也进行了规范。具体如下:

$.pjax({
     selector: 'a',
     container: '#container', //内容替换的容器
     show: 'fade', //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可。
     cache: true, //是否使用缓存
     storage: true, //是否使用本地存储
     titleSuffix: '', //标题后缀
     filter: function(){},
     callback: function(){}
 })

各个参数的含义如下:

=== options.selector

给哪些selector绑定pjax事件,一般的为:"a", 如果要去掉一些外连的URL, 这里的selector可以为: "a[href^='http://www.welefen.com']"

,表示域名是www.welefen.com下才有pjax事件(也就是站内)。

=== options.container

内容变换容器,是指哪个容器里的内容发生的变换,如: '#content',

=== options.cache

缓存pjax的内容,对于更新不频繁的页面来说,缓存pjax内容可以减少HTTP请求数

options.cache的值是缓存时间,单位为秒,默认为: 24*3600(一天)

=== options.storage

是否使用本地存储进行内容的缓存,使用本地存储缓存的话即使关闭浏览器后,下次访问如果缓存时间有效的话会直接读取缓存的内容,避免重新请求了。

=== options.titleSuffix

标题后缀。

对于pjax显示标题,首先会从返回内容里查找,如果没有的话,会取当前a标签的title值,并可以指定统一的后缀

=== options.filter

过滤函数,虽然options.selector可以写个比较复杂的选择器,但有时候还要过滤一些URL,如:后台的URL。

这时候就可以使用options.filter函数进行过滤了。如:

{
     fitler: function(href){
        //对于wordpress后台的URL和wp-content里的URL不使用pjax
        if(href.indexOf('/wp-admin') || href.indexOf('/wp-content')){
            return true;
        }
     }
}

对于要过滤掉的URL, 需要返回值为true。

=== options.callback

回调函数,这个函数不同于pjax.start和pjax.end(这2个事件下面描述)事件。

该函数会在每个阶段都会执行,即使pjax发生error的时候,并且会传递一个参数标明当前的状态,如:

{
    callback: function(status){
        var type = status.type;
        switch(type){
             case 'success': ;break; //正常
             case 'cache':;break; //读取缓存
             case 'error': ;break; //发生异常
             case 'hash': ;break; //只是hash变化
        }
    }
}

2、bug修订

1)、修复了对hash处理的bug 2)、修复了FF下回退在前进后的问题

3、代码规范

对代码进行了重构,将不受框架影响的功能放在Util下,并且在不同的框架下,内部实现接口也保持一致。

接口进行规范后,新增一种新框架下的pjax将会非常容易,只要进行一些框架接口调用的改动即可。

4、新加了kissy版本的pjax

感谢junyi提供kissy版的pjax。

由于kissy核心没有引用sizzle, 只支持一些简单的selector, 所以selector参数的值最好只为a, 对于一些不使用pjax的链接,可以通过filter函数参数进行过滤。

代码在https://github.com/welefen/pjax上实时维护。

本文链接:http://welefen.com/post/pjax-version-1-1-and-contain-kissy.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。