918博天娱乐官网科技：企业级前端框架组件化实际

早在2013年W3C提出了“Web Components”草案，，，，，，，，随着前端web利用的迅速发展，，，，，，，，出现了React、VUE、Angular等主流的组件化开发框架。。。。。。。。在VUE中组件是可复用的 Vue 事俘。。。。。。。。而VUE的插件技术，，，，，，，，提供了组件间依赖引用、矫捷组装的可能。。。。。。。。本文实际规划，，，，，，，，以VUE技术为基础解说。。。。。。。。

组件化开发必要思虑以下问题：

●怎么以依赖方式使用组件？？？？？

●怎么保障拆分组件，，，，，，，，整应时风格统一？？？？？

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

●怎么解决组件（蕴含公共JS、CSS）依赖引入屡次打包压缩问题？？？？？

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

企业内部要实现组件化开发，，，，，，，，能够凭据自身业务现实情况，，，，，，，，首先明确好“组件”的界说，，，，，，，，达成共识。。。。。。。。�？？？？山榧槲酱罄�，，，，，，，，基础组件和业务组件，，，，，，，，如下所示。。。。。。。。

各组件层级关系图如下：

总体设计

918博天娱乐官网科技的前端框架解决规划设计准则，，，，，，，，重要以“开源低耦合”、“矫捷组装”、“单一快捷”等关键词为启程点。。。。。。。。

开源低耦合

为预防沉复造轮子，，，，，，，，减轻上手难度和进建成本，，，，，，，，充分复用此刻开源技术的优势和堆集。。。。。。。。会选择基于“开源框架”为起点，，，，，，，，搭建前端框架。。。。。。。。

但同时思考框架主题职能尽量预防对开源技术的强绑定，，，，，，，，增长中央层对开源组件进行包装，，，，，，，，以达到低成本代替的主张。。。。。。。。

矫捷组装

前端框架重要是对业务组件的堆集，，，，，，，，抽取企业内部普遍业务场景，，，，，，，，沉淀各业务组件库。。。。。。。。各组件库是可能独立开发、依赖使用的。。。。。。。。除基础组件库可被其他组件依赖使用之表，，，，，，，，尽量预防组件库间高度耦合。。。。。。。。

单一快捷

凭据公司内部现实情况，，，，，，，，前端框架服务于两方面的人员，，，，，，，，一长短专业锹剿人员（后端人员），，，，，，，，二是专业锹剿人员。。。。。。。。

针对“非专业锹剿人员”，，，，，，，，必要思考“零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开发

接下来从918博天娱乐官网科技的两个利用场景看前端框架的具体实际。。。。。。。。

实际一：职能组件插件化拆分与组合

将公司各业务系统公共职能抽取出来，，，，，，，，形成统一的组件，，，，，，，，以便节约人力开发成本和守护成本。。。。。。。。使用前端框架的插件脚手架工程，，，，，，，，能够急剧搭建一组件化插件工程，，，，，，，，将组件职能颁布成能够使用“模板依赖”的方式，，，，，，，，组件搭配使用。。。。。。。。

上图中批注，，，，，，，，基础利用平台的“机构选择”和“人员选择”职能，，，，，，，，能够作为公共职能抽取出组件，，，，，，，，颁布到私服，，，，，，，，由“绩效系统”“内部资金转移定价”等系统使用。。。。。。。。绩效系统中的“业务查问治理”依赖“基础利用平台”的职能实现，，，，，，，，内部资金转移定价中的“定价测算”也是依赖“基础利用平台”职能。。。。。。。。

通过前端框架提供的插件脚手架工程，，，，，，，，能够将项目工程组件颁布成插件，，，，，，，，上传到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

有关新闻

918博天娱乐官网科技入选2021中国金融数字化转型前锋企业TOP 50

918博天娱乐官网动态