Wondering what’s next for npm?Check out our public roadmap! »

    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

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

    Install

    npm i yizhi-jsx

    DownloadsWeekly Downloads

    2

    Version

    1.2.6

    License

    ISC

    Last publish

    Collaborators

    • avatar