基于react兼容ie8浏览器的前端系统及其升级方法技术方案

本发明专利技术提供了一种基于react兼容ie8浏览器的前端系统及其升级方法，涉及软件升级技术领域，包括：系统核心模块、组件注册中心模块、路由模块以及状态管理模块；其中，系统核心模块用于封装组件；组件注册中心模块用于注册封装后的组件；路由模块用于在开发前端应用的过程中添加视图和数据流，同时保持页面和URL间的同步；状态管理模块用于在开发前端应用的过程中管理应用的各项数据及状态。本发明专利技术能够有效提高开发效率、降低维护成本，达到降本增效的效果。的效果。的效果。

【技术实现步骤摘要】
基于react兼容ie8浏览器的前端系统及其升级方法


[0001]本专利技术涉及软件升级
，具体地，涉及一种基于react兼容ie8浏览器的前端系统及其升级方法。

技术介绍

[0002]金融行业或者政府机构因用户需求需要兼容ie8浏览器的互联网系统中，经常存在技术升级的需求(最主要的是前后端分离)，也存在因为提高开发效率和降低维护成本而产生的组件化需求。
[0003]这类系统使用的相关技术是jsp，全称是java server pages，是一种动态网页开发技术。它使用jsp标签在HTML网页中插入java代码。Jsp部署在网络服务器上，可以响应客户端发送的请求，并根据请求内容动态的生产HTML，XML或其他形式的web网页，然后发送给请求者。
[0004]Jsp技术存在以下缺陷：在早些年前，web化趋势并不是那么明显，使用jsp可以应对大多数的业务场景和技术开发需要，但是随着整个社会信息化程度的加深，各种各样的服务都web化之后，前端的页面变的越来越复杂，jsp这种前后端高度耦合的技术就不那么好用了，本质是因为前端没有像后端一样，进行工程化，模块化和可复用化的思维来开发。这就导致了开发效率低，维护成本高，还可能造成页面性能问题等。

技术实现思路

[0005]针对现有技术中的缺陷，本专利技术提供一种基于react兼容ie8浏览器的前端系统及其升级方法。
[0006]根据本专利技术提供的一种基于react兼容ie8浏览器的前端系统及其升级方法，所述方案如下：
[0007]第一方面，提供了一种基于react兼容ie8浏览器的前端系统，所述系统包括：系统核心模块、组件注册中心模块、路由模块以及状态管理模块；
[0008]其中，所述系统核心模块用于封装组件；
[0009]所述组件注册中心模块用于注册封装后的组件；
[0010]所述路由模块用于在开发前端应用的过程中添加视图和数据流，同时保持页面和URL间的同步；
[0011]所述状态管理模块用于在开发前端应用的过程中管理应用的各项数据及状态。
[0012]优选地，所述系统核心模块包括：React核心模块、工程化模块、sass模块以及es6模块；
[0013]其中，所述React核心模块：通过使用React0.14版本，使开发者在兼容ie8浏览器的情况下使用React；
[0014]工程化模块：负责加载、编译和打包所有文件；
[0015]sass模块：使开发者使用sass进行css开发，并统一为css添加浏览器兼容前缀；
[0016]es6模块：将es6及React代码编译压缩成ie8浏览器能识别的代码，并补齐浏览器缺失的相关语法防止代码运行报错。
[0017]优选地，所述工程化模块中的编译由工程化模块调用sass模块及es6模块来处理，使用的工具包为webpack 1.12.9版本；
[0018]所述sass模块使用的工具包为sass 1.49.0版本、postcss 1.0.0版本以及autoprefix 7.0.1版本；
[0019]所述es6模块使用的工具包为es5
‑
sham 4.41版本、es3ify
‑
loader 0.1.0版本以及Babel
‑
core 6.26.3版本。
[0020]优选地，所述组件注册中心模块具体包括：开发者在使用系统核心模块封装组件之后，将封装后的组件在注册中心模块中注册，注册后的组件直接暴露在浏览器的windows对象下，并提供组件的创建、更新以及销毁在内的相关方法。
[0021]优选地，所述路由模块使用的工具包为React
‑
router 2.3.0版本。
[0022]优选地，所述状态管理模块使用的工具包为Redux
‑
Redux 4.4.5版本。
[0023]第二方面，提供了一种基于react兼容ie8浏览器的前端系统升级方法，所述方法包括：组件化和系统化；
[0024]其中，所述组件化：在现有旧系统有组件化需求的情况下，进行前端组件封装，封装好的组件以js文件的形式导入到旧系统中，旧系统通过js文件调用对应组件；
[0025]所述系统化：将前后端不分离的旧系统升级为前后端分离的单页面应用。
[0026]优选地，所述组件化包括：
[0027]1)当现有旧系统有组件化需求的情况下，在系统核心模块进行前端组件封装；
[0028]2)经封装好的组件在所述组件注册中心模块注册；
[0029]3)通过所述工程化模块将注册后的组件打包成js文件，然后将js文件导入到旧系统中，使组件的创建、更新在内的相关方法暴露在浏览器的window对象下，旧系统通过window对象适时的调用组件的创建、更新在内的相关方法。
[0030]优选地，所述系统化包括：将前后端不分离的旧系统升级为前后端分离的单页面应用；开发者使用系统核心模块开发前端页面，使用路由模块来管理页面跳转，使用状态管理来管理应用的数据及状态；
[0031]最后通过工程化模块打包前端应用，完成前后端分离模式下的前端应用的开发。
[0032]第三方面，提供了一种存储有计算机程序的计算机可读存储介质，所述计算机程序被处理器执行时实现所述前端系统升级方法中的步骤。
[0033]与现有技术相比，本专利技术具有如下的有益效果：
[0034]1、软件开发者使用本专利技术系统框架进行编码开发，可以有效的提高开发效率、降低维护成本，达到降本增效的效果；
[0035]2、本专利技术提供的升级方法能够避免对已有应有模块进行大规模的改造，有效降低系统技术升级的复杂度和上线风险。
附图说明
[0036]通过阅读参照以下附图对非限制性实施例所作的详细描述，本专利技术的其它特征、目的和优点将会变得更明显：
[0037]图1为本专利技术系统整体框架图。
具体实施方式
[0038]下面结合具体实施例对本专利技术进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本专利技术，但不以任何形式限制本专利技术。应当指出的是，对本领域的普通技术人员来说，在不脱离本专利技术构思的前提下，还可以做出若干变化和改进。这些都属于本专利技术的保护范围。
[0039]本专利技术实施例提供了一种基于react兼容ie8浏览器的前端系统，是以react0.14版本为核心，兼容ie8浏览器，研发的一套支持es6、webpack、sass、router、redux、prettier等技术的开发框架，参照图1所示，该系统具体包括：系统核心模块、组件注册中心模块、路由模块以及状态管理模块。
[0040]其中，系统核心模块：用于封装组件。系统核心模块是该框架能够兼容ie8和使用React、es6、sass开发的原因。该模块包含了四个子模块分别是：React核心模块、工程化模块、sass模块，es6模块。
[0041]R本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于react兼容ie8浏览器的前端系统，其特征在于，包括：系统核心模块、组件注册中心模块、路由模块以及状态管理模块；其中，所述系统核心模块用于封装组件；所述组件注册中心模块用于注册封装后的组件；所述路由模块用于在开发前端应用的过程中添加视图和数据流，同时保持页面和URL间的同步；所述状态管理模块用于在开发前端应用的过程中管理应用的各项数据及状态。2.根据权利要求1所述的基于react兼容ie8浏览器的前端系统，其特征在于，所述系统核心模块包括：React核心模块、工程化模块、sass模块以及es6模块；其中，所述React核心模块：通过使用React0.14版本，使开发者在兼容ie8浏览器的情况下使用React；工程化模块：负责加载、编译和打包所有文件；sass模块：使开发者使用sass进行css开发，并统一为css添加浏览器兼容前缀；es6模块：将es6及React代码编译压缩成ie8浏览器能识别的代码，并补齐浏览器缺失的相关语法防止代码运行报错。3.根据权利要求2所述的基于react兼容ie8浏览器的前端系统，其特征在于，所述工程化模块中的编译由工程化模块调用sass模块及es6模块来处理，使用的工具包为webpack 1.12.9版本；所述sass模块使用的工具包为sass 1.49.0版本、postcss 1.0.0版本以及autoprefix 7.0.1版本；所述es6模块使用的工具包为es5
‑
sham 4.41版本、es3ify
‑
loader 0.1.0版本以及Babel
‑
core 6.26.3版本。4.根据权利要求1所述的基于react兼容ie8浏览器的前端系统，其特征在于，所述组件注册中心模块具体包括：开发者在使用系统核心模块封装组件之后，将封装后的组件在注册中心模块中注册，注册后的组件直接暴露在浏览器的windows对象下，并提供组件的创建、更新以及销毁在内...

【专利技术属性】
技术研发人员：李炜，李斌，陈静雯，徐重振，
申请(专利权)人：兴业数字金融服务上海股份有限公司，
类型：发明
国别省市：