RidgeUI开发入门教程(九)页面即组件

25 阅读2分钟

页面即组件

当前端应用或页面越来越复杂时,会同时存在2个问题

  1. 每个页面都会有相当多的组件
  2. 不同页面可能会有部分相同内容。

更重要的是,在上述2种情况下,当我修改了这部分相同的内容,很可能我要在不同页面修改多次。

页面组件

Ridge提供了页面组件:它实际也可以理解为一种容器组件。

将“子页面”组件放置到页面后,注意应用名称/页面路径配置项。 当配置页面路径为/tasks/todoList,组件就同步显示为前面章节实现的待办应用。

另外,将应用资源中的页面拖拽入当前页面,也能实现相同效果。

alt text

注意:页面放入不能产生循环嵌套

为什么页面也是组件

站在一个比较抽象的视角: 一个前端组件本身也会包含文本、线条、图片等很多内容, 这和页面的特征相同。 所以我们制作好的一个页面,也可以作为另一个页面的局部进行展示。

我们将之前做好的例子,都放置到一个页面中。

alt text

页面的集成

在上面配置中,应用名称是留空的,它的意思是:使用当前应用(ridge-tutorial)下的其他页面,如果要使用其他应用的页面,只需要填入应用名称即可。

例如我们 ridgeui.com/ 整个网站就是使用ridgeui绘制的,它对应的应用名称为 ridge-website 所以填写

填入应用名称:ridge-website 页面路径:/components/Header, 这个区域就显示为官网的头部

alt text

通过这个方式,我们可以很轻松的将他人分享页面引入到自己应用中。

系列回顾

  1. 入门教程系列,主要面向页面制作人员(不使用代码的页面开发人员),了解使用RidgeUI的方方面面功能
  2. 页面绘制和页面潜在的数据流程(页面脚本)实际是可以分开处理的,这也是RidgeUI主要解决的问题
  3. 页面脚本实际也并不复杂,后续会有页面脚本入门系列教程