今天要做的是首先要整理代码，在现有的代码基础上抽理出一个 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('

{{title}} {{author}}

',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);        });    }});