文档中心 > 测试类目树

XSpace文档中心

更新时间:2017/03/06 访问次数:2416

名词

Page 单页面应用中的一个页面 通常作为一个业务级别的系统供服务者使用
App 一个完整可独立运行的业务组件。 Page通常由含一个或者多个APP组成
widget 一个完整可独立运行的业务组件,不同于App的是,Widget作为一个小功能元件可以被嵌入到页面中的任何指定区域,比如全局导航上的一个搜索框或者一个用户呼出全局的打电话拨号键盘

架构图

技术方案

  • 基础框架 react
  • 路由 reactRouter
  • App通信(数据流管理) Redux || MsgBus
  • Restful 客户端API DataBus 做Ajax请求, 对Restful提供支持
  • 基础视觉组件 antd
  • 业务组件 @ali/xspace 提供偏业务的组件以及一些工具类
  • 视觉交互DPL CCODPL

XSpace系统UI结构

下图表明了XSpace的单页应用结构,左侧为page的菜单。 每点击一个左侧的page菜单,就会出现page所对应的页面,即包含了一到多个App的组合

  • loader负责根据服务端输出的整个页面的描述信息来动态加载相应的资源并进行初始化
  • 通信 由于App是作为一个独立可运作的应用单元,其页面是App组装式的,因此App之间的通信并不能采用像react一样通过共同父组件进行通信, 因此XSpace推荐使用Redux进行功能通信。 如果对Redux不熟,也可使用一个简单的发布/订阅模式的消息系统MsgBus进行通信
  • DataBus 前后端数据通信使用DataBus
  • IMSDK 如果需要一些服务端主动推送的服务信息,可以使用IMSDK; 如无必要、勿增实体 (慎用)

    页面的组装流程

  1. 开发者根据脚手架本地开发App,并且上传到应用市场(服务端)
  2. 业务管理员在后台使用可视化界面创建页面并添加布局,将应用市场的App添加到页面的布局内; 可选的编辑App对应的参数
  3. 服务端根据页面以及对应的App信息组装成一个包含页面 + 布局 + App + 参数信息
  4. 根据配置信息动态加载App的JavaScript文件到页面中并且渲染对应的组件 ; 详见 配置系统
  5. XSpace组件开发

开发一个XSpace组件需要在组件根目录创建package.json文件,并包含以下信息

type 组件类型

name 组件名称 即当前组件的文件名,
version 当前组件版本
params 为模块本身的参数,可进行配置 模块内部可通过this.props获取
type为类型,可以自定义一些类型, 来获取一些系统级别的信息
defaultValue 默认值
config 如果有的话,是关于特定type的一些补充描述,如widget则需要有相应的位置信息,如page,则相应需要路径信息
APP 模块化规范

FAQ

关于此文档暂时还没有FAQ
返回
顶部