友好的开发框架-Asta4D（3）：与模板分离的渲染逻辑

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代码实现，后端工程师可以非常自然的将渲染逻辑与后端调用结合在一起，不再有魔术代码，也不再有额外的学习成本，对后端工程师来说，这意味着生产力的极大提升。