xspace-kit

XSpace

名词

• Page 单页面应用中的一页
• App 作为组成页Page的最小单元组件，包含了一个React组件以及组件相关的配置信息
• widget 可独立运行的React组件，是App的组成部分，也可以作为扩展点嵌入到页面指定区域
• 扩展点 XSpace框架中，可扩展的部分，目前包含左侧页面导航、头部导航中用户区域和搜索框、以及页面的App部分

架构图

技术方案

• 基础框架 React
• 路由 ReactRouter
• 数据控制Immutable.js（Redux）
• 基础组件React-Component（react-component.github.io）
• 业务组件xpsace-ui
• 数据databus
• 消息通信 msgbus
• 视觉交互DPL CCODPL

XSpace组件开发

开发一个XSpace组件以下几种类型

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

//开发一个页面
{
    type:"page",
    version:"0.1.0",
    framework_version:"0.1.0",
    config:{
        name:"个人信息"
        icon:"fa-edit",
        path:"about"
    },
    components:{
        name:"buyercard"
    }
}

//开发widget
{
    type:"widget",
    version:"0.1.0",
    framework_version:"0.1.0",
    config:{
        location:"nav_search"
    }
    components:{
        name:"search",
        keymap:"ctrl+shift+i"
    }
}

//app
{
    type:"app",
    version:"0.1.0",
    framework_version:"0.1.0",
    components:{
        name:"osp-app",
        keymap:"ctrl+shift+i",
        params:{
            api:{
                type:"string",
                default:"http://localhost"
            },
            baseUrl:{
                type:"hostname"
            }
        }
    },
    rule:{
        
    }
}

XSpace组件规范

• UMD 模块规范

XSpace配置系统

• 需要配置
• 页面
• 布局
• 模块

配置系统最终输出一个指定格式的JSON对象到页面，XSpace前端框架根据配置信息渲染整个页面

  window.g_config = {
      pages: [
        {
          apps: [{
            span: 16,
            name: 'Repo',
            version: "0.1.0",
            params: {
              a: 1,
              b: 2
            }
          },
            {
              version: "0.1.0",
              span: 8,
              name: 'about'
            }],
          widgets: [{}],
          name: "关于你",
          path: "/repo",
          config: {}
        },
        {
          apps: [
            {span: 8, name: 'repo', version: "0.1.0",},
            {span: 16, name: 'about', version: "0.1.0",}
          ],
          name: "关于我",
          path: "/about"
        }]
    }

XSpace 前端模块开发工具

XSpace tools

• xspace init 初始化
• xspace prepublsh 日常
• xspace publish 线上