一种Web前端组件开发框架系统

技术领域

本发明涉及Web应用技术领域，特别涉及一种Web前端组件开发框架系统。

背景技术

Angular是一个成熟且完善的前端框架，在面向对象，组件化开发已经做到了极致。但是也存在一些问题使得其活跃度和采纳场景大受限制，首要的一点便是因为模块划分较多，框架显得笨重；其次是学习成本高，涉及到的js高级语法较多，上手难度大，尤其是响应式编程和Observable可观察对象的应用。此外，其较高的灵活度也使得对开发人员本身的要求更高一些，抬高了新手开发者接触Angular的门槛。因此，在项目开发中采纳Angular框架往往会伴随着成本的上升。

发明内容

本发明提供了一种Web前端组件开发框架系统，充分利用了Angular优势,采用相应的模块实现了前端的验证、迁移、通信等基本功能，实现按需使用模块。针对不易上手的语法，提供了弹框、浮层、异步请求等通用服务，降低了上手开发的难度。本框架整体上分为用于服务器通信的open-api模块，通用服务模块以及画面扩展模块，使Angular在项目开发中变得简洁易用。

本发明提供了一种Web前端组件开发框架系统，基于angular框架，包括输入验证模块、路由迁移模块、通信服务模块、缓冲浮层模块、组件复用模块和开放式接口；

所述输入验证模块通过属性设置对控件自动进行指定种类的输入值验证，并且把相对应的出错信息显示到项目下方；

所述路由迁移模块实现按照页面层级设置路由模块，方便路由分级管理；

所述通信服务模块通过配置文件自动生成的open-api接口给后台传递参数，并在接收到后台信息后提供接口给开发人员来进行后续处理；

所述组件复用模块包括联动下拉框组件、通知一览组件、格式化组件；

所述缓冲浮层模块采用浮层插件实现缓冲响应的遮罩层动态效果，提示、警告的弹窗功能。

进一步地，所述输入验证模块中框架预设了16种常用的验证种类，可以按需进行扩展。

进一步地，在入口画面引入头部、导航、底部模板页面组件来现画面上的通用布局。

进一步地，所述路由迁移模块中框架封装了基于路由模块的路由服务，在路由模块集中设置迁移URL和页面组件的对应关系。

进一步地，通过对事件的监听函数使开发人员在流程的关键阶段插入自己编写的代码逻辑，从而执行特殊的处理；框架预设3种常用的回调函数，并且可以按需进行定制扩展。

进一步地，所述组件复用模块中，

联动下拉框组件在画面上多个下拉框之间的选择内容实现联动效果，主下拉框的选择内容变更后，联动下拉框的选项列表随之改变；

通知一览组件通过订阅获取到对应的通知，在在画面头部显示出未读件数，点击通知后可打开通知组件的详情一览页面；

格式化组件通过引用日期、时间、数字组件，显示相应的时间间隔，数字千分位逗号间隔的页面效果。

进一步地，还包括模块的复用方法，具体为：将各个组件以及服务引入到通用模块，在模块中提供导出接口，通过npm pack命令把通用模块生成tgz的文件，导入到项目中，并在项目依赖中追加模块的引用路径，新项目通过依赖去引用通用模块的各个组件和服务的接口。

进一步地，还包括响应式浮层的实现方法，具体为：以事件预设处理或者http请求中断为节点，通过缓冲器组件的服务开始逐层计数；事件前置处理或者发起请求逐层叠加，事件后置处理或者请求返回逐层递减；根据层数是否大于0来判断是否显示缓冲浮层，从而进行响应式的缓冲浮层表示；框架预设了浮层背景和动态转动效果，可以按需进行定制扩展。

进一步地，还包括事件监听的实现方法，具体为：框架预设了对应于事件执行前处理、执行后处理、异常处理的常用画面事件的监听属性，框架在监听到事件的时候自动执行预设设置的处理，并根据自定义的处理内容自动执行相应的操作，框架监听的事件及其对应的属性可以按需进行定制扩展。

本发明的有益效果为：

1、数据双向绑定，集成了angular显著的特性，view层表示的数据和model层的数据是双向绑定的，其中之一发生更改，另一方会随之响应。

2、指令，强大的指令功能可以将很多功能独立封装成HTML的tag，属性等，这大大美化了HTML的结构，增强了可阅读性；且angular有一些内置的属性指令比如ngClass，ngStyle等，也有一些内置的结构指令比如*ngIf，*ngFor等。

3、组件化，支持组件开发，把常用的业务配上控件以及应用接口做成组件并形成组件库，这样就可以提供给整个项目、整个部门、整个公司重复利用。

4、扩展性，输入值验证的种类、复用组件、个性化组件、openApi等都可以根据需求进行扩展，使功能变得更加丰富。

5、类型批注和编译时类型检查，继承TypeScript的特性通过类型批注提供静态类型以在编译时启动类型检查；对于基本类型的批注是number，boolean和string，弱或者动态类型的结构则是any类型；而当类型没有给出时，TypeScript编译器利用类型推断以推断类型。

附图说明

图1为本发明Web前端组件开发框架系统的结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明属于Web应用领域中前端组件开发框架，基于angular框架，集成了typescript的类型能力，能够胜任大型项目的开发；本框架涉及Web页面的输入验证，画面迁移，异步通信服务，缓冲器浮层，组件的复用以及个性化组件扩展等，是一个高效可靠的Web前端架构解决方案，适用于追求界面流畅和高要求体验度的项目。

如图1所示，本发明提供了一种Web前端组件开发框架系统，基于angular框架，包括输入验证模块、路由迁移模块、通信服务模块、缓冲浮层模块、组件复用模块和开放式接口；

输入验证模块：通过属性设置对控件自动进行指定种类的输入值验证，并且把相对应的出错信息显示到项目下方；框架预设了16种常用的验证种类，可以按需进行扩展。

画面布局：在入口画面引入头部，导航，底部等模板页面组件来实现画面上的通用布局。

路由迁移模块：实现按照页面层级设置路由模块，方便路由分级管理；框架封装了基于路由模块的路由服务，在路由模块集中设置迁移URL和页面组件的对应关系。

通信服务模块，异步通信，通过配置文件自动生成的open-api接口给后台传递参数，并在接收到后台信息后提供接口给开发人员来进行后续处理。

预设处理：通过对事件的监听函数可以使开发人员在流程的关键阶段插入自己编写的代码逻辑，从而执行一些特殊的处理。框架预设了3种常用的回调函数，并且可以按需进行定制扩展。

组件复用模块包括联动下拉框组件、通知一览组件、格式化组件；

a)联动下拉框组件：画面上多个下拉框之间的选择内容可以实现联动效果。主下拉框的选择内容变更后，联动下拉框的选项列表也会随着改变。

b)通知一览组件：通过订阅获取到对应的通知，可以在在画面头部显示出未读件数。点击通知图标后可以打开通知组件的详情一览页面。

c)格式化组件：通过引用日期、时间、数字等组件，可以显示相应的时间间隔，数字千分位逗号间隔等页面效果。

缓冲浮层模块，浮层工具，采用浮层插件实现缓冲响应的遮罩层动态效果，提示、警告的弹窗功能。

实现Web应用的搜索及编辑画面，画面布局由header、footer、breadcrumb、router-outlet四个子组件组成，在搜索画面上半部的搜索条件内输入关键字并按搜索按钮后，搜索结果显示在搜索画面下半部的表格组件内，选中表格中的任一结果按更新按钮后跳转到更新画面，联动项目的内容通过异步通信从后台获取，输入修改内容后按保存按钮，画面自动进行输入值验证，并自动提交表单到相应的后台处理。

本发明还包括模块的复用方法，具体为：

首先将各个组件以及服务引入到一个通用模块，在模块中提供导出接口。通过npmpack命令把通用模块生成一个tgz的文件，然后导入到项目中，并在项目依赖中追加模块的引用路径。新项目可以通过依赖去引用通用模块的各个组件和服务的接口。

本发明还包括响应式浮层的实现方法，具体为：

以事件预设处理或者http请求中断为节点，通过缓冲器组件的服务开始逐层计数。事件前置处理或者发起请求逐层叠加，事件后置处理或者请求返回逐层递减。根据层数是否大于0来判断是否显示缓冲浮层，从而进行响应式的缓冲浮层表示。框架预设了浮层背景和动态转动效果，可以按需进行定制扩展。

本发明还包括事件监听的实现方法，具体为：

框架预设了对应于事件执行前处理(preExec)、执行后处理(postExec)、异常处理(onError)等常用画面事件的监听属性，框架在监听到事件的时候会自动执行预设设置的处理，并根据自定义的处理内容自动执行相应的操作。框架监听的事件及其对应的属性可以按需进行定制扩展。

本发明的特点包括：

(1)数据双向绑定：集成了angular显著的特性，view层表示的数据和model层的数据是双向绑定的，其中之一发生更改，另一方会随之响应。

(2)指令：强大的指令功能可以将很多功能独立封装成HTML的tag，属性等，这大大美化了HTML的结构，增强了可阅读性。而且angular有一些内置的属性指令比如ngClass，ngStyle等，也有一些内置的结构指令比如*ngIf，*ngFor等。

(3)组件化：支持组件开发，把常用的业务配上控件以及应用接口做成组件并形成组件库，这样就可以提供给整个项目、整个部门、整个公司重复利用。

(4)扩展性：输入值验证的种类、复用组件、个性化组件、openApi等都可以根据需求进行扩展，使功能变得更加丰富。

(5)类型批注和编译时类型检查：继承TypeScript的特性通过类型批注提供静态类型以在编译时启动类型检查。对于基本类型的批注是number，boolean和string，弱或者动态类型的结构则是any类型。而当类型没有给出时，TypeScript编译器利用类型推断以推断类型。

本发明的定位包括：

(1)兼容性：支持主流浏览器的绝大部分版本(Chrome、Safari、Firefox、Opera等)、支持各种Web平台(Mac、Windows、Linux等)。

(2)定制化：根据项目需求不断完善及添加功能，功能模块可单独引入。

(3)高效性&可靠性：可以快速制作Mock。无需关注具体的实现，大幅减少代码出错的概率。

(4)简单化：无论是编写代码还是检查代码，只需通过查看帮助文档，简单配置属性，就可以轻松实现。

(5)适用性：

适用于Web开发项目中的新规项目或者重构项目；适用于高要求的体验度，追求界面流畅的的项目；可以胜任大型项目开发。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其它变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其它要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。