在实际工作中,越来越多的新项目开始用go语言进行开发,如果是前后端分离的项目,对于前端开发人员来说,后端使用php或者go亦或者node等影响不是特别大。但如果是项目对SEO\兼容性有要求、需要采用同步渲染的方式的话,就少不了与golang的模板引擎打交道。于是问题来了,该选用哪个模板引擎呢?

如果你是个python使用者,那么pongo2这个模板引擎应该不错。又或者你习惯mustache语法,那么可以看看mustache,当然如果考虑性能,习惯比较原生的语法的,hero这个模板引擎应该是个不错的选择。

但如果你是个php使用者,写惯了smarty,而且服务端更喜欢使用html/template官方模板语言包的话,FET应该就是个不错的选择了。

官方html/template包提供的模板功能要有的基本都有了,BUT:

1、不支持表达式,比如判断a>10 && a<100,你得这样写:and (gt a 10) (lt a 100),感觉一下子从写高级语言降级到底层语言的感觉。

2、作用域范围:define和block为模板继承、包含提供了支持,可是其作用域均限制在template引用时提供的唯一参数内。这表示你的自定义变量要传递进去,必须自定义一个方法可以将自定义变量和页面数据合并,然后将合并的数据作为参数传递,最终你的代码大概就长这样了:{{template "xxx" (func . "a" $a "b" $b)}},其中func是你自定义的合并数据的方法,a和b是你想传递到define模块内的自定义变量。

3、多层级数据判断:官方并没有提供一个简单的方法来判断多层级数据字段是否存在,比如a.b.c.d,直接用{{if a.b.c.d}}{{a.b.c.d}}{{end}},如果数据在a后面空了,页面就会停止渲染。所以为了兼容,可能会看到这样的代码:{{if a}}{{if a.b}}{{if a.b.c}}{{if a.b.c.d}}{{a.b.c.d}}{{end}}{{end}}{{end}}{{end}},有点前端回调地狱的感觉。

4、基础方法太少:基本的数学运算符都没有内置函数提供支持,更不用说一些常用的截字、原html代码输出、时间格式处理等等的了。

5、语法高亮:对于开发者,特别是习惯于用vscode/sublime等的前端同学,没有对应支持的语法高亮插件,代码看起来实在费力,很影响开发体验。

6、渲染模板时的parseFiles方法作为实现继承、包含模板的主要api,居然要提供包含或继承模板的模板路径,这让前后端对模板的命名完全耦合了。所以这个api显得比较鸡肋,大部分都靠parseGlob方法来加载所有模板,不知道对性能有没有影响,至少看上去它不是按需加载的。

以上的这些问题很容易就让人从了解到放弃了,所以经常看到有人在吐槽go的时候,都会加一条,模板很难用,也就不足为怪了。

哪里有不便,哪里便会创造需求。这便是会出现FET的背景。

FET使用smarty基本完全一致的语法,并将整个代码构建成html/template原生代码。针对以上遇到的问题,一一做了以下处理。

1、添加了对表达式语法的支持,所以现在直接写 a > 10 && a < 100,忘记那种别扭的函数式嵌套写法吧。

2、继承使用"extends"、包含使用"include",最终所有的模板文件都只会生成唯一一个文件,所有include的代码都会直接包含在当前页面文件里,所以这样在include父文件里声明的变量都可以直接使用,同时include内的模板通过对变量添加特殊后缀实现对父模板的隔离。

3、多层级判断:添加了empty方法和自定义的index方法,这样获取{{a.b.c.d}}时,即使不做判断,也不会阻断输出,当然其它的一些逻辑判断还是需要借助empty方法等。

4、基础方法:添加了基础的运算符方法,这样你的表达式里就可以使用 (a + 1) / (b - 2) * (c - 3) ** (d % 4) 这些复杂的表达式了。另外,常见的截字方法truncate,字符串拼接concat,数字千分位number_format等等都内置在内了。

5、语法高亮:本想自己写个vscode插件的,发现太费事,就直接用对应的smarty插件了

6、渲染模板:由于最终只有一个文件,所以用parseFile或者内置的Display方法都可以,当然如果你是用的parseGlob,注意fet实例化的时候将Glob参数设为true。这样编译的时候就会将当前文件的相对路径做为define的标识名称,比如pages/index.html,编译完后会生成{{define "pages/index"}}{{end}。这样按规则使用就可以了。

7、扩展支持:

(1)原生的html/template里没有for标签,在fet里做了支持。不过需要注意的是,foreach和for里都不能使用break和continue关键字,因为原生的range也不支持。这个后续将继续思考有没有好的解决方案。

(2)基于define实现了capture,但是不支持assign到变量里,或者append到数组里

(3)include标签里也支持添加属性变量

(4)数字可以写成0b001,0o777,0xffffff,1e10等形式

(5)字符串里支持变量转义符:如{{$say = "hello"}}{{"`$say` world!"}}将输出hello world!

更多的功能仍在完善中。

目前项目在github的地址是:https://github.com/fefit/fet

也提供了简单的模板实时编译命令行fetc,可以通过执行`fetc init`方法来初始化项目配置,通过`fetc watch`命令来监控项目文件变更,实时编译成html/template代码。

如果您正好需要用到FET的功能,欢迎试用,star!

或者遇到问题、有好的意见也欢迎您提issue。先感谢支持了!