UISYS 模块到底是啥？

说下UISYS官网的Mession 02，虽然例子很简单，但信息量极大，很多概念和关键点没有介绍，仅仅是做了演示。在这里我补充说明下。

在UISYS官网的Mession 02任务里，我们开发了的第一个UISYS模块。整体给我们的感觉没有太多的知识量。可以理解为：

1. uisys的模块以*.ui扩展名结尾。
2. uisys的模块其实是HTML代码碎片
3. uisys的模块定义了特殊关键字，例如 dom

除了上面总结的内容，uisys的模块还有额外几点注意，先请看下图：

	<@pub/><!-- 1. @pub标签代表可以通过URL地址直接访问 -->
	<style>
		/* 2. body 指的不是全局html的body节点，而是指本代码中可视标签的根节点，也就是 h1*/
		body{
			color:#123456;
			font-weight:bold;
		}
	</style>
	<!-- 3. h1 是模块的主体 -->
	<h1>
		Hello this is a module!
	</h1>
	<script>
		// 4. init函数是uisys模块的构造方法，模块被初始化默认调用的就是此方法。
		function init(){
			// 5. dom关键字为uisys模块中可视标签的根节点，也就是h1
			dom.innerText += " and Script!";
		}
	</script>

如上图代码注释：

@pub:. 标签代表可以通过URL地址直接访问。

uisys的模块用起来很像html静态页，可以直接通过网址访问，但是前提是此模块必须注释<@pub/>标签。
如果不注释此标签，uisys模块不会被打开，默认会返回首页。

style里的body选择器

在uisys模块里已经不指向HTML>body了，而是指向本模块的主体（可视标签h1），如果不信，可以用chrome的侦察器，看下真正的body是否被指定文字样式了。

主体标签

主体标签类似与Vue里面所说的：“默认component只能有一个根节点”，h1就是默认的根节点可视标签。当然这个标点不一定是h1，还可以是span、div、table等等。
但是这里要说明的是：

uisys主体标签可以有多个

构造函数

uisys的模块是有构造函数的，默认可以不写，如果写上就可以在模块加入DOM之后被程序默认调用。
既然是构造函数，uisys的init是可以接收参数的例如：

	function init(name,value){
		alert(name + "," + value);
	}

至于如何创建模块，并传入参数，后续uisys官方会有介绍，跟进我们的课程就可以。

dom关键字

这个没什么好讲的，注释里说明了：“ dom关键字为uisys模块中可视标签的根节点，也就是h1”，但是之前提到过uisys模块可以有多个主体，那么dom对多个主体怎么对应呢，这个到后续任务说明。

UISYS的模块编写非常灵活，测试也是非常方便的，如果想看代码最终编译成什么样子可以打开chrome的debug模式，查看Sources，如下图：

选中左侧 [UI]Index 节点，代表Index.ui,可以看到右侧红色区域就是js被编译后的效果。
uisys模块的优势和思想，在这里就不做演示了，后续任务会根大家介绍。

如果有兴趣可以所有微信公众号：

AIroot

注意AI大写，加入我们的公众号，来体会UISYS的思想。
感谢您的观看。