asta4d的模板文件中不允许任何动态代码,一个asta4d的模板永远是一个标准的html文件,任何前端工程师都轻松的维护asta4d的模板文件。这是asta4d最初设计思想的体现--对设计师友好。源于asta4d的这个特性,使得我们减少了至少90%前端重构的工作量。
1. 在模板中声明snippet class
下面是一个模板文件片段:
<section> <article> <div afd:render="SimpleSnippet">dummy text</div> <afd:snippet render="SimpleSnippet:setProfile"> <p id="name">name:<span>dummy name</span></p> <p id="age">age:<span>0</span></p> </afd:snippet> </article> </section>
首先,注意div标签中引入的afd:render属性,该属性声明了负责具体渲染逻辑的java类,我们通常称之为snippet class。除了afd:render属性,asta4d同时允许通过afd:snippet标签来声明snippet class。通过snippet声明,渲染逻辑被隔离到独立的java实现中,而对开发人员来说,他们不需要学习任何新的模板语言,他们可以用他们已经熟练掌握的具有强大能力的java语言来完成所有的渲染逻辑,没有学习成本,没有魔术代码,只有简洁明快的java代码。
2. snippet class的实现
public class SimpleSnippet { public Renderer render(String name) { if (StringUtils.isEmpty(name)) { name = "Asta4D"; } Element element = ElementUtil.parseAsSingle("<span>Hello " + name + "!</span>"); return Renderer.create("*", element); } public Renderer setProfile() { Renderer render = new GoThroughRenderer(); render.add("p#name span", "asta4d"); render.add("p#age span", 20); return render; } }
注意snippet实现中renderer的调用,renderer通过css selector来声明渲染对象,并将渲染内容同时作为参数传递给renderer。上面的模板文件和snippet将会得到下面的渲染结果:
<section> <article> <span>Hello Asta4D</span> <p id="name">name:<span>asta4d/span></p> <p id="age">age:<span>20</span></p> </article> </section>
3. 总结
asta4d在html模板文件中引入了额外的4个tag:afd:extension, afd:block, afd:embed, afd:snippet,asta4d对html模板文件的侵入到此为止,而这区区4个tag,能够被大多数的html编辑器正常处理,因此,asta4d的模板对前端工程师是极度友好的。另一方面,可以看到,所有的渲染逻辑都是通过java代码实现,后端工程师可以非常自然的将渲染逻辑与后端调用结合在一起,不再有魔术代码,也不再有额外的学习成本,对后端工程师来说,这意味着生产力的极大提升。