在整个前端代码的开发中，经常会不停的造轮子，写重复的代码，导致整体的研发成本过多，开发效率变慢，而在如今低代码盛行的时代，如何降低研发成本，提升开发效率成了很多大厂探索的目标，目前市面上大多数的组件库（Ant Design、ElementUI 等）都是能给开发带来便利，但是不具备业务属性，还是需要通过组件库的能力进行上层的搭建，无法满足业务需求的变化，从而导致研发成本的增加。

       有没有一种可能在每一次的业务实现中，都能沉淀页面相关的拆分组件，从而可以复用到类似的场景下，这样在持续的过程中可以不停的创造和沉淀，从而满足各式各样的业务形态。而这种具备业务属性的模块化组件才能更好的降低研发成本，增强页面呈现速度。

本质上来说，组件库的数量决定了业务场景的能力

       同样，组件库的维护和迭代更新也是必不可少的，以及如何高效的搜索到想要的业务组件，最终可以实现零代码平台，业务只需要组装对应的业务组件进行少量的配置就可以上线了。

页面模块化拆分

浏览器页面打开的习惯是上下浏览，所以我们的组件可以进行垂直拆分，进行上下拼接

例如这个阿里云官网页面，可以根据实际的业务楼层进行组件模块的划分，从而一个页面的搭建是由多个不同的业务组件模块拼接而成。

模块组件开发

在针对模块组件的开发过程中，需要形成统一的规范和底层能力，比如多个页面都有登录能力，这样就会造成很多组件需要进行登录代码的开发，从而导致不停的写重复代码，这种能力我们需要进行平台化封装，从而加快了整体的开发效率。

模块组件的底层能力分为三类：

基础组件-UI库

可以以一套完整的UI组件库为底库，根据实际的场景进行二次封装，从而可获取新的组件库：

通用组件：View、Button、Image、Text、Icon、Input ...

表单组件：Form、Field ...

布局：Affix、Container、Grid、Row ...

导航：Menu、Dropdown、Tab ...

数据埋点：针对不同的Action操作进行数据上报

通用API服务

Request：针对常见的HTTP请求进行了封装，目前包含GET、POST、JSONP三种方式，通过this.request可以获取到此方法

Account：根据不同的平台用的统一用户信息服务能力，具备查询、登录等相关能力

Share：Web分享服务，可以在不同平台下进行自动切换的分享

Utils：其他的辅助函数，时间能力、终端解析、url分析等常用的工具类

营销服务：针对通用化的营销服务进行的能力封装

数据Schema

schema本质就是整个组件的插槽，可以替换相应的属性，例如背景颜色、图片、文字等等，这样可以让组件更加的灵活的去适应不同的场景，往往很多组件只需要进行少量的样式替换就可以上线发布

可用属性：

• type：类型，可选值：string、object、array、number、boolean
• title：字段名称
• description：字段描述
• default：默认值

而大多数情况下，提供出去的是输入框，可以提供不同的widget组件来增强输入体验，例如：

color-颜色选择，pic-图片上传等。

形成最后的数据模型

{
"type":"object",
"title":"组件属性",
"properties":{
"pc":{
"type":"object",
"title":"PC端配置",
"properties":{
"top":{
"type":"number",
"title":"距离顶部距离",
"default":0                },
"bottom":{
"type":"number",
"title":"距离底部距离",
"default":0                },
"backgroundImage":{
"type":"string",
"title":"整个背景图片",
"description":"整个背景图优先",
"default":"",
"widget":"pic"                },
"backgroundColor":{
"type":"string",
"title":"背景底色",
"default":"",
"widget":"color"                },
"maxWidth":{
"type":"number",
"title":"最大有效宽度",
"default":200                },
"topImage":{
"type":"string",
"title":"顶部图片",
"default":"",
"widget":"pic"                },
"bottomImage":{
"type":"string",
"title":"底部图片",
"default":"",
"widget":"pic"                },
"isContent":{
"type":"boolean",
"widget":"select",
"title":"是否显示内容背景",
"options":[
                        {
"value":true,
"text":"是"                        },
                        {
"value":false,
"text":"否"                        }
                    ],
"default":false,
"mode":"single"                },
"contentTop":{
"type":"number",
"title":"内容背景距离顶部",
"default":0                },
"contentBottom":{
"type":"number",
"title":"内容背景距离底部",
"default":0                }
            }
        }
    }
}

然后在画布编辑器中去解析相对应的JSON，从而形成图形化的页面。

通用模块组件设计-区块

在很多时候，我们经常会遇到同样的组件在不同的页面里面呈现，比如通用导航栏，通用底部，通用挂件等等

如果每个页面都拖入这个组件，一旦要修改某个属性，都需要在多个页面进行修改，这样就会造成更高的运营成本。

区块是为了提高 搭建效率 而存在，合理地使用区块能够提高日常页面搭建中的效率，区块很好的解决了多个模块在不同页面中重复使用的场景。

运行环境配置

有的时候希望不同的页面运行在不同的环境，比如react版本，node版本、数据埋点、通用服务能力等

这就是 母版 的作用，每个页面可以挂靠不同的母版，形成具备有差异化的运行环境，好满足不同场景下的义务需求

页面发布

同样，每一个模块的发布都具备版本控制，可以自动回滚或者退回等操作

可发布对象：

1、模块组件

2、区块

3、母版

3、页面

并且能在不同的环境下进行分开发布，页面路径可以根据不同的目录结构进行拼接而成，类似

{域名} + {一级目录} + {二级目录} + {页面名称}

拼接出最终的上线地址。