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 = const path = let app = let yizhiJsx = appappapp app app
接下来你可以在项目中建立views目录,并在views目录下建立index.jsx文件 (模板文件的后缀名必须是jsx),文件内容示例如下:
//渲染body,这是一个组件,组件名称首字母必须是大写,否则将会解析成普通html标签let { let users theme = props return <body> <div> <div ="title">用户列表</div> <table => <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> users </table> </div> </body> } //默认导出的函数将作为入口函数module { //“+”后面的内容其实最终也是一个字符串,因此,在字符串和组件直接进行拼接是没任何问题的 return "<!doctype html>" + <html> <head> <meta ="UTF-8" /> <title>用户列表</title> </head> /*这里渲染了页面的body*/ <PageBody = ="dark" /> </html> }
上面是一个demo,使用的是jsx语法,如果你没用过jsx, 你可以看看React教程, 当然,这里的jsx和react还是有相当大的差别的, 因为react是浏览器渲染,而yizhi-jsx是服务器渲染, 二者有着本质的区别。
模板的导入
模板的引入和普通js的引入的用法是一样的,唯一的区别就是, 模板引入必须加上后缀“.jsx”来标识模板,下面的用法都是合法的, 更多的就不做介绍了,请自行 Google es6 教程。
//使用requirelet MyTable = //使用es6的import//引入多个
举几个错误的例子
//不能直接这样使用,需要加后缀.jsxlet MyTable = //这样的导入虽然没有错误,但是是无效的
模板的导出
模板的导出和js的导出完全一致,就不多说了,举几个简单例子:
//定义一个简单的组件,当然,这个组件和div没任何区别let <div ...props>children</div>//下面的几种导出方式可以任选一种//默认导出moduleexports = MyComp//可以导出为对象moduleexportsMyComp = MyCompexportsMyComp = MyComp
其他
如果有其他问题,可以伊妹儿我lujiankang@outlook.com
另外,本来想用英文写的,但是英语水平太菜了,写出来别人看不懂, 希望有人帮忙翻一下文档。 ('_`)!!