Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

自定义页面系统设计(三) #26

Open
func-star opened this issue Oct 25, 2018 · 0 comments
Open

自定义页面系统设计(三) #26

func-star opened this issue Oct 25, 2018 · 0 comments

Comments

@func-star
Copy link
Owner

func-star commented Oct 25, 2018

接着自定义页面系统设计(二)讲,这个章节主要会讲解如何解决下面几个点:

  • 模块信息配置
  • 最终页面的拼装

注:本章节暂先以命令行的方式来演示如何搭建一个页面,下一节再以可视化界面的形式来演示

模块信息配置

前面两节我们介绍,功能模块是需要被重复使用的,同一个模块module-a可能会被嵌入到page-apage-bpage-c等等页面中使用。
因此我们的功能模块需要支持可配置化,在不同的页面中具有不同的表现,这样才能最大程度的支持模块重用。

我们在「摩羯」(我们正在实现的系统)管理后台创建页面的操作步骤如下:

  1. 选择一个基础页面模板
  2. 选择需要的功能模块
  3. 为每一个功能模块填写配置信息
  4. 点击生成页面

我们可以看到在生成页面之前,我们需要为每一个功能模块准备一份配置信息,然后功能模块通过这个配置信息在不同的页面展现不同的效果。

生成的配置文件如下:

{
    "moduleName": "module-single-banner",
    "bannerUrl":
    {
        "name": "图片地址",
        "type": "string",
        "value": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1962406471,854069461&fm=27&gp=0.jpg",
        "key": "bannerUrl"
    },
    "url":
    {
        "name": "跳转链接",
        "type": "string",
        "value": "http://mor.monajs.cn/",
        "key": "url"
    }
}

这份配置文件会被注入到页面中,并挂载在window上:

window.Capricorn.modules = {
    "module-text": [{
        "name": "module-text_0",
        "config": {
            "moduleName": "module-text",
            "bannerUrl": {
                "name": "图片地址",
                "type": "string",
                "value": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1962406471,854069461&fm=27&gp=0.jpg",
                "key": "bannerUrl"
            },
            "url": {
                "name": "跳转链接",
                "type": "string",
                "value": "http://mor.monajs.cn/",
                "key": "url"
            }
        }
    }]
}
  • 注:每一个模块初始化创建的时候也会创建一份配置信息格式表

最终页面的拼装

当在「摩羯」管理后台点击页面生成的时候,我们会收集到以下信息:

  • 基础页面模板分支,自定义页面系统设计(二)中介绍我们通过分支来管理基础模板类型
  • 依赖的功能模块以及模块版本号
  • 各模块的配置信息
  • 页面的配置信息,包含titledescriptionicon

当这些信息都收集到之后,我们就可以进行页面生成了,分以下几步完成:

  1. 根据模板分支下载对应的页面模板代码
  2. 跟据功能模块的名称和版本,安装对应的依赖(之前讲到我们通过npm来管理我们的功能模块)
  3. 将功能模块的jscss脚本引入到页面模板中
  4. 将配置文件引入到页面模板中

页面创建演示

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant