BigPipeClient解释并呈现Pagelet的客户端可以是javascript或服务器端语言编写如c#其实重点在于模块化以及模块化之后随之带来的好处功能开发分工页面级别的功能隔离、功能降级等都可以以模块为单位进行从而简化web项目的模型在这个基础上再构建一系列的开发框架来支撑这种开发模式即可先看一下Pagelet的定义1: /// summary2: /// 模块3: /// /summary4: public class Pagelet5: {6: /// summary7: /// 模块标识8: /// /summary9: public string Name { get; set; }10: /// summary11: /// 获取数据Url12: /// /summary13: public string Url { get; set; }14: /// summary15: /// 目标容器16: /// /summary17: public string Target { get; set; }18: /// summary19: /// HTML内容模板20: /// /summary21: public string Template { get; set; }22:23: //and so on24: }它包含了模块的Html模板内容呈现的位置获取数据的地址等这是一个pagelet实例然后编写一个页面把这个页面需要的模块都输出到页面中1: %foreach (var let in ViewData[pagelets] as IEnumerableBigPipe.Controllers.Pagelet)2: { %3: script typetext/javascript4: $(function () {5: %client.add( new JavaScriptSerializer().Serialize(let) ); %6: });7: /script8: %}%BigPipe.js客户端的简易实现1: (function ($) {2:3: //pagelets holder4: var pagelets {};5: //bipipe6: var bigpipe function () { this._init.apply(this, arguments); };7: bigpipe.prototype {8: _init: function () { },9: add: function (let) {10: pagelets[let[Name]] let;11: $.getJSON(let[Url], function (data) {12: $(# let[Target]).append(let[Template]13: .replace(${name}, data[name])14: .replace(${description}, data[description]));15: });16: }17: }18: window.client new bigpipe();19: })(jQuery);调用add的时候将pagelet加入客户端缓存同时执行ajax请求数据并和html模板装配后呈现到指定位置本文实现了两种呈现方式的pagelet服务器端并行push和客户端pull方式下图为使用bigpipe.js客户端进行ajax pull方式拉取数据并呈现pagelet生成的pagelet内容如下下图为使用服务器端并行push多个pagelet内容并呈现可以看到模块并不会按顺序加载而是根据各自加载情况决定顺序这样可以使得更快被处理完的模块立刻被呈现给用户原理就是对respone并行写入内容并立刻flush到客户端1: context.Response.Write(string.Format(2: script type\text/javascript\client.add({0});/script3: , new JavaScriptSerializer().Serialize(let)));4: context.Response.Flush();本文只简易实现了pagelet的处理模型描述一下思路相信有思路之后针对各自的应用或项目情况编写一套合适模块化框架会有些益处的在完成bigpipe加载后pageCache以及记录回放等在浏览器中的优