随着互联网的急剧发展 ，web 业务也越来越复杂和多元化 ，以前的那种前后端一路的方式越来越跟不上发展节拍 ，前后端逐步分离 ，随之前端的工作也日渐变得沉要起来 。
本文重要分享918博天堂科技 WEB 前端团队凭据业务场景特点研发的企业级前端框架组件化规划 。
组件技术：高内聚低耦合
组件（component）的意思比力宽泛 。软件工程里被翻译为“构件” 。构件是面向软件系统架构的可复用软件 ？ 。 构件可所以一个工具类（utils） ， 也可所以一个中央件（如：MQ） 。
早在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配置开发至少节约一半人力和页面开发功夫 。
总结
企业级前端框架具备的能力 ，首先必要一个基础框架为支持 ，其次以企业内部具体业务场景为起点 ，分析、抽取、持续堆集沉淀具体业务组件 ，结合统一规范约束 ，急剧搭建、组装出业务系统的能力 。
