Websharp 4 - 元素介绍与模板设计

最新推荐文章于 2019-08-05 00:44:00 发布

coolmasoft

最新推荐文章于 2019-08-05 00:44:00 发布

阅读量749

点赞数

分类专栏： Websharp 文章标签： html include 编程 jsp web

本文链接：https://blog.csdn.net/coolmasoft/article/details/2850848

版权

Websharp 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

此章节重点介绍Websharp中的各种概念，有兴趣的可以耐心花点时间浏览一遍，如果没有兴趣也无所谓，在后面的章节中我们会逐步掌握这些东西；或者这作为一个手册，在有需要的时候再回头查阅。

Websharp和HTML DOM结构比较

Websharp的模板其实是一个DOM结构，但它这个DOM结构和HTML里面的DOM结构还不一样。HTML里面的DOM结构是由各个HTML元素组成的；而Websharp的DOM结构是由Websharp定义的元素组成的。

HTML示例：<td>1</td><td>2</td> 这个代码分割后就是<td>1</td>和<td>2</td> 两部分

Websharp示例：<html><body><h1>1</h1>{%Var%}</body></html>这个代码分割后就是：<html><body><h1>1</h1>、{%Var%} 和 </body></html> 三部分组成的。可以看出Websharp不管你的html代码，它只以Websharp的元素作为分割的标准。

Websharp元素

按照Websharp的分割标准，我们可以把模板看作是由三类型的元素构成的(描红的元素是我们常用到的元素)：

1）静态的HTML，也就是普通的HTML文本。如上面的<html><body><h1>1</h1>

2）模板变量元素。也就是用{%%}包含起来的一些变量。变量具体又可以分为几种，如下表所示，一般我们常用的就是普通变量。

元素名称	标记	例子	说明
普通变量	{%VarName%}	{%WebTitle%}	通常变量
忽略变量	{% /VarName%}	{% /Hello%}	注释掉一个变量，一般不用
资源变量	{% #VarName%} 或 {% r:VarName%}	{%#Language %}	国际化资源变量
包含模板文件变量	{%@VarName%}或 {%t:VarName%}	<%@temlate.html%>	包含另外一个公共的模板文件。一般公用的代码如页眉、页脚都可以做成一个单独模板文件，然后include进来
包含链接变量	{%$VarName%}或 {%u:VarName%}	<%$head.jsp%>	包含一个链接，等同JSP里面的include

3）模板块元素。用来表示。

元素名称	标记	说明
普通块(Normal Block)	<!-- BEGIN BLOCK: Name --> [Statement Block] <!-- END BLOCK: Name -->	可以用程序控制普通块里面的内容的一次输出
循环块(Loop Block)	<!-- BEGIN LOOP : Name --> [Statement Block] <!-- END LOOP : Name -->	可以用程序控制循环块里面的内容的多次输出。
忽略块(Ignored Block)	<!-- BEGIN IGNORED: Name --> [Statement Block] <!-- END IGNORED: Name -->	此代码块被忽略。通常要注释掉一个模板块才用到。

普通块和循环块的不同地方就是，循环块可以看作是普通块的多次循环。

比较下图的两个代码块，这两个代码块都是显示一个图片，Code II比Code I多了一个Block。Code I在任何时候都会被输出；Code II加上了block就相当加入了一个开关，允许我们编程的时候控制它是否输出，例如当图片存在的时候输出，否则就不输出。

Code I

Code II

比较下面的两个代码，一个用到Normal Block，一个用到了Loop Block，用到了Loop Block，你可以在编程的时候控制此代码块动态地输出十遍、百遍……

Code I

Code II

Websharp元素拆分示例

通过此例子，可以更加深刻理解Websharp DOM结构的划分。

让我们来看一个模板的代码：

<html>

<body>

</select>

</body>

</html>

我们用表格的方式来分析：

从表格中可以看出模板确实是一个DOM结构（有节点组成的树），这就是模板DOM，它和HTML的DOM结构有着本质的区别，因为它以模板元素来划分这个DOM而不是通过HTML元素来划分这个DOM。

有了这个模板DOM，我们就可以通过与其对应的ValueNode DOM来给这个模板赋予动态的内容。ValueNode DOM也是由许多ValueNode组成的树状结构，每个ValueNode都将映射到一个模板块元素（如上图的节点2属于模板块元素，而节点1和3是静态内容，不需要映射），最终把两者结合从而输出动态的内容。