同构
今天要做的是首先要整理代码，在现有的代码基础上抽离出一个 Applicatin 类可以作为客户端和服务端共同使用，通过不同的上下文完成不同的工作。
创建 Applicatin 类
export default class Application{
constructor(routes, options){
this.server = options.server;
this.registerRoutes(routes);
}
registerRoutes(routes){
for(let path in routes){
this.addRoute(path, routes[path]);
}
}
addRoute(path, handler){
this.server.route({
path:path,
method:'GET',
handler:handler
});
}
start(){
this.server.start();
}
}
在构造函数中接收两个参数 routes 和 option ，option 提供给 Application 应用一个上下文，如果在服务端我们就提供给一个 server 供 Application 调用。routes 是路由对象，对象每一个属性为 url 而属性值是处理这个 url 的处理方法。
{
url:handler
}
constructor(routes, options){
this.server = options.server;
this.registerRoutes(routes);
}
遍历 routes 对象，将 url和 处理函数传入给 addRoute 进行处理
registerRoutes(routes){
for(let path in routes){
this.addRoute(path, routes[path]);
}
}
将 url 和其对应处理方法传递给 server 也就是将 hapi 的服务器处理，这里不做过多解释，相信大家一看就应该能懂。
addRoute(path, handler){
this.server.route({
path:path,
method:'GET',
handler:handler
});
}
导入创建好的应用类
将代码拆分到 Application 之后，我们来看一看怎么使用他。导入后实例化一个 Application 来替换原有相同功能部分的代码。
import Application from './lib';
初始化一个 application 的实例
const App = new Application({
'/hello/{title}/{author}':function(request,reply){
render('/index.html',request,reply,getTutInfo(request));
}
},{
server:server
})
创建控制器接口
接触过服务端开发的朋友一定对控制器，并不陌生控制器具体作用是来处理路由，为了让我们程序更接近真实，接近于企业级应用，我们这里吧处理函数代码整理出来做为控制器来使用，因为控制器可能也会复用到客户端所以我们先定义一个接口，这里所谓的接口就是一个 Controller 基础类，子类要实现其方法。
export default class Controller {
constructor(context){
this.context = context;
}
index(application, request, reply, callback){
callback(null);
}
toString(callback){
callback(null,'sucess');
}
}
- index 方法是我们路由处理函数
- toString 是我们随后可能只会替换模板部分代码时所用生成 html 字符串的方法，随后通过使用就可以知道他具体怎么用。
const App = new Application({
'/hello/{title}/{author}':Controller
},{
server:server
});
接下来我们创建一个继承（扩展）了 Controller 类的 HelloController 的控制器来处理具体 url。
import Controller from "./controller";
import nunjucks from "nunjucks";
export default class HelloController extends Controller{
toString(callback){
nunjucks.renderString('<p>{{title}} {{author}}</p>',getTutInfo(this.context),function(err,html){
if(err){
return callback(err,null);
}
callback(null,html);
})
}
}
function getTutInfo(request){
console.log(request);
let tutInfo = {
title: 'basic angular',
author:'tina'
}
let title = request.params.title;
let author = request.params.author;
return {
title:title?title:'default title',
author:author?author:'default author'
}
}
import Controller from "./controller";
import HelloController from "./hello-controller";
export default class Application{
constructor(routes, options){
this.server = options.server;
this.registerRoutes(routes);
this.document = options.document;
}
registerRoutes(routes){
for(let path in routes){
this.addRoute(path, routes[path]);
}
}
addRoute(path, controller){
this.server.route({
path:path,
method:'GET',
handler:(request,reply) => {
const controller = new HelloController({
query:request.query,
params:request.params
});
controller.index(this,request,reply,(err)=>{
if(err){
return reply(err);
}
controller.toString((err,html)=>{
if(err){
return reply(err);
}
this.document(this,controller,request,reply,html, function(err,html){
if(err){
return reply(err)
}
reply(html);
});
});
});
}
});
}
start(){
this.server.start();
}
}
上面的代码看起来很复杂，其实并没有你想象的那么复杂，controller.index 方法中调用了 controller.toString 方法，然后最后在调用 this.document (如下)这个具体实现的方法来完成最终渲染。
const App = new Application({
'/hello/{title}/{author}':HelloController
},{
server:server,
document:function(application,controller,request,reply,body,callback){
nunjucks.render("index.html",{body:body},(err,html)=>{
if(err){
return callback(err,null);
}
console.log(html);
callback(null,html);
});
}
});
developer
