组件库的实现方法及装置制造方法及图纸

本发明专利技术提供了一种组件库的实现方法及装置，其中，该方法包括：接收前端框系统的业务需求；根据所述业务需求从组件库中获取抽象单文件组件；其中，所述组件库包括多个单文件组件，分别用于实现对应的业务功能。通过本发明专利技术，解决了现有技术中前端框架系统过于复杂且维护难度大的问题。

Realization method and device of component library

The present invention provides a method and a device, a component library, the method comprises: receiving front-end frame system of business needs; obtain Abstract single file components from the library according to the service demand; among them, the component library includes a plurality of single file components are used to implement the corresponding service function. Through the invention, the problem that the front frame system of the existing technology is too complex and difficult to maintain is solved.

【技术实现步骤摘要】
组件库的实现方法及装置
本专利技术涉及数据处理领域，具体而言，涉及一种组件库的实现方法及装置。
技术介绍
随着React，Vue等以组件(指令等)为主的优秀前端框架的出现，前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不需要再面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。随着前端技术日新月异的发展，前端组件化开发也经历了很多发展阶段1.交互少的静态页面时期：公共模块和CSS这是一个很古老的时代，那时的前端页面就是一些基本的HTML标签以及JS和CSS，页面上大部分都是一些静态的文字。然而，就在这个时期，前端JS和CSS就已经出现了组件化——或者应该理解为模块化，即开发者把不同模块的或者公共的JS和CSS放在不同的文件中，然后在页面引入并使用，这种方式也沿用至今。2.频繁的早期动态页面时期：动态引入由于静态页面不能在页面上存储数据，阅读者也不满足于基本的页面交互，更希望页面能够活起来，且能够把交互的数据存储起来，于是出现了很多服务端技术，比如ASP、JSP，这些技术的出现使得前端页面“活”起来了，用户可以根据自己的需求进行数据的交互。然而，这时的页面上充斥着业务逻辑。随着业务逻辑的增多，页面的内容也越来越多，越来越复杂。在这个时期前端组件化开发得到了一定的发展，开发者已经不满足于简单的将JS和CSS文件模块化，开始把一些公用的页面逻辑独立开来，然后通过页面动态引入的方式进行使用，比如公共的页面头(header)和尾(footer)以及数据库的连接(DatabaseConn.jsp)等。3.后端为主的MVC时期：Tag标签由于早期动态页面时期的业务逻辑都写在页面上，随着逻辑的增多，页面越来越复杂，维护起来也越来越难。于是以Servlet为代表的MVC时代逐渐登上历史舞台，这时页面上的逻辑都被转入到servlet中，使得View层的表现更加简洁，也更加的易于阅读，从而达到了开发的分层。而随着Struts以及Spring的出现，MVC的开发方式达到鼎盛时期，前端View层的展现也变得越来越简单，没有了复杂的业务逻辑，前端的组件化方式主要是taglib标签，比如jsp标签，Struts标签等。把HTML代码和业务逻辑打包成一个标签，然后使用者直接放置在想要的地方，就可以了。但这个时期，整个WEB应用的开发轻前端重后端，那些taglib标签也都是JAVA代码编写的。4.前端AJAX时期：JS大行其道由于MVC时期的轻前端重后端的思想，前端页面主要以表格的形式展现，如果想要一些很炫的效果，实现起来就比较复杂了，往往要写一大堆的代码，而且很难阅读。AJAX作为早已经出现的技术在这个时候越来越受到开发者的青睐，于是出现了很多的JS框架，比如JQuery-UI，easy-UI，miniUI以及大名鼎鼎的ExtJS。这些JS框架的出现使得前端组件化的开发到达了一个新的高度，利用封装Dom、AJAX以及页面交互的方式，一个个的很炫的组件出现了，开发者可以随意的将这些组件应用的页面中，开发变得简单的同时页面也变得越来越好看。由于这些交互都由JS来完成，运行在浏览器端，也大大的减少了服务端的压力，同时也提高了性能。5.前端MV*时期：自定义组件随着时间的推移，开发者发现，如果想要修改这些(ExtJS，miniUI)JS框架中的组件是非常困难的，因此开发者希望能够很容易的自定义一些组件。这时以Vue、React为代表的可以自定义组件的JS框架出现了。这些框架的出现不仅可以让开发者自定义组件，而且可以让开发者将已经存在的组件进行封装。不仅如此，由于有了npm以及bower这些包管理库，开发者可以很容易的将自己开发的组件publish到这些库中，在使用时只要把他们下载下来(比如npminstall)就可以直接使用了。6.CSS组件化：Less和Sass前面讲了CSS的模块化基本上是将实现某一模块Dom样式的CSS放在不同的文件中，显然随着Web应用的发展，开发者已经很不满足于这种简单的模块化了。其实关于CSS的组件化，业界也早就已经有了很多探索，比如Less，Sass等。那么为什么CSS也要组件化呢？我们知道CSS是一种扁平的结构，一个Dom可能对应着一个CSS样式，而这些CSS样式很有可能出现公共的部分，那么提取这些公共的部分也就实现了CSS的组件化，在诸如less和sass出现之前，开发者都是把公共的CSS样式写成一个个公共class，但是这样之后CSS文件的阅读性就变得困难了，当然也不容易修改。而less和sass出现之后，使得CSS的编程可以定义变量，可以实现继承，CSS内容的结构也变得更加清晰，提高了CSS文件的阅读性，更容易让人理解，修改起来也变得简单。在大型软件系统中，Web应用的前后端已经实现了分离，而随着REST软件框架的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等弊端。传统开发方式效率低以及维护成本高的主要原因在于，很多情况下我们是将一个系统做成了整块应用，而随着业务的增长或者变更，系统的复杂度往往会呈现指数级的增长，出现的情况就是，一个小小的改动或者一个小功能的增加可能会引起整个逻辑的修改，造成牵一发而动全身。针对现有技术中存在的上述问题，目前尚未发现有效的解决方案。
技术实现思路
本专利技术实施例提供了一种组件库的实现方法及装置，以至少解决现有技术中前端框架系统过于复杂且维护难度大的问题。根据本专利技术的一个实施例，提供了一种组件库的实现方法，包括：接收前端框系统的业务需求；根据所述业务需求从组件库中获取抽象单文件组件；其中，所述组件库包括多个单文件组件，分别用于实现对应的业务功能。可选的，所述组件库包括以下类别的组件：表单组件，视图组件，基础组件，导航组件，定制主题，指定类型。可选的，所述表单组件包括以下子组件：级联选择、输入框、数字输入框、单选框、复选框、开关、滑动块、文件上传、日期选择、时间选择、穿梭框；和/或，所述视图组件包括以下子组件：告警、全局提示、通知提醒、对话框、文字提示、气泡提示、进度条、时间轴、卡片、标签、折叠面板；和/或，所述基础组件包括以下子组件：按钮；和/或，所述导航组件包括以下子组件：面包屑、导航菜单、加载进度条、分页、步骤条、标签页、树形控件；和/或，所述指定类型包括以下子组件：图钉、返回顶部、加载中。可选的，所述多个单文件组件通过元素属性进行分类，其中，所述元素属性包括以下至少之一：字体、颜色、大小、线宽、形状、空间。可选的，每个所述单文件组件与其他至少一个元素之间存在可视化的对应关系。可选的，所述多个单文件组件之间根据关联性进行归组。根据本专利技术的另一个实施例，提供了一种组件库的实现装置，包括：接收模块，用于接收前端框系统的业务需求；获取模块，用于根据所述业务需求从组件库中获取抽象单文件组件；其中，所述组件库包括多个单文件组件，分别用于实现对应的业务功能。可选的，所述组件库本文档来自技高网...

【技术保护点】
一种组件库的实现方法，其特征在于，包括：接收前端框系统的业务需求；根据所述业务需求从组件库中获取抽象单文件组件；其中，所述组件库包括多个单文件组件，分别用于实现对应的业务功能。

【技术特征摘要】
1.一种组件库的实现方法，其特征在于，包括：接收前端框系统的业务需求；根据所述业务需求从组件库中获取抽象单文件组件；其中，所述组件库包括多个单文件组件，分别用于实现对应的业务功能。2.根据权利要求1所述的方法，其特征在于，所述组件库包括以下类别的组件：表单组件，视图组件，基础组件，导航组件，定制主题，指定类型。3.根据权利要求2所述的方法，其特征在于，所述表单组件包括以下子组件：级联选择、输入框、数字输入框、单选框、复选框、开关、滑动块、文件上传、日期选择、时间选择、穿梭框；和/或，所述视图组件包括以下子组件：告警、全局提示、通知提醒、对话框、文字提示、气泡提示、进度条、时间轴、卡片、标签、折叠面板；和/或，所述基础组件包括以下子组件：按钮；和/或，所述导航组件包括以下子组件：面包屑、导航菜单、加载进度条、分页、步骤条、标签页、树形控件；和/或，所述指定类型包括以下子组件：图钉、返回顶部、加载中。4.根据权利要求1所述的方法，其特征在于，所述多个单文件组件通过元...

【专利技术属性】
技术研发人员：李睿，张宣亚，韩海燕，王晨雨，
申请(专利权)人：中航信移动科技有限公司，
类型：发明
国别省市：北京,11