专栏首页用户2629543的专栏强大的airoot-uisys v1版本发布了

强大的airoot-uisys v1版本发布了

AIroot UISYS

www.airoot.cn

A powerful web ui tool, so we call it uisys! 一个功能强大的 WEB UI 开发工具,所以我们叫它UISYS。

例子

<@pub/>

<!-- 定义一个模块 -->
<@define name="MyBox">
  <div>Hello Baby!</div>
</@define>

<!-- 你要展现的代码写在下面. -->
<div>
  <MyBox/>
  <MyBox/>
</div>

如何运行呢?

你需要使用 uisys 工具 , 点击这里下载 然后保存上面的文件到 D:\test\index.ui 最后, 运行 uisys.exe, 然后在uisys的命令行里面输入下面命令:

pub D:\test\ :90

完美, 打开 Chrome 或者 Firefox 浏览器, 然后输入 http://localhost:90/index.ui

这时候你能看到两行 "Hello Baby!" 文字在你的浏览器里。其他例子

您也可以使用JavaScript来创建,如下:

<@pub/>

<!-- 定义一个模块 -->
<@define name="MyBox">
  <div>Hello Baby!</div>
</@define>

<!-- 你要展现的代码写在下面. -->
<div>
  <!-- dom 内部区域-->
</div>

<script>
  function init(){
    var box = new MyBox();
    dom.appendChild(box);
  }
</script>

或者可以这样写:

<@pub/>

<!-- 定义一个模块 -->
<@define name="MyBox">
  <div>Hello Baby!</div>
</@define>

<!-- 你要展现的代码写在下面. -->
<div id="ct"></div>

<script>
  function init(){
  var box = new MyBox();
  #ct.appendChild(box);
  }
</script>

如果您希望 MyBox 模块保存为文件,单独使用, 例如:

创建文件 MyBox.ui, 代码如下:

<!-- MyBox 模块代码放在 D:\test\MyBox.ui -->
<div>Hello Baby!</div>

创建文件Index.ui 代码如下:

<!-- Index 模块代码放在 D:\test\Index.ui -->
<@pub/>
<div>
  <MyBox/>
  <MyBox/>
</div>

打开浏览器查看结果, 你仍然可以看到两行 "Hello Baby!" 文字。

使用 package 思想

如果你希望把文件放到文件夹里, 你可以这样做:

例如, 将 D:\test\MyBox.ui 移动到 D:\test\mymod\mybox.ui 下。

然后在 Index. UI 模块中导入 MyBox.UI 模块,需要更改下Index.ui的代码:

<!-- Index 模块代码放在 D:\test\Index.ui -->
<@pub/>
<div>
  <mymod.MyBox/>
  <mymod.MyBox/>
</div>

或者可以全局导入MyBox.ui:

<!-- Index 模块代码放在 D:\test\Index.ui -->
<@pub/>
<@import value="mymod.MyBox" />
<div>
  <MyBox/>
  <MyBox/>
</div>

打开浏览器查看结果, 你仍然可以看到两行 "Hello Baby!" 文字。

原文链接:https://github.com/uucckk/airoot-uisys

原文作者:孙晓玉

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Angular vs React vs Vue vs UISYS 的事件绑定方式对比(新手必看)

    没有模块化是网页的痛点,早期 w3c 出了webcomponent的标准,但是后期废除了。

    金刚
  • Web 新平台 “airoot-uisys” 释放前端开发活力

    写这篇文章比较尴尬,因为当今开发WEB的平台主要是nodejs,代表性的框架就是web三大框架。很多人都了解也都熟悉,他们的优势之一就是模块化开发,适合大项目的...

    金刚
  • UISYS 动态创建模块

    UISYS 全称 “AIroot UISYS”,是由AIroot平台出品的 “UI服务系统”,是专为前端UI展现制定的一套编译服务平台,内嵌HTML、CSS、J...

    金刚
  • angularjs学习第五天笔记(第二篇:表单验证升级篇)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

    小小许
  • angularjs学习第五天笔记(第二篇:表单验证升级篇)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

    小小许
  • 抖音上可以买货了,这怕是要抢了腾讯的电商红利

    源 / 36氪 文 / 茉小莉 腾讯要堵住抖音的短视频社交,抖音要抢了腾讯的电商红利。 36氪3月26日晚间发现,抖音出现关联淘宝的卖货链接——多个百万...

    顶级程序员
  • Facebook让AI学会谈判协商,能通过“说谎”达到目的

    陈桦 编译整理 量子位 出品 | 公众号 QbitAI 从每天醒来的那一刻起,我们的生活就开始了一系列协商。 这样的场景包括讨论看什么电视,说服孩子们吃蔬菜,以...

    量子位
  • 【知识星球】模型压缩和优化板块火热更新中

    模型优化与压缩涉及到紧凑模型的设计,量化与剪枝以及相关的工业界使用技巧共3个大方向。最近会集中上线一些内容,已有内容欢迎大家预览。

    用户1508658
  • 模型压缩和优化板块上线

    模型优化与压缩涉及到紧凑模型的设计,量化与剪枝以及相关的工业界使用技巧共3个大方向。最近会集中上线一些内容,已有内容欢迎大家预览。

    用户1508658
  • React第三方组件5(状态管理之Redux的使用⑤异步操作)

    本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

    前端人人

扫码关注云+社区

领取腾讯云代金券