搜索
简帛阁>技术文章>AIroot UISYS 自定义标签浅谈及解析

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

模块作为自定义标签

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>

效果如下:

  1. 我们先把刚才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>
  1. 下面我们编写一个测试页,这里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>
  1. 启动UISYS工具,在平台中输入 pub D:/mession/ :80, 如果命令行出现如下图绿色的文字,代表此目录已经发布成功了。
    您可以进行Web访问了。
  2. 接下来,请打开Chrome浏览器,如果您能看到下面的页面,说明您成功了
    可以看到 DEMO 的第一个表格使用了 CSSTable 自定义标签,而第二个没用。
    虽然 CSSTable.ui 模块代码采用的是全局定义table样式,但是模块化后它只影响自己的table标签。

原文的例子解析

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

<@content/> 标签

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

  1. 标签只需在外部文件定义,其他的页直接使用即可。
    这个和web前端三大框架(react、angluarjs、vue) 完全不同,uisys的模块化初衷就是建立在代码分离的基础上。
  2. 本例中,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就不会被编译了。

解析

UISYS可以实现自定义标签的及替换标签的能力,其依靠的时UISYS服务的帮助,也就是“服务端渲染”,UISYS服务会分析你的需求,让后处理HTML文档来满足你的最终需求。

有的同学会问,我的代码是不是只能在UISYS里展现,脱离了UISYS服务,比如放到nginx里是不是就不能用了吧?
没问题的,UISYS有导出发布功能,你可以发布工程,然后就可以放到其他WEB服务器里展现了。

首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量数量,浏览器在解析代码前会把变量的声明和函数
篇文章主要介绍了django自定义模板标签过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码布局自定义模板标签必须位于django的某个应
目录validator自定义验证易错点validator自定义验证易错点vue里面如何自定义校验如下也可以自定义校验validator自定义验证易错点validator自定义验证element中F
Spring框架是现在Java最流行的开源框架之一,并且Spring下的各种子项目对某些特定问题的解决有很好的支持。因此,如果能在Spring基础上实现搭建自己的一套框架(基于XML配置)。就必然需要
1XMLSchema11最简单的标签一个最简单的标签,形式如:<bf:headroutingkey1value1totest2/>该标签只包含了若干属性,我们就在xsd文件中这么定义<
这篇文章主要介绍了python上下文管理器原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下Python提供了with语法用于简化资源操作的后续
一、定义函数代码如下:functionfname(){statements;}或代码如下:fname(){statements;}二、调用函数只需要使用函数名,即可调用某个函数:$fname;执行函数
OM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作。我们可以很方便地给它加上自定义的属性,比如:<divid"test"class"hello"></
开篇看了看更新日期好久没写简书了,经常还有小伙伴在文章下面评论,看到自己写的东西还是有点用的,鼓励自己接着坚持下去吧,哈哈。今天主要就写写iOS中怎么解析HTML标签,我们常用的后台返回数据一般是js
最近产品妹子提出了一个体验issue——用iOS在手Q阅读书友交流区发表书评时,光标点击总是不好定位到正确的位置:如上图,具体表现是较快点击时,光标总会跳到textarea内容的尾部。只有当点击停留时