重构后端模板文件的一种实践

重构后端模板文件的一种实践

后端的动态模板

Java后端通常会使用ftl(freemarker template language)模板文件来动态返回前端页面。这个工作,通常还可以用jspphp文件来实现。但这些动态模板的实现,通常是在已有的html文件上对特定的、需要做动态处理的部分做改写。这对小项目来讲没什么不对。可如果你的页面数量足够多,维护它们将成为一件异常困难的事情。

Nodejs大前端技术

在目前的大前端技术栈下,Nodejs的各种框架让前端开发变得规矩不少:传统前端的html+css+js的技术栈的最大问题在于其模块化、组织能力像是一个教学语言,应有的语句控制和代码复用的技术,都显得苍白无力。

就html的编写来讲,几乎不存在一种类似函数的复用方式,能够简化重复的UI component的生成。你只能不断地去写一些重复的、杂乱的代码。整体上来讲,这不仅难以做后期的维护,也无法轻易地看懂其间的代码逻辑。

一句话来讲,这些代码非常类似于机器代码或者汇编代码。没有高级语言的精准控制和抽象层去对代码做宏观把控。

Pugjs是一个很好的html预处理项目。它的基本想法是:

不要去直接编写“底层”的html代码,而是用自己定义的一套语法去编写pug文件。通过这个pug文件去生成出html代码。

特别地,在它的语法中,你不必再写一大堆的尖括号和与前后呼应的tag。如同Python,仅仅依靠代码的对齐方式,就可以自动识别相应的作用域范围。例如

<div> 
    <ul>
        <li> First tip </li>
        <li> Second tip </li>
        <li> Third tip </li>
    </ul></div>

这样语义简单、语法繁琐的一堆代码,在pug下可以简化为

div
    ul
        li First tip
        li Second tip
        li Third tip

但这还不是最诱人的技术,因为这无非是加入了一些语法糖。最为诱人的是pug提供的函数,它能够定义一个函数去生成某个组件。

例如,如果你需要定义一组table,每个table仅仅是表头或者其中一部分的数据不一样,你该如何处理?传统的方式当然是复制粘贴一堆模板代码,然后一个个地去修改里面的数据。

pug的处理方式就要好太多,完全符合将数据和代码分离的思想。定义函数:

mixin leftbox-gen(dataObj)
        table.table
            thead
                tr
                    th(scope="col") #{dataObj.title}
            tbody
                each area in dataObj.areas
                    tr
                        td
                            .box-title #{area.name}
                            ul
                                each subarea in area.subareas
                                    li
                                        a(id=subarea.id, href=subarea.url) #{subarea.name}

这样就可以根据通过定义json格式的dataObj去引用函数:

+leftbox-gen(cs_leftbox_data)

你通过不同的json数据,就能够生成不同的table出来。这就实现了代码的模块化和以及数据和业务代码的分离。要做出新的table component,你只需要改变数据就可以了。

这样的实现方式在别的高级语言中是很常见的,但是在传统的前端代码中,这常常难以见到。原因就在于,html代码更像是没有抽象层的机器代码,只是一大堆的实际操作,而缺少抽象层的高效管理。

前端预处理和后端动态模板的结合

pug这样优秀的工具,如果能够用来管理后端的ftl模板当然会相当合适。优秀的语法糖、代码模块化、数据和业务逻辑的分离,实在是相当诱人的选择。

但这样的理念真要实施在生产代码中,特别是用来重构已有的legacy code时,就不大容易了。

例如,pug只能生成html代码,且生成出来的位置通常是在一个统一的地方。可ftl代码却分散在各个不同Java工程的不同目录之下。这两者很难统一到一起。

或许一个直接的想法是,不如直接把所有的ftl都放到一个地方,这样就不用把模板语言分散到各个不同项目的不同文件夹里,而难以维护。

但这种方案带来的一个麻烦是,如果真的把后端的ftl文件挪动了位置,那么后端代码的接口部分就不得不做修改。而这样的接口部分其数量并不少。既要做出大量的修改,还要保证它们的正确性,并不是一件轻松的事情。

经过大量的思考和尝试得出的一个解决方案是:

使用Pugjs生成出统一的ftl文件,放在同一个公共资源文件夹下。让每一个具体项目下的ftl文件中,直接include这个公共资源文件夹中ftl内容。

这种做法的一个精妙之处是:它将ftl文件当作函数接口来使用。后端Java代码调用ftl文件可以看作是函数调用。而函数实现并不需要直接放在这个ftl文件里,而是可以放在别的地方做引用。这就把实现和调用部分,通过一个单独的文件分离开了。

这里虽然处理的是后端模板文件和前端的一个结合,但其思想可以利用在别的地方。如果一个模板文件具备了include功能,便可以把模板文件本身当作接口,从而将实现与定义分离。

 

 

近期回顾

为什么程序员需要知道互联网行业发展史
是大家突然变low了吗?
至暗时刻

 

如果你喜欢我的文章或分享,请长按下面的二维码关注我的微信公众号,谢谢!

 

更多信息交流和观点分享,可加入知识星球:

发表评论