您的位置：首页 > 其它

快速实现一个简单的bigpipe模型

2011-01-18 22:17 405 查看

先描述几个概念：

Pagelet：页面功能模块化的单位

BigPipeClient：解释并呈现Pagelet的客户端，可以是javascript或服务器端语言编写（如c#）

其实重点在于模块化以及模块化之后随之带来的好处，功能开发分工，页面级别的功能隔离、功能降级等都可以以模块为单位进行，从而简化web项目的模型，在这个基础上再构建一系列的开发框架来支撑这种开发模式即可

先看一下Pagelet的定义：

///<summary>

///模块

///</summary>

publicclassPagelet

///<summary>

///模块标识

///</summary>

publicstringName{get;set;}

///<summary>

///获取数据Url

///</summary>

publicstringUrl{get;set;}

///<summary>

///目标容器

///</summary>

publicstringTarget{get;set;}

///<summary>

///HTML内容模板

///</summary>

publicstringTemplate{get;set;}

//andsoon

它包含了模块的Html模板内容，呈现的位置，获取数据的地址等，

这是一个pagelet实例，

然后编写一个页面，把这个页面需要的模块都输出到页面中：

<%foreach(varletinViewData["pagelets"]asIEnumerable<BigPipe.Controllers.Pagelet>)

{%>

<scripttype="text/javascript">

$(function(){

<%="client.add("+newJavaScriptSerializer().Serialize(let)+");"%>

});

</script>

<%}%>

(function($){

//pageletsholder

varpagelets={};

//bipipe

varbigpipe=function(){this._init.apply(this,arguments);};

bigpipe.prototype={

_init:function(){},

add:function(let){

pagelets[let['Name']]=let;

$.getJSON(let['Url'],function(data){

$('#'+let['Target']).append(let['Template']

.replace('${name}',data['name'])

.replace('${description}',data['description']));

});

window.client=newbigpipe();

})(jQuery);

调用add的时候将pagelet加入客户端缓存，同时执行ajax请求数据并和html模板装配后呈现到指定位置

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

本文实现了两种呈现方式的pagelet：服务器端并行push和客户端pull方式

下图为使用bigpipe.js客户端进行ajaxpull方式拉取数据并呈现pagelet

生成的pagelet内容如下：

下图为使用服务器端并行push多个pagelet内容并呈现，可以看到模块并不会按顺序加载，而是根据各自加载情况决定顺序，这样可以使得更快被处理完的模块立刻被呈现给用户：

原理就是对respone并行写入内容并立刻flush到客户端：

context.Response.Write(string.Format(

"<scripttype=\"text/javascript\">client.add({0});</script>"

,newJavaScriptSerializer().Serialize(let)));

context.Response.Flush();

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

本文只简易实现了pagelet的处理模型，描述一下思路，相信有思路之后针对各自的应用或项目情况编写一套合适模块化框架会有些益处的

在完成bigpipe加载后，pageCache以及记录回放等在浏览器中的优化技巧也是很有意思的，之后会尝试做一些实现

DEMO源码可以在这里下载：https://github.com/wsky/wsky.github.com/tree/master/bigpipe

DEMO中用到简单并行实现：/article/5273950.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航