Yizhi-jsx NPM | npm.io

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)

修改了HTML中结束标签的bug

了解一下

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），文件内容示例如下：

//渲染body，这是一个组件，组件名称首字母必须是大写，否则将会解析成普通html标签
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 教程。

//使用require
let MyTable = require('./comp/table.jsx')
//使用es6的import
import MyTable from './comp/table.jsx'
//引入多个
import MyTable,{Tr, Td} from './comp/table.jsx'

举几个错误的例子

//不能直接这样使用，需要加后缀.jsx
let MyTable = require('./comp/table')
//这样的导入虽然没有错误，但是是无效的
require('./comp/table.jsx')

模板的导出

模板的导出和js的导出完全一致，就不多说了，举几个简单例子：

//定义一个简单的组件，当然，这个组件和div没任何区别
let MyComp = (props, ...children) => <div {...props}>{children}</div>
//下面的几种导出方式可以任选一种
//默认导出
export default MyComp
module.exports = MyComp
//可以导出为对象
export {
	MyComp,
	//其他要导出的变量、函数、类等等
}
module.exports.MyComp = MyComp
exports.MyComp = MyComp