同构 javascript 应用开发的最佳实践（3）
2019-05-08 本文已影响10人
zidea
同构
上一次我们服务端已经启动了，而且主要是构建流程已经初步搭建出来了。
所谓同构可以简单理解为服务端和客户端共享代码，虽然前端和后端我们为了同构使用都是 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
