一种可与后端架构分离开发的浏览器前端架构系统技术方案

本发明专利技术提出了一种可与后端架构分离开发的浏览器前端架构系统，包括访问层、HTML单页面应用模块、视图模块、webpack模块打包器、控制模块和模型层；用以解决现有浏览器每一页面请求静态资源耗时、引入js文件时变量冲突、页面局部刷新时DOM元素渲染慢和性能差的问题，具有提高前端架构系统性能的特点。

【技术实现步骤摘要】
一种可与后端架构分离开发的浏览器前端架构系统
本专利技术涉及浏览器构建
，特别涉及一种可与后端架构分离开发的浏览器前端架构系统。
技术介绍
随着互联网应用越来越大、业务逻辑处理越来越复杂、用户获得良好体验的期望越来越高，在这种情况下，如果还继续维持以页面为单位的开发方式，势必会造成很多问题，例如每一页面请求静态资源耗时、引入js文件时变量冲突、页面局部刷新时DOM元素渲染慢、性能差等问题，同时因为前端技术的极速发展，使得不同浏览器对ES的兼容性不一，这就导致了传统的开发方式无法使用自ES6版本以后的许多新语法。
技术实现思路
本专利技术提供了一种可与后端架构分离开发的浏览器前端架构系统，用以解决现有浏览器每一页面请求静态资源耗时、引入js文件时变量冲突、页面局部刷新时DOM元素渲染慢和性能差的问题，所采取的技术方案如下：一种可与后端架构分离开发的浏览器前端架构系统，所述浏览器前端架构系统包括：访问层，用于执行对浏览器的访问操作；HTML单页面应用模块，用于利用单页面应用的方式对浏览器所展示的业务页面进行开发，构建业务页面的应用内容；视图模块，用于通过资源预加载、图片格式转换以及组件加载的方式将所述HTML单页面应用模块构建的业务页面应用内容展示出来，并实现人与业务页面交互功能；webpack模块打包器，用于对视图模块中的预加载资源进行分析，找到预加载资源中的JavaScript模块，并将JavaScript模块转换和打包为与使用的浏览器匹配的格式，同时将前端工程打包压缩形成静态资源；控制模块，用于当用户访问静态资源时，接收用户请求并针对用户请求调用模型层中的模型进行数据处理，将处理好的数据发送至视图模块，将用户访问的静态资源展示出来；其中，所述模型层为由公共方法、组件解析器、工具类和页面缓存机制形成的模型库。进一步地，所述浏览器前端架构系统还包括白屏情况确定模块和白屏信息反馈模块；所述白屏情况确定模块，用于用户启动浏览器进行网页访问时，根据白屏期间的鼠标动、静状态来监控浏览器当前页面被访问时的白屏情况；所述白屏信息反馈模块，用于白屏情况确定模块在确认白屏时间超时后，将白屏时间超时信息反馈给视图模块。进一步地，所述视图模块包括：资源预加载子模块，用于浏览器首屏被访问之前，将浏览器首屏的页面资源提前进行加载；图片转换子模块，用于对资源预加载过程中出现的图片资源进行格式转换，将资源中的图片转换为SVG格式图片；组件加载子模块，用于在资源预加载的同时，对浏览器首屏的网页组件进行加载。进一步地，所述视图模块还包括：时间信息接收子模块，用于接收浏览器页面展示过程中白屏信息反馈模块发送的白屏时间超时的时间检测信息；网络状态检测子模块，用于在时间信息接收子模块接收到时间检测信息后，进行网络状态检测，如果首屏访问当前存在网络故障问题，则在首屏页面上显示网络故障状态；如果首屏访问当前无网络故障问题，则向资源重置子模块发出资源重置指令；资源重置子模块，用于在接收到网络状态检测子模块和白屏情况确定模块发来的资源重置指令后，重新进行网页的资源加载；浏览器故障提示子模块，用于在资源重置后时间信息接收子模块仍然持续接收到白屏时间超时的检测信息时，在页面上提示浏览器故障信息；以及，当白屏情况确定模块对浏览器当前网页连续自动刷新两次后当前网页仍处于白屏阶段时，在页面上提示浏览器故障信息。进一步地，所述控制模块包括Vue组件子模块，用于进行Vue的单文件组件形式开发，使浏览器的业务逻辑处理和浏览器的页面视图展示处理分别进行，互不影响；页面组件子模块，用于进行登录页面和首页页面的构建，以及进行首页面板自定义配置、CRON表达式可视化配置和节假日设置；状态管理模块，用于通过集中式存储方式管理所有组件的状态，并根据浏览器运行的相应规则保证所有组件的状态在系统允许的范围内进行变化。进一步地，所述白屏情况确定模块包括：鼠标状态检测子模块，用于当浏览器页面被访问并进入白屏阶段时检测鼠标状态是静止状态还是移动状态，如果鼠标状态为静止状态，则启动静止状态监测子模块对鼠标静止时间进行监测；如果鼠标为移动状态，则启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测；静止状态监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于静止状态后，实时监测鼠标的静止时间，当鼠标静止状态的时间超过预设的白屏时间时，则启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；鼠标轨迹监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于移动状态后，实时检测鼠标的移动轨迹，当检测到鼠标出现往复的类圆形轨迹、同方向反复的直线轨迹和不同方向反复的直线轨迹时，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块。进一步地，所述鼠标轨迹监测子模块包括：类圆形轨迹检测子模块，用于检测鼠标在白屏阶段是否出现往复的类圆形轨迹，如果检测到鼠标出现了往复的类圆形轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在往复的类圆形轨迹，则启动直线轨迹检测子模块一；直线轨迹检测子模块一，用于检测鼠标在白屏阶段是否出现同方向反复的直线轨迹，如果检测到鼠标出现了同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在同方向反复的直线轨迹，则启动直线轨迹检测子模块二；直线轨迹检测子模块二，用于检测鼠标在白屏阶段是否出现不同方向反复的直线轨迹，如果检测到鼠标出现了不同方向反复的直线轨迹，则认定为当前网页白屏时间超时，并启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；如果没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段，则向视图模块发送资源重新加载指令，并启动浏览器自动刷新模块；浏览器自动刷新模块，用于在直线轨迹检测子模块二没有检测到鼠标存在不同方向反复的直线轨迹且网页仍处于白屏阶段时，对浏览器当前网页进行自动刷新；当所述浏览器自动刷新模块连续两次进行当前网页的自动刷新后，当前网页仍处于白屏阶段，则启动浏览器故障提示子模块在页面上提示浏览器故障信息。进一步地，所述白屏情况确定模块检测白屏时间的过程包括：步骤一、当浏览器页面被访问并进入白屏阶段时，检测白屏阶段的鼠标状态，如果鼠标为静止状态，则检测鼠标静止状态的时间，当鼠标静止状态的时间超过预设的白屏时间，则将白屏时间超时信息反馈给视图模块；如果鼠标为移动状态，导致无法通过鼠标静止状态与预设白屏时间进行对比来判断白屏时间是否超时时，则转至步骤二；步骤二、检测鼠标的移动轨迹是否为往复的类圆形轨迹，如果鼠标轨迹出现往复的类圆形轨迹，则认定浏览器当前白屏时间超时，并将白屏时间超时信息反馈给视图模块；如果鼠标轨迹未出现往复的类圆形轨迹，则转至步骤三本文档来自技高网...

【技术保护点】
1.一种可与后端架构分离开发的浏览器前端架构系统，其特征在于，所述浏览器前端架构系统包括：/n访问层，用于执行对浏览器的访问操作；/nHTML单页面应用模块，用于利用单页面应用的方式对浏览器所展示的业务页面进行开发，构建业务页面的应用内容；/n视图模块，用于通过资源预加载、图片格式转换以及组件加载的方式将所述HTML单页面应用模块构建的业务页面应用内容展示出来，并实现人与业务页面交互功能；/nwebpack模块打包器，用于对视图模块中的预加载资源文件进行分析，找到预加载资源中的JavaScript模块，并将JavaScript模块转换和打包为与使用的浏览器匹配的格式，同时将前端工程打包压缩形成静态资源；/n控制模块，用于当用户访问静态资源时，接收用户请求并针对用户请求调用模型层中的模型进行数据处理，将数据处理结果发送至视图模块，将用户访问的静态资源展示出来；其中，所述模型层为由公共方法、组件解析器、工具类和页面缓存机制形成的模型库。/n

【技术特征摘要】
1.一种可与后端架构分离开发的浏览器前端架构系统，其特征在于，所述浏览器前端架构系统包括：
访问层，用于执行对浏览器的访问操作；
HTML单页面应用模块，用于利用单页面应用的方式对浏览器所展示的业务页面进行开发，构建业务页面的应用内容；
视图模块，用于通过资源预加载、图片格式转换以及组件加载的方式将所述HTML单页面应用模块构建的业务页面应用内容展示出来，并实现人与业务页面交互功能；
webpack模块打包器，用于对视图模块中的预加载资源文件进行分析，找到预加载资源中的JavaScript模块，并将JavaScript模块转换和打包为与使用的浏览器匹配的格式，同时将前端工程打包压缩形成静态资源；
控制模块，用于当用户访问静态资源时，接收用户请求并针对用户请求调用模型层中的模型进行数据处理，将数据处理结果发送至视图模块，将用户访问的静态资源展示出来；其中，所述模型层为由公共方法、组件解析器、工具类和页面缓存机制形成的模型库。


2.根据权利要求1所述浏览器前端架构系统，其特征在于，所述浏览器前端架构系统还包括白屏情况确定模块和白屏信息反馈模块；
所述白屏情况确定模块，用于用户启动浏览器进行网页访问时，根据白屏期间的鼠标动、静状态来监控浏览器当前页面被访问时的白屏情况；
所述白屏信息反馈模块，用于白屏情况确定模块在确认白屏时间超时后，将白屏时间超时信息反馈给视图模块。


3.根据权利要求1所述浏览器前端架构系统，其特征在于，所述视图模块包括：
资源预加载子模块，用于浏览器首屏被访问之前，将浏览器首屏的页面资源提前进行加载；
图片转换子模块，用于对资源预加载过程中出现的图片资源进行格式转换，将资源中的图片转换为SVG格式图片；
组件加载子模块，用于在资源预加载的同时，对浏览器首屏的网页组件进行加载。


4.根据权利要求3所述浏览器前端架构系统，其特征在于，所述视图模块还包括：
时间信息接收子模块，用于接收浏览器页面展示过程中白屏信息反馈模块发送的白屏时间超时的时间检测信息；
网络状态检测子模块，用于在时间信息接收子模块接收到时间检测信息后，进行网络状态检测，如果首屏访问当前存在网络故障问题，则在首屏页面上显示网络故障状态；如果首屏访问当前无网络故障问题，则向资源重置子模块发出资源重置指令；
资源重置子模块，用于在接收到网络状态检测子模块和白屏情况确定模块发来的资源重置指令后，重新进行网页的资源加载；
浏览器故障提示子模块，用于在资源重置后时间信息接收子模块仍然持续接收到白屏时间超时的检测信息时，在页面上提示浏览器故障信息；以及，当白屏情况确定模块对浏览器当前网页连续自动刷新两次后当前网页仍处于白屏阶段时，在页面上提示浏览器故障信息。


5.根据权利要求1所述浏览器前端架构系统，其特征在于，所述控制模块包括
Vue组件子模块，用于进行Vue的单文件组件形式开发，使浏览器的业务逻辑处理和浏览器的页面视图展示处理分别进行，互不影响；
页面组件子模块，用于进行登录页面和首页页面的构建，以及进行首页面板自定义配置、CRON表达式可视化配置和节假日设置；
状态管理模块，用于通过集中式存储方式管理所有组件的状态，并根据浏览器运行的相应规则保证所有组件的状态在系统允许的范围内进行变化。


6.根据权利要求2所述浏览器前端架构系统，其特征在于，所述白屏情况确定模块包括：
鼠标状态检测子模块，用于当浏览器页面被访问并进入白屏阶段时检测鼠标状态是静止状态还是移动状态，如果鼠标状态为静止状态，则启动静止状态监测子模块对鼠标静止时间进行监测；如果鼠标为移动状态，则启动鼠标轨迹监测子模块对鼠标移动轨迹进行监测；
静止状态监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于静止状态后，实时监测鼠标的静止时间，当鼠标静止状态的时间超过预设的白屏时间时，则启动白屏信息反馈模块将白屏时间超时信息反馈给视图模块；
鼠标轨迹监测子模块，用于当鼠标状态检测子模块检测到鼠标在白屏阶段处于移动状态后，实时检测鼠标的移动轨迹，当检测到鼠标出现往复的类圆形轨迹、同方向反复的直线轨迹和不同方向反复的直线轨迹时，则认定为当前网页白屏时间超时，并启动白屏信息反馈模...

【专利技术属性】
技术研发人员：金震，耿金帅，张宪涛，
申请(专利权)人：北京三维天地科技股份有限公司，
类型：发明
国别省市：北京;11