<% pagelets.forEach(function(p){ %>
- <%= p.name %> | <%= p.selector %>
<% }) %>
<% pagelets.forEach(function(p){ %>
loading...<%= p.name %>...
<% }) %>
```
## Pagelet里触发其他模块
提供trigger方法，可以触发1个多个多个其他模块，无序并行。结果返回的是Promise
```
'use strict'
const Pagelet = require('../../../../packages/biglet')
const somePagelet1 = require('./somePagelet1')
const somePagelet2 = require('./somePagelet2')
const somePagelet = require('./somePagelet')
module.exports = class MyPagelet extends Pagelet {
constructor () {
super()
this.root = __dirname
this.name = 'pagelet1'
}
fetch () {
// 触发一个模块
this.trigger(new somePagelet())
// 触发一个模块
this.trigger([new somePagelet1(), new somePagelet2()])
}
}
```
不允许，直接
```
return this.trigger([require('./somePagelet1'), require('./somePagelet2')])
```
这样会有缓存，不会根据业务请求来进行不同处理。
也可以强制的fetch里完成
```
'use strict'
const Pagelet = require('../../../../packages/biglet')
const somePagelet1 = require('./somePagelet1')
const somePagelet2 = require('./somePagelet2')
const somePagelet = require('./somePagelet')
module.exports = class MyPagelet extends Pagelet {
constructor () {
super()
this.root = __dirname
this.name = 'pagelet1'
}
fetch () {
// 触发多个模块
return this.trigger([new somePagelet1, new somePagelet2()])
}
}
```
## 生成预览数据
```
app.get('/', function (req, res) {
var bigpipe = new MyBigView(req, res, 'basic/index', { title: "测试" })
var Pagelet1 = require('./bpmodules/basic/p1')
var pagelet1 = new Pagelet1()
var Pagelet2 = require('./bpmodules/basic/p2')
var pagelet2 = new Pagelet2()
bigpipe.add(pagelet1)
bigpipe.add(pagelet2)
// bigpipe.preview('aaaa.html')
bigpipe.previewFile = 'aaaa.html'
bigpipe.start()
});
```
方法
- 设置previewFile
- bigpipe.preview('aaaa.html')
## 获取数据
```js
'use strict'
const Pagelet = require('../../../../packages/biglet')
module.exports = class MyPagelet extends Pagelet {
constructor () {
super()
this.root = __dirname
this.name = 'pagelet1'
this.data = { is: "pagelet1测试" }
this.location = 'pagelet1'
this.tpl = 'p1.html'
this.selector = 'pagelet1'
this.delay = 2000
}
fetch () {
return new Promise(function(resolve, reject){
setTimeout(function() {
// self.owner.end()
resolve(self.data)
}, 4000);
})
}
}
```
这个时候 bp-hello-world 创建的差不多了。这个时候我们需要在 `app/router.js` 中定义路由：
``` js
const bpHelloWorld = require('./bp-hello-world')
...
app.router.get('/hello', bpHelloWorld)
```
这个时候启动程序，然后输入路由后就可以看到我们刚刚完成的一个 bigpipe 页面；
## 特性
- 模块化
- 具有测试性
- 支持mock数据
- 生成html片段（便于对比）
- 提供Scaffold（bigview-cli）
- 提供调试UI（bigconsole）
目前支持五种渲染模式：
+ pipeline: **(默认)** 管线模式：即并行模式， 先写布局，并行请求，并即时渲染；
+ parallel: 并行模式， 先写布局，并行请求，但在获得所有请求的结果后再渲染；
+ reduce: 顺序模式： 先写布局，按照pagelet加入顺序，依次执行，写入；
+ reducerender: 先写布局，然后顺序执行，在获得所有请求的结果后再渲染；
+ render: 一次渲染模式：即普通模式，不写入布局，所有pagelet执行完成，一次写入到浏览器。支持搜索引擎，用来支持那些不支持JS的客户端；
关于 bigview 支持的 mode 可以进入 [bigview-mode]('./packages/bigview-mode') 查看具体文档。
## 生命周期
bigview的生命周期
- before
- .then(this.beforeRenderLayout.bind(this))
- .then(this.renderLayout.bind(this))
- .then(this.afterRenderLayout.bind(this))
- .then(this.beforeRenderPagelets.bind(this))
- .then(this.renderPagelets.bind(this))
- .then(this.afterRenderPagelets.bind(this)
- end
bigview的生命周期精简
- before
- renderLayout
- renderPagelets
- end
biglet的生命周期
- before
- .then(self.fetch.bind(self))
- .then(self.parse.bind(self))
- .then(self.render.bind(self))
- end
## Packages
- bigview [](https://www.npmjs.com/package/bigview)
- biglet [](https://www.npmjs.com/package/biglet)
- bigview-cli [](https://www.npmjs.com/package/bigview-cli)
- bigconsole [](https://www.npmjs.com/package/bigconsole)
- bigview-runtime [](https://www.npmjs.com/package/bigview-runtime)
