[发明专利]一种单页面web前端应用路由实现装置、方法

说明书

本发明公开了一种单页面web前端应用路由实现装置、方法，解决了现有监听实现路由技术代码复杂系统负担重；依赖浏览器本身对H5路由相关标准的实现程度；复杂系统的路由表非常复杂易编码出错；无法同时操作几个不连续的路由；无法实现从同一路由中排除其中若干子DOM节点不渲染的技术问题。它通过获取HTML页面的DOM节点层次关系，改变DOM及其所属子节点的css显示属性显示或隐藏指定的DOM节点，从而实现切换或排除路由。本发明减少了代码复杂度和系统负担；不依赖浏览器本身对H5路由相关标准的实现程度；无需配置路由表；支持同时切换操作几个不连续的路由；支持切换到一个路由的同时将该路由中的若干子DOM节点的作用范围的内容不渲染。

技术领域

本发明涉及一种单页面web前端应用路由实现装置、方法，属于互联网技术领域。

背景技术

路由（Router）是web应用中一项重要的技术，传统的web应用使用URL（网址）标记的路由来定位具体需要渲染显示的页面，当前流行的单页面web应用（SPA）虽然只有一个HTML页面但也使用类似URL的方式来定义需要渲染的具体组件的位置，这种组件定位的方式也称为SPA路由。

现有SPA路由实现方式与SPA对页面渲染的要求有关，SPA web应用页面渲染要求尽可能在切换路由时不触发重新从服务器加载HTML页面数据而只渲染需要显示的组件DOM节点。为达到这个目的，现有实现方案都是利用了浏览器hash路由机制和HTML5 History路由机制来实现的。

更具体的来说就是hash路由机制在实现时是通过hash符号#来表示新的路由，因为这个符号不会导致浏览器URL刷新从而避免了触发重新从服务器加载HTML页面数据的操作，同时该机制还监听onhashchange事件获得hash值的变化并根据当前SPA为具体hash值配置的路由标识（即路由表）来定位DOM进行渲染；HTML5 History路由机制在实现时是监听了onpopstate 事件从而获取了URL变化，然后通过history.pushState(state, title,url)、history. replaceState(state, title, url)两个系统函数来修改浏览器的URL记录从而避免了触发重新从服务器加载HTML页面数据，同时根据获取到的新URL值对照当前SPA web应用为具体URL路由值配置的路由标识（即路由表）来定位具体的DOM进行渲染。

为保证上述机制顺利运行，SPA web应用还需要配置一张URL路由表来完成hash值或者URL值到具体组件DOM的映射。

综上所述，现有实现方案都是需要监听、拦截浏览器的系统事件，并利用浏览器URL刷新动作的特性或API来控制浏览器的刷新行为，同时辅以URL路由表来完成操作。

本申请人发现现有技术至少存在以下技术问题：

1、现有技术中，对浏览器事件的监听、拦截增加了代码复杂度和系统负担；

2、现有技术中，HTML5 History路由机制高度依赖浏览器本身对H5标准的实现程度；

3、现有技术中，SPA web应用需要配置路由表来辅助路由功能的实现，复杂系统的路由表会非常复杂且容易编码出错；

4、现有技术中，对特殊的用户交互需要同时操作几个不连续的路由时，即在HTML页面上操作几个独立的DOM节点，现有的方案无法实现；

5、现有技术中，对特殊的用户交互需要切换到一个路由的同时将该路由中的一个或几个子DOM节点的作用范围的内容不渲染，即将HTML页面上该路由对应DOM节点的一些子节点排除在本次渲染之外，现有的方案无法实现。

发明内容