同构 javascript 应用开发的最佳实践（Four）

同构

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

developer