AIroot UISYS 自定义标签浅谈及解析

最新推荐文章于 2020-05-14 13:28:30 发布

原创最新推荐文章于 2020-05-14 13:28:30 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #其他

AIroot UISYS 专栏收录该内容

15 篇文章

订阅专栏

模块作为自定义标签

AIroot.cn 官网的Mession 03 示例是基于Mession 02的深化。先把原文说明下吧。

很高兴在 Mession 03 见到你，这说明你了解了 Mession 02, 其实 Mession 02 仅仅是一个例子，并没有说明模块的应用场景。
现在我们来看下面的例子，这是用了CSS样式美化的表格。
如果我想在其它页面也使用这种表格样式，并且不影响其他表格样式，有没有简便方法呢？
本次任务我们运用UISYS的模块做一个简单的“自定义标签”。

	<style type="text/css">
		table {
			font-size:14px;
			color:#333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
		}
		table th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}
		table td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
		}
	</style>
	<table>
		<tr>
			<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
		</tr>
		<tr>
			<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
		</tr>
		<tr>
			<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
		</tr>
	</table>

效果如下：
在这里插入图片描述

我们先把刚才CSSTable.html先改造以下，
文件名改为 CSSTable.ui (只是换个扩展名)。
将 style 标签里的 table 选择器改为 body (在 Mession 02 中演示过，模块中，body是指向模块根节点的)。
去掉 table 标签里面的内容，里面替换为 <@content/> 标签，这个是 UISYS 的内容占位标签。
代码如下：

<style type="text/css">
	body {
		font-size:14px;
		color:#333333;
		border-width: 1px;
		border-color: #666666;
		border-collapse: collapse;
	}
	body th {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #dedede;
	}
	body td {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
	}
</style>
<table>
	<@content/>
</table>

下面我们编写一个测试页，这里CSSTable模块会被作为标签引入。
写一段例子代码,命名为TableTest.ui 保存到 D:/mession/ 下，全路径为：D:/mession/TableTest.ui
代码如下：

<@pub/>
<!-- 使用CSSTable.ui 作为标签 -->
<CSSTable>
	<tr>
		<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
	</tr>
	<tr>
		<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
	</tr>
	<tr>
		<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
	</tr>
</CSSTable>
<br/>
<!-- 未使用CSSTable -->
<table>
	<tr>
		<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
	</tr>
	<tr>
		<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
	</tr>
	<tr>
		<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
	</tr>
</table>

启动UISYS工具，在平台中输入 pub D:/mession/ :80, 如果命令行出现如下图绿色的文字，代表此目录已经发布成功了。
您可以进行Web访问了。

接下来，请打开Chrome浏览器，如果您能看到下面的页面，说明您成功了
可以看到 DEMO 的第一个表格使用了 CSSTable 自定义标签，而第二个没用。
虽然 CSSTable.ui 模块代码采用的是全局定义table样式，但是模块化后它只影响自己的table标签。

原文的例子解析

这是 AIroot UISYS 官网的一个自定义标签例子，实际上我们看到的就是吧上文中CSSTable.html 变为 CSSTable.ui 的开发。

<@content/> 标签

说到UISYS模块作为HTML Tag标签的特点：

标签只需在外部文件定义，其他的页直接使用即可。
这个和web前端三大框架（react、angluarjs、vue) 完全不同，uisys的模块化初衷就是建立在代码分离的基础上。

本例中，UISYS的自定义标签，实际上就是代码嵌套的和封装的操作，而这个嵌套得益于 <@content/> 标签，他可以把模块包含的内容引入模块内部二次处理。
<@content/> 标签叫做"内容占位标签"。
<@content/> 标签可以引入文本、html代码碎片，当一个模块内部定义了这个标签时，模块内部的 <@content/> 标签会全部替换为之前标签包含的代码片段。
本次例子比较简单，实际上<@content/> 标签还可以定义默认展示代码，如下例子（CSSTable.ui）：

	<style type="text/css">
		body {
			font-size:14px;
			color:#333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
		}
		body th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}
		body td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
		}
	</style>
	<table>
		<@content>
			<tr>
				<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
			</tr>
		</@content>
	</table>

上面代码中，<@content>…< /@content> 内部可以包含默认内容，如果第三方页面引入这个标签，即使不填写任何内容页可以显示默认的表格样式。这个主要为代码示例提供的功能。看下如下使用：

<@pub/>
<div>
	<!-- 默认内容 -->
	<CSSTable/>
	<br/>
	<!-- 自定义内容 -->
	<CSSTable>
		<tr>
			<th>自定义表头 1</th><th>自定义表头 2</th><th>自定义表头 3</th>
		</tr>
	</CSSTable>
</div>

在这里插入图片描述

模块的其他占位标签

<@value />

可以把标签包好内容转化为JavaScript String，在JS里面通过context.value 读取。

<@component />

可以标签包含内容转化为新组件，可以通过实例化此组件。

上面两个标签在后续内容会介绍，请大家关注我的博客或微信公众号AIroot。

UISYS的占位标签赋予了HTML标签更多的能力，你可以用标签做二次处理、格式转化、语义化等工作。
你可以在标签的内部使用HTML代码、JSON、XML甚至自定定义的格式。至此我们将HTML的标签的能力提高到一个新的高度。
这就是UISYS提供"原力觉醒的HTML编程"基础。

另外<@content/> 占位标签拿到的代码片段时会被UISYS编译过的，如果要求编译器不关系特殊代码，可以使用<@uncare>< /@uncare>标签，如下：
<@pub/>
<div>
	<@uncare>
	 	<CSSTable>
			<tr>
				<th>自定义表头 1</th><th>自定义表头 2</th><th>自定义表头 3</th>
			</tr>
	 	</CSSTable>
	</@uncare>
</div>
这样CSSTable就不会被编译了。