美文网首页让前端飞程序员
同构 javascript 应用开发的最佳实践(3)

同构 javascript 应用开发的最佳实践(3)

作者: zidea | 来源:发表于2019-05-08 14:50 被阅读10次
    同构

    上一次我们服务端已经启动了,而且主要是构建流程已经初步搭建出来了。

    所谓同构可以简单理解为服务端和客户端共享代码,虽然前端和后端我们为了同构使用都是 javascript 进行编写。但是两端环境不同,window(浏览器)和 precess(服务器端)。

    现在面临一个问题,既然是代码公用,那我们是先写服务端还是先开发客户端。可能有人会说同时,那就没有必要了。因为另一端可以复用和参考已经开发好一端的代码。

    个人推荐从服务端进行开发,因为服务端开发模式更加固定。


    模板

    创建模板

    模板是现代 web 开发少不了也是绕不开的内容,个人用过很多服务端和客户端模板,前端为用过 handlebars,最近尝试过???先留个伏笔。服务端用过 pug 等等。现在我们用 Mozilla 提供的 nunjucks 。这个模板还没有用过,不得不感叹现在前端技术更新太快。同样一个需求会有很多选择是好事也是坏事,让我们中话费时间在选择上。


    nunjucks
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <p>{{title}} {{author}}</p>
    </body>
    
    </html>
    

    试了试 nunjucks 的 render 方法重视报错找不到模板文件,renderString 方法还好用,还得吐槽一下,部分 js 的库向下兼容不好,过一段时间升一下级,就是各种问题暴露出来,学习一下 nunjucks, 算了还是先往下进行,自己读取文件然后用renderString方法先替一下,实在不行在研究。

    import nunjucks from 'nunjucks';
    import Path from 'path';
    import fs from 'fs';
    
            fs.readFile(Path.join(__dirname,'/index.html'), {encoding:"utf-8"},(err,file)=>{
                if(err){
                    return "hell world";
                }
    
                reply(nunjucks.renderString(file, { title: 'basic angular',author:'zidea' }));
            })
    

    我们把上面代码抽取作为方法 render 来使用

    function render(path,request,reply,context){
        fs.readFile(Path.join(__dirname,path), {encoding:"utf-8"},(err,file)=>{
            if(err){
                return "hell world";
            }
    
            reply(nunjucks.renderString(file,context));
        })
    }
    

    这个 getTutInfo 函数用于将解析 request 对象参数/hello/title/author/ 中将 title 和 author 信息解析出来生成一个对象用于替换模板中的占位符

    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'
        }
    
    }
    

    修改路由让 URL 包含变量用于我们获取使用。

    server.route({
        method:'GET',
        path:'/hello/{title}/{author}',
        handler:function(request,reply){
            render('/index.html',request,reply,getTutInfo(request));
    
        }
    });
    
    developer

    相关文章

      网友评论

        本文标题:同构 javascript 应用开发的最佳实践(3)

        本文链接:https://www.haomeiwen.com/subject/gsmpoqtx.html