Skip to content

Latest commit

 

History

History
196 lines (147 loc) · 5.62 KB

README.md

File metadata and controls

196 lines (147 loc) · 5.62 KB

pagelet.js

scrat seo模式的pagelet框架

API

pagelet.autoload();

调用这个函数,阻止页面的a标签的跳转,变成自动pagelet加载

pagelet.on(type, callback)

事件绑定

事件列表:

  • pagelet.EVENT_BEFORE_LOAD pagelet加载前事件
  • pagelet.EVENT_LOAD_ERROR pagelet加载失败事件
  • pagelet.EVENT_LOAD_COMPLETED pagelet加载完成事件
  • pagelet.EVENT_GO_ERROR pagelet跳转错误事件
  • pagelet.EVENT_BACK_ERROR popstate跳转错误事件
  • pagelet.EVENT_GO_LOADED pagelet跳转加载完毕事件
  • pagelet.EVENT_LOAD_PROGRESS pagelet加载进度事件
  • pagelet.EVENT_BEFORE_EXEC_SCRIPTS pagelet执行页面脚本开始前事件
  • pagelet.EVENT_AFTER_EXEC_SCRIPTS pagelet执行页面脚本完成后事件
  • pagelet.EVENT_BEFORE_INSERT_HTML pagelet处理html前事件
  • pagelet.EVENT_AFTER_INSERT_HTML pagelet处理html后事件
  • pagelet.EVENT_BEFORE_GO pagelet跳转前事件
  • pagelet.EVENT_AFTER_GO pagelet跳转后事件
  • pagelet.EVENT_GO_COMPLETED pagelet跳转完成事件

示例(实现一个加载进度条):

var timer, last,
    wrapper = $('.progress'), inner = $('#progress-inner');

pagelet.on(pagelet.EVENT_BEFORE_LOAD, function(){
    last = Date.now();
    wrapper.css('display', 'block');
    clearTimeout(timer);
});

pagelet.on(pagelet.EVENT_LOAD_PROGRESS, function(data){
    var e = data.event;
    var percent = e.loaded / e.total * 100;
    inner.width(percent + '%');
});

pagelet.on(pagelet.EVENT_LOAD_COMPLETED, function(){
    inner.width('100%');
    var delay = 200;
    var delta = Date.now() - last;
    if(delta < 300){
        delay += 300 - delta;
    }
    timer = setTimeout(function(){
        wrapper.css('display', 'none');
        inner.width(0);
    }, delay);
});

pagelet.off(type, callback)

解除事件绑定

pagelet.emit(type, data)

事件派发

示例:

pagelet.emit(pagelet.EVENT_BEFORE_LOAD, { options: options });

pagelet.pushState(options)

压栈一个历史记录

示例:

var options = {
    url: '/news?p=123',
    pagelets: ['list', 'hot'],
    success: function(data, done){
        // 在pagelet加载完成后务必调用一下push函数
        push(data.title);
    }
};
// 在load之前调用pushState,这样可以让url先发生变化
var push = pagelet.pushState(options);
pagelet.load(options);

pagelet.load(options);

加载一个pagelet

options中的参数:

  • url String 要加载的页面地址
  • pagelets String|Array 要加载的pagelet的id,可以是id数组,也可以是用,分隔的字符串
  • success Function 完成pagelet资源加载后的回调函数
  • progress Function|null ajax加载过程中的progress函数
  • complete Function|null ajax加载完成回调
  • error Function|null ajax加载失败回调

示例:

var options = {
    url: '/news?p=123',
    pagelets: ['list', 'hot'],
    success: function(data, done){
        // 这里写业务逻辑处理html插入,其中:
        // data.html,是一个k-v对象,k是pageletId,v是html片段
        // data.data,是页面用{% datalet name="xxx" value="xxx" %} 收集的数据
        // 完成html插入之后,如果本函数的返回值不是false,框架会自动执行pagelet中的脚本,
        // 有时候我们插入html可能要延迟一下,没问题,让当前函数返回false,然后在后续合适
        // 的时机中调用一下done函数,框架会完成页面脚本执行的工作
    }
};
pagelet.load(options);

pagelet.go(options)

加载pagelet并将url放入历史记录

options与pagelet.load函数一样,但多了几个参数:

  • replace Boolean 历史记录是否为replace替换,默认是false,如果设置为true,将不会产生新的历史
var options = {
    url: '/news?p=123',
    pagelets: ['list', 'hot'],
    replace: true,
    success: function(data, done){
        // 这里写业务逻辑处理html插入,其中:
        // data.html,是一个k-v对象,k是pageletId,v是html片段
        // data.data,是页面用{% datalet name="xxx" value="xxx" %} 收集的数据
        // 完成html插入之后,如果本函数的返回值不是false,框架会自动执行pagelet中的脚本,
        // 有时候我们插入html可能要延迟一下,没问题,让当前函数返回false,然后在后续合适
        // 的时机中调用一下done函数,框架会完成页面脚本执行的工作
    }
};
pagelet.go(options);

pagelet.router(pattern, callback)

在pagelet.go和history前进后退过程中拦截url,实现路由控制

示例:

pagelet.router('/:page', function(ctx, options, event, next){
    if(/^\w+$/.test(ctx.page)){
        $('.nav a[data-name]')
            .removeClass('active');
        $('.nav a[data-name="' + ctx.page + '"]')
            .addClass('active');
    }
    // 调用next函数,可以让路径继续进行,不会影响默认事件
    // 如果不调用,可以在这里处理页面状态切换
    next();
});

pagelet.autoload(defaultPagelet, eventType);

拦截A标签跳转

务必设置 defaultPagelet 参数,就是最外层的pagelet id,这样在某些历史记录不存在的时候,框架可以自动切换最父级的pagelet,页面切换能保证准确。eventType是拦截事件的类型,默认是 click 事件

示例:

pagelet.autoload('layout', 'touchend');

pagelet.timeout(time);

设置pagelet加载资源或者pagelet页面的超时时间,单位是ms,默认值为 600000,即1分钟

示例:

pagelet.timeout(10*1000);