Java前端模版介绍——FreeMarker
模版对于前后端开发的分离十分重要，通俗的说，模版就是一种语法规则，前端在开发时只需要关注自己的部分，如样式、结构等。前端开发完成后，在需要进行后段数据渲染的时候，直接按照模版的特定规则，修改HTML代码的数据部分就可以了。这样可以使得前后端开发更高效，避免了前端依赖后端的情况。
FreeMarker就是这样的一个模版，它针对的后台是Java。其工作流程为，前端通过HTML文件改造的FreeMarker模版，交给后台人员后，后台人员放入项目中即可直接渲染数据。
一、基本语法
FreeMarker模版的后缀名为.ftl，是通过.html文件改造的，下面就是一个例子：
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Welcome ${user}!</h1>
<p>Our latest product:
<a href="${latestProduct.url}">${latestProduct.name}</a>!
</body>
</html>对于数据的结构，FreeMarker需要后台提供树形的数据结构，所以在上面我们可以看到latestProduct.url，表示url存在于latestProduct这个父数据下。关于FreeMarker的数据结构还有更深层次的问题，这里就不展开介绍了。基本使用只要知道这些就够了。
二、指令
在FreeMarker中，有一些指令，方便我们进行一些模版的渲染，内置的指令用<#>进行引用。下面介绍常用的FreeMarker内置指令。
1.if
通过条件判断跳过一些部分，下面的例子在user是Big Joe时显示our beloved leader
<h1>Welcome ${user}<#if user == "Big Joe">, our beloved leader</#if>!</h1>还可以结合#else或者#elseif使用：
<#if animals.python.price < animals.elephant.price>
Pythons are cheaper than elephants today.
<#else>
Pythons are not cheaper than elephants today.
</#if>2.list
显示一组内容，用法和其他语言框架等很相似
<table border=1>
<#list animals as animal>
<tr><td>${animal.name}<td>${animal.price} Euros
</#list>
</table>有时数据内容为空，为了在数据内容为空时不输出任何东西，可以和#item配合使用：
<#list misc.fruits>
<ul>
<#items as fruit>
<li>${fruit}
</#items>
</ul>
</#list>#list配合#spe可以定义各个内容之间的分隔符
<p>Fruits: <#list misc.fruits as fruit>${fruit}<#sep>, </#list>上面的输出结果为：
<p>Fruits: orange, banana
#list也可使用#else，用于当没有数据时输出其他内容：
<p>Fruits: <#list misc.fruits as fruit>${fruit}<#sep>, <#else>None</#list>3.include：类似于文件引入，引入其他文件的html模版
<#include "/copyright_footer.html">三、使用NodeJS在前端自主调试FreeMarker
前面的内容已经将FreeMarker的基本知识介绍完了，了解了上面内容，使用FreeMarker处理一些常见场景都不会出现问题了。但是当使用了模版之后，如果我们想调试渲染后的模版样式会非常麻烦。这意味着我们需要安装Java的一系列环境，还要使用后台代码等等。但是作为前端开发，这对我们来说代价很高。
其实在Node上就有专门用来调试FreeMarker模版的模块。它可以进行全部的Java调试，我们只需要在前端就可以摸你进行调试了。这个模块的github地址为：https://github.com/ijse/freemarker.js。
使用该模块的方法和使用其他node模块一样，通过npm进行安装。之前，先要安装一下Java环境，虽然这也需要安装Java环境，但相比我们还要下载各种IDE要轻松的多。
编写一个test.js，内容如下：
var FreeMarker = require(“free marker.js”);
var fm = new FreeMarker({
viewRoot: path.join(__dirname + “/view”) //配置模版目录
})
fm.render(“tpl.ftl”, dataObject, function(err, html, output){
fs.writeFile(“output.html”, html); //将文件用数据渲染并输出新的文件
})