友好的开发框架-Asta4D（5）

原帖地址：http://www.cnblogs.com/xzer/archive/2013/05/25/3098224.html

继续介绍Asta4D的主要特点和功能。

 

2. 分离的模板和渲染逻辑

asta4d的模板文件中不允许任何动态代码，一个asta4d的模板永远是一个标准的html文件，任何前端工程师都轻松的维护asta4d的模板文件。这是asta4d最初设计思想的体现--对设计师友好。源于asta4d的这个特性，使得我们减少了至少90%前端重构的工作量。

 

我们来看看示例代码，下面是一个模板文件片段：

<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代码。

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>

 

最后说明一下，本节中引入的afd:snippet标签，和上一节介绍的afd:block以及afd:extenion一起，这三个标签是asta4d在一个标准html实现的模板中引入的额外标记，这样的额外标记能够被大多数html编辑器正常处理，基本上，这是asta4d给前端设计师带来的唯一的微不足道的称不上麻烦的麻烦。

本文链接