betway西汉姆官网科技：企业级前端框架组件化实践

早在2013年W3C提出了“Web Components”草案，，，，，，，，随着前端web应用的迅速生长，，，，，，，，泛起了React、VUE、Angular等主流的组件化开发框架。。。。。。在VUE中组件是可复用的 Vue 实例。。。。。。而VUE的插件手艺，，，，，，，，提供了组件间依赖引用、无邪组装的可能。。。。。。本文实践计划，，，，，，，，以VUE手艺为基础解说。。。。。。

组件化开发需要思索以下问题：

●怎样以依赖方法使用组件？？？？？

●怎样包管拆分组件，，，，，，，，整适时气概统一？？？？？

●怎样治理组件依赖版本？？？？？

●怎样解决组件（包括公共JS、CSS）依赖引入多次打包压缩问题？？？？？

组件分类：基础组件和营业组件

企业内部要实现组件化开发，，，，，，，，可以凭证自身营业现真相形，，，，，，，，首先明确好“组件”的界说，，，，，，，，告竣共识。。。。。？？？？？山榧归为两大类，，，，，，，，基础组件和营业组件，，，，，，，，如下所示。。。。。。

各组件层级关系图如下：

总体设计

betway西汉姆官网科技的前端框架解决计划设计原则，，，，，，，，主要以“开源低耦合”、“无邪组装”、“简朴快捷”等要害词为起点。。。。。。

开源低耦合

为阻止重复造轮子，，，，，，，，减轻上手难度和学习本钱，，，，，，，，充分复用现在开源手艺的优势和积累。。。。。。会选择基于“开源框架”为起点，，，，，，，，搭建前端框架。。。。。。

但同时思量框架焦点功效只管阻止对开源手艺的强绑定，，，，，，，，增添中心层对开源组件举行包装，，，，，，，，以抵达低本钱替换的目的。。。。。。

无邪组装

前端框架主要是对营业组件的积累，，，，，，，，抽取企业内部普遍营业场景，，，，，，，，沉淀各营业组件库。。。。。。各组件库是能够自力开发、依赖使用的。。。。。。除基础组件库可被其他组件依赖使用之外，，，，，，，，只管阻止组件库间高度耦合。。。。。。

简朴快捷

凭证公司内部现真相形，，，，，，，，前端框架服务于两方面的职员，，，，，，，，一是非专疑习端职员（后端职员），，，，，，，，二是专疑习端职员。。。。。。

针对“非专疑习端职员”，，，，，，，，需要思量“零JS”代码开发，，，，，，，，以简朴设置方法快速对接后台接口，，，，，，，，开发出页面功效。。。。。。

针对“专疑习端职员”，，，，，，，，要提供统一区域级、页面级结构组件，，，，，，，，固化样式，，，，，，，，以最洪流平统一页面气概，，，，，，，，镌汰相同治理本钱，，，，，，，，快速协作开发。。。。。。

前端框架总体设计

如上图所示，，，，，，，，前端框架基于VUE + Element UI等开源手艺为底座，，，，，，，，以减轻开发职员的学习本钱，，，，，，，，而前端框架支持整个应用系统功效的开发。。。。。。

按组件分类，，，，，，，，前端框架分为了6大？？？？？。。。。。。每个？？？？？樽魑粤Φ墓こ绦嘉寮，，，，，，，，？？？？？樽约嚎梢员４嬉览倒叵担，，，，，，如：工具类和基础组件，，，，，，，，作为最小的？？？？？椋，，，，，，为其他？？？？？樘峁┲С郑，，，，，，其他？？？？？榈墓πВ，，，，，，基于这两个？？？？？榭。。。。。。

前端框架组件视图

●基础组件（Base Components）

基础UI组件，，，，，，，，主要指开源的ELement UI组件和一些算界说扩展的组件，，，，，，，，如：表单控件，，，，，，，，表格，，，，，，，，按钮等

●工具类（Utils Components）

公共要领工具，，，，，，，，包括常用的多组件共用的工具要领类

●营业组件（Business Components）

为镌汰分类历程，，，，，，，，且思量到现在基础营业组件抽取的很少，，，，，，，，我们将营业基础组件和区域组件，，，，，，，，统一归到此？？？？？槔。。。。。。区域组件可以以为是从页面模板组件中抽取出来的小组件。。。。。。如：盘问页面模板包括表单条件区域、工具栏区域和表格区域（包括分页），，，，，，，，我们可以抽取出表单区域组件、工具栏区域组件、表格区域组件，，，，，，，，每个区域组件主要借助slot插槽等机制，，，，，，，，实现功效扩展

●页面模板（Template Components）

页面模板是将特定的一些常用营业场景封装成模板。。。。。？？？？？赏ü蚱拥纳柚茫，，，，，，实现页面营业功效，，，，，，，，适用于后台或前端基础较弱的开发者

页面模板化，，，，，，，，目的是实现80%常见页面功效由“模板+模板数据”天生，，，，，，，，20%不可知足的接纳基于现有组件自界说开发方法开发。。。。。。示例如下：

●后管框架（admin-Cli）

此？？？？？槲岸丝蚣芴峁┝怂凶榧聚合的计划。。。。。。主要是针对后端治理系统而搭建的，，，，，，，，包括了后台治理系统常见的功效，，，，，，，，例如登录，，，，，，，，路由菜单，，，，，，，，结构，，，，，，，，主题换肤，，，，，，，，多语言切换，，，，，，，，数据字典，，，，，，，，元素权限控制等

●插件工程（Plugin-Cli）

此？？？？？楣πё榧插件化提供脚手架支持。。。。。。脚手架建设出来的前端工程，，，，，，，，自带搭建好了组件开发规范目录结构，，，，，，，，配套Markdown文档自动天生在线文档机制，，，，，，，，组件开发调试运行机制等

前端框架在真实应用中可以应用于三方面：

1、开发插件应用：基于插件脚手架工程，，，，，，，，快速抢建和宣布插件到私服，，，，，，，，供其他项目依赖使用

2、组件库依赖使用：　无论项目使用的开发框架是前端框架提供的脚手架工程，，，，，，，，照旧原生vue脚手架工程，，，，，，，，可以引入前端框架提供的营业组件库

3、后管框架使用：前端框架提供一整体后管基础功效框架，，，，，，，，可直接基于此脚手架工程开发。。。。。。若是后端职员，，，，，，，，可以借助“页面模板”以JSON设置加后台接口数据驱动，，，，，，，，“零JS”渲染出页面；；；；；；；若是是前端职员，，，，，，，，可以借助营业组件库提供的组件与页面模板“混淆开发”，，，，，，，，既可JSON设置，，，，，，，，又可使用原生VUE开发

接下来从betway西汉姆官网科技的两个应用场景看前端框架的详细实践。。。。。。

实践一：功效组件插件化拆分与组合

将公司各营业系统公共功效抽取出来，，，，，，，，形成统一的组件，，，，，，，，以便节约人力开发本钱和维护本钱。。。。。。使用前端框架的插件脚手架工程，，，，，，，，可以快速搭建一组件化插件工程，，，，，，，，将组件功效宣布成可以使用“模板依赖”的方法，，，，，，，，组件搭配使用。。。。。。

上图中批注，，，，，，，，基础应用平台的“机构选择”和“职员选择”功效，，，，，，，，可以作为公共功效抽取出组件，，，，，，，，宣布到私服，，，，，，，，由“绩效系统”“内部资金转移定价”等系统使用。。。。。。绩效系统中的“营业盘问治理”依赖“基础应用平台”的功效完成，，，，，，，，内部资金转移定价中的“定价测算”也是依赖“基础应用平台”功效。。。。。。

通过前端框架提供的插件脚手架工程，，，，，，，，可以将项目工程组件宣布成插件，，，，，，，，上传到Nexus私有，，，，，，，，其他项目营业系统前端工程以“？？？？？橐览怠狈椒ㄒ览凳褂。。。。。。

实践二： “零JS”开发页面

前端框架中保存大粒度的较量特殊的页面模板组件。。。。。。页面模板，，，，，，，，是凭证内部营业场景相同交流，，，，，，，，抽取出来的，，，，，，，，以“页面”为整体的解决计划组件。。。。。。页面模板，，，，，，，，以JSON的方法设置前端页面功效。。。。。。

古板的VUE实现：

使用表单模板组件设置JSON实现：

古板的VUE实现除了要编写繁琐的HTML和组件标签外还需JS实现解冻提交弹框等事务逻辑。。。。。。而通过JSON形式只需设置表单控件类型，，，，，，，，操作栏解冻按钮，，，，，，，，表格以及初始化的接口地点即可轻松实现。。。。。。JSON模板内置数据初始化，，，，，，，，数据提交等与后端交互逻辑以及多种事务联动功效。。。。。？？？？？⒄叨伎赏ü蚱拥纳柚檬迪终庑┕π。。。。。。

再从以下三个维度较量一下这两种开发模式：

从开发职员手艺熟练度来看，，，，，，，，使用VUE开发，，，，，，，，需掌握一定的前端知识。。。。。。而通过这种JSON设置开发，，，，，，，，开发职员无需任何前端基。。。。。。，，，，，，真正实现开发使用”零门槛”。。。。。。

从开发时间来看，，，，，，，，开发一个上文所提的盘问表格页面，，，，，，，，使用VUE至少需要1小时左右，，，，，，，，而使用JSON开发，，，，，，，，时间可控制在10分钟内。。。。。。

使用营业模板组件使用JSON设置开发前端页面模式，，，，，，，，已使用于多个项目。。。。。。项目客户真实数据反。。。。。。和ü庵諮SON设置开发页面，，，，，，，，可快速开发POC页面功效，，，，，，，，与古板的页面开发模式相比，，，，，，，，JSON设置开发至少节约一半人力和页面开发时间。。。。。。

总结

企业级前端框架具备的能力，，，，，，，，首先需要一个基础框架为支持，，，，，，，，其次以企业内部详细营业场景为起点，，，，，，，，剖析、抽取、一连积累沉淀详细营业组件，，，，，，，，团结统一规范约束，，，，，，，，快速搭建、组装出营业系统的能力。。。。。。

金融科技

只用这一招，，，，，，，，金融企业数据开发速率就快了5倍！

金融科技

2021.05.21

新一代银行智慧营销中台是怎样施展作用的？？？？？

金融科技

2021.05.11