❤
npm
Sign UpSign In

yizhi-jsx

1.2.6 • Public • Published

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

其他

如果有其他问题，可以伊妹儿我lujiankang@outlook.com

另外，本来想用英文写的，但是英语水平太菜了，写出来别人看不懂， 希望有人帮忙翻一下文档。 ('_`)!!

Readme

Keywords

Package Sidebar

Install

npm i yizhi-jsx

Repository

github.com/kangkang520/yizhi-jsx

Homepage

github.com/kangkang520/yizhi-jsx#readme

Weekly Downloads

11

Version

1.2.6

License

ISC

Last publish

Collaborators

  • yizhi
Try on RunKit
Report malware