YIZHI-JSX express 模板引擎
新动态
1.2.1 (2017-09-30)
- 增加style支持传递Object类型的数据,如:<div style={{fontSize:30, color:'red'}}>Hello</div>,当然,也可以写字符串
1.2.2 (2017-09-30)
了解一下
yizhi-jsx 模板引擎使用jsx语法进行express模板的渲染,
得力于强大的jsx语法支持以及es6语法支持,使用yizhi-jsx模板引擎能够通过jsx语法进行HTML的生成。
yizhi-jsx 模板引擎是一个轻量级的模板引擎,整个引擎的主要代码不到200行,
通过内存缓存,能够实现高速渲染。
开始使用
首先你需要创建一个express项目,然后将yizhi-jsx模板引擎加载到express中即可,
相关express模板引擎的内容参考官网在express中使用模板引擎,
下面是一个简单例子
const express = require('express')
const path = require('path')
let app = express()
let yizhiJsx = require('yizhi-jsx')
app.set('views', path.join(__dirname, './views'))
app.engine('.jsx', yizhiJsx('development'))
app.set('view engine', 'jsx')
app.get('/', (req, res, next) => {
res.render('index', {
users: [
{ id: 1, name: '王小明', age: 20, gender: '男' },
{ id: 2, name: '李小花', age: 22 },
{ id: 3, name: '韩梅梅', age: 25, gender: '女' },
{ id: 4, name: '张敏敏', age: 18, gender: '女' },
{ id: 5, name: '吴自有', age: 23, gender: '男' }
]
})
})
app.listen(3000)
接下来你可以在项目中建立views目录,并在views目录下建立index.jsx文件
(模板文件的后缀名必须是jsx),文件内容示例如下:
let PageBody = (props) => {
let { users, theme } = props
return (
<body>
<div>
<div className="title">用户列表</div>
<table className={(theme == "dark") ? 'tbl-dark' : 'tbl-light'}>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
{users.map(user => <tr>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.age}</td>
<td>{user.gender || '未知'}</td>
</tr>)}
</table>
</div>
</body>
)
}
module.exports = function (data) {
return "<!doctype html>" + (
<html>
<head>
<meta charset="UTF-8" />
<title>用户列表</title>
</head>
{/*这里渲染了页面的body*/}
<PageBody users={data.users} theme="dark" />
</html>
)
}
上面是一个demo,使用的是jsx语法,如果你没用过jsx,
你可以看看React教程,
当然,这里的jsx和react还是有相当大的差别的,
因为react是浏览器渲染,而yizhi-jsx是服务器渲染,
二者有着本质的区别。
模板的导入
模板的引入和普通js的引入的用法是一样的,唯一的区别就是,
模板引入必须加上后缀“.jsx”来标识模板,下面的用法都是合法的,
更多的就不做介绍了,请自行 Google es6 教程。
let MyTable = require('./comp/table.jsx')
import MyTable from './comp/table.jsx'
import MyTable,{Tr, Td} from './comp/table.jsx'
举几个错误的例子
let MyTable = require('./comp/table')
require('./comp/table.jsx')
模板的导出
模板的导出和js的导出完全一致,就不多说了,举几个简单例子:
let MyComp = (props, ...children) => <div {...props}>{children}</div>
export default MyComp
module.exports = MyComp
export {
MyComp,
}
module.exports.MyComp = MyComp
exports.MyComp = MyComp
其他
如果有其他问题,可以伊妹儿我lujiankang@outlook.com
另外,本来想用英文写的,但是英语水平太菜了,写出来别人看不懂,
希望有人帮忙翻一下文档。 ('_`)!!