您的位置：首页 > Web前端 > Node.js

node.js项目改进之View模块改进

2017-04-02 17:52 501 查看

现在项目View模块的尴尬之处

我们打开routes目录下的index.js模块看一下结构是这样的

var router = require('koa-router')();

router.get('/', async function (ctx, next) {
ctx.state = {
title: 'koa2 title'
};

await ctx.render('index', {
});
})

router.get('/foo', async function (ctx, next) {
await ctx.render('index', {
title: 'koa2 foo'
});
});

module.exports = router;

结构清晰，代码简洁，当用户分别访问/目录和/foo目录时产生分别的对应产生不同的数据并对应·不同的模板文件。

但是我们再看看模板文件views目录下面的

index.jade

extends layout

block content
h1= title
p Welcome to #{title}

乍一看说是什么鬼，这提莫也是模板文件，不过仔细瞧瞧其实很有规律可循的extends 应该是引入/继承外部文件，block content，应该是替代内容部分，下面的就是内容，然后#{title}是变异成index.js传输来的title数据。但是不管他再多直接了当，简洁易懂，向来我们编写前端页面和后端都是分离的，前端我们编写出来的都是一个完成的html页面才是，难道我们还要根据这个html页面的结构再翻译成这么个.jade文件吗？我感觉就算是自己写前端页面写成这样也会很费脑子的，所以我们要用其他的模块替换掉。

关于view的模块是很多的，最终决定使用Nunjucks

Nunjucks

Nunjucks是Mozilla开发的一个纯JavaScript编写的模板引擎

接下来就是我们的改造过程，首先，要去除原来的koa-views模块

在app.js中去掉const views = require(‘koa-views’);这句话

和

app.use(views(__dirname + ‘/views’, {

extension: ‘jade’

}));

这句话，也就把入口的模块给去除了。

然后我们在package.json文件中去掉依赖包的索引”koa-views”: “^5.2.1”这句，放入nunjucks的索引

“nunjucks”:”^3.0.0”这句话，之后我们在bash或终端的本目录下

npm i一下。我们的nunjucks依赖包就装好了。

之后我们在项目目录添加一个叫app_need的目录用于存放我们的添加的模块。写入一个叫view.js的文件

'use strict'
const nunjucks = require('nunjucks');

function createEnv(path, opts) {
var
autoescape = opts.autoescape && true,
noCache = opts.noCache || false,
watch = opts.watch || false,
throwOnUndefined = opts.throwOnUndefined || false,
env = new nunjucks.Environment(
new nunjucks.FileSystemLoader('views', {
noCache: noCache,
watch: watch,
}), {
autoescape: autoescape,
throwOnUndefined: throwOnUndefined
});
if (opts.filters) {
for (var f in opts.filters) {
env.addFilter(f, opts.filters[f]);
}
}
return env;
}

var env = createEnv('views', {
watch: true,
filters: {
hex: function (n) {
return '0x' + n.toString(16);
}
}
});
module.exports=env;

这个模块就可以被需要展示页面的模块所调用然后被使用。

最后，我们暂时的目录结构MVC结构还不是很清晰，展现视图的控制器和渲染视图的模型都是写在路由目录routes下面的，所以我们暂时就在路由模块中引入这个模块并调用，之后细化结构的时候再分离。以routes index.js的/目录响应为例：

原来的代码是这样的

var router = require('koa-router')();

router.get('/', async function (ctx, next) {
ctx.state = {
title: 'koa2 title'
};
await ctx.render('index', {
});
})

我们要引入我们自己的模块于是要变成这样

var router = require('koa-router')();
var view = require('../app_need/view');
router.get('/', async function (ctx, next) {
var v = view.render('index.html', { name: '小明' });
await function (ctx, v) {
ctx.body = v;
}(ctx,v);
});

基本的视图就有了，我们在views下面写入一个文件叫index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{name}}
</body>
</html>

最后启动程序

localhost:3000

就会出现一个小明。

鼓掌。

此外，关于nunjucks的模板的写法直接查资料就好了在这里就不写了。

最终项目地址：https://github.com/jijuxie/koa2_all.git

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： node.js

相关文章推荐

新的分享

章节导航