MESSION 03 | 模块的简单应用

很高兴在 Mession 03 见到你，这说明你了解了 Mession 02, 其实 Mession 02 仅仅是一个例子，并没有说明模块的应用场景。
现在我们来看下面的例子，这是用了CSS样式美化的表格。
如果我想在其它页面也使用这种表格样式，并且不影响其他表格样式，有没有简便方法呢？
本次任务我们运用UISYS的模块做一个简单的“自定义标签”。
CSSTable.html
效果如下：
Info Header 1Info Header 2Info Header 3
Text 1AText 1BText 1C
Text 2AText 2BText 2C
1. 我们先把刚才CSSTable.html先改造下，
  • 文件名改为 CSSTable.ui (只是换个扩展名)。
  • 将 style 标签里的 table 选择器改为 body (在 Mession 02 中演示过，模块中，body是指向模块根节点的)。
  • 去掉 table 标签里面的内容，里面替换为 <@content/> 标签，这个是 UISYS 的 内容占位标签
代码如下：
CSSTable.ui
2. 下面我们编写一个测试页，这里CSSTable模块会被作为标签引入。
写一段例子代码,命名为TableTest.ui 保存到 D:/mession/ 下，全路径为：D:/mession/TableTest.ui
代码如下：
TableTest.ui
3. 启动UISYS工具，在平台中输入 pub D:/mession/ :80, 如果命令行出现如下图绿色的文字，代表此目录已经发布成功了。
您可以进行Web访问了。
AIroot UISYS v0.9.9
AIroot UISYS - http://www.airoot.cn/
Bootup successful
Date 2020-01-01 22:00:37
pub D:/mession/ :80
The [p0] seted in [D:\mession].
The [p0] starting at [:80].
web server is a ui-system server.
WEB Server Started at [:80]. Use protocol http
4. 接下来，请打开Chrome浏览器，如果您能看到下面的页面，说明您成功了！
可以看到 DEMO 的第一个表格使用了 CSSTable 自定义标签，而第二个没用。
虽然 CSSTable.ui 模块代码采用的是全局定义table样式，但是模块化后它只影响自己的table标签。
5. 接下来请领取您的奖励，请扫描二维码。