前端组件模块化设计思路-何飞

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

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

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

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

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


页面模块化拆分

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

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


模块组件开发

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

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


基础组件-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、页面

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

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

拼接出最终的上线地址。

相关文章
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
27天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
280 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
3月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
63 1
|
4月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
117 1
|
4月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
474 1
|
4月前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
140 2
|
4月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
185 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
4月前
|
前端开发 JavaScript 开发者
深入解析前端开发中的模块化与组件化实践
【10月更文挑战第5天】深入解析前端开发中的模块化与组件化实践
58 1

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75