一种单页面web前端应用路由实现装置、方法制造方法及图纸

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

【技术实现步骤摘要】
一种单页面web前端应用路由实现装置、方法


[0001]本专利技术涉及一种单页面web前端应用路由实现装置、方法，属于互联网


技术介绍

[0002]路由（Router）是web应用中一项重要的技术，传统的web应用使用URL（网址）标记的路由来定位具体需要渲染显示的页面，当前流行的单页面web应用（SPA）虽然只有一个HTML页面但也使用类似URL的方式来定义需要渲染的具体组件的位置，这种组件定位的方式也称为SPA路由。
[0003]现有SPA路由实现方式与SPA对页面渲染的要求有关，SPA web应用页面渲染要求尽可能在切换路由时不触发重新从服务器加载HTML页面数据而只渲染需要显示的组件DOM节点。为达到这个目的，现有实现方案都是利用了浏览器hash路由机制和HTML5 History路由机制来实现的。
[0004]更具体的来说就是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进行渲染。
[0005]为保证上述机制顺利运行，SPA web应用还需要配置一张URL路由表来完成hash值或者URL值到具体组件DOM的映射。
[0006]综上所述，现有实现方案都是需要监听、拦截浏览器的系统事件，并利用浏览器URL刷新动作的特性或API来控制浏览器的刷新行为，同时辅以URL路由表来完成操作。
[0007]本申请人发现现有技术至少存在以下技术问题：1、现有技术中，对浏览器事件的监听、拦截增加了代码复杂度和系统负担；2、现有技术中，HTML5 History路由机制高度依赖浏览器本身对H5标准的实现程度；3、现有技术中，SPA web应用需要配置路由表来辅助路由功能的实现，复杂系统的路由表会非常复杂且容易编码出错；4、现有技术中，对特殊的用户交互需要同时操作几个不连续的路由时，即在HTML页面上操作几个独立的DOM节点，现有的方案无法实现；5、现有技术中，对特殊的用户交互需要切换到一个路由的同时将该路由中的一个或几个子DOM节点的作用范围的内容不渲染，即将HTML页面上该路由对应DOM节点的一些子节点排除在本次渲染之外，现有的方案无法实现。

技术实现思路

[0008]本专利技术的目的在于提供一种单页面web前端应用路由实现装置、方法，以解决现有技术中的对浏览器事件的监听、拦截增加了代码复杂度和系统负担；HTML5 History路由机制高度依赖浏览器本身对H5标准的实现程度；SPA web应用需要配置路由表来辅助路由功能的实现，复杂系统的路由表会非常复杂且容易编码出错；对特殊的用户交互需要同时操作几个不连续的路由时，即在HTML页面上操作几个独立的DOM节点，现有的方案无法实现；对特殊的用户交互需要切换到一个路由的同时将该路由中的一个或几个子DOM节点的作用范围的内容不渲染，即将HTML页面上该路由对应DOM节点的一些子节点排除在本次渲染之外，现有的方案无法实现的技术问题。
[0009]为实现上述目的，本专利技术提供了以下技术方案：本专利技术提供了一种单页面web前端应用路由实现装置，包括节点层次关系分析功能组件、节点使能功能组件、节点去使能功能组件，所述节点层次关系分析功能组件在前端应用中的操作包括：分析前端应用的HTML页面，分析出所述前端应用的HTML页面的DOM节点层次关系，并将所述节点层次关系分析功能组件分析出的前端应用的HTML页面的DOM节点层次关系存储为反映DOM节点层次关系的节点树；所述节点使能功能组件在前端应用中的操作包括：获取所述节点层次关系分析功能组件存储的节点树，根据所述节点树获取指定DOM节点的父节点和子节点的层次嵌套关系；只显示所述指定DOM节点和所述指定DOM节点的子节点；所述节点去使能功能组件在前端应用中的操作包括：获取所述节点层次关系分析功能组件存储的节点树，根据所述节点树获取指定DOM节点的父节点和子节点的层次嵌套关系；不显示所述指定DOM节点和所述指定DOM节点的子节点。
[0010]进一步地，还包括对象树存储数据结构，所述节点层次关系分析功能组件将所述节点树存储于所述对象树存储数据结构。
[0011]进一步地，所述节点层次关系分析功能组件在前端应用中的操作还包括：提供回调接口给使用所述节点层次关系分析功能组件的调用者，调用者可以获得存储在所述对象树存储数据结构的节点树；提供调用接口给使用所述节点层次关系分析功能组件的调用者，调用者可以通过DOM节点ID获得存储在所述对象树存储数据结构的节点树中该DOM节点的所有子节点的子树；提供调用接口给使用所述节点层次关系分析功能组件的调用者，调用者可以重新分析HTML页面并刷新所述节点树中的内容。
[0012]进一步地，所述节点使能功能组件在前端应用中的操作还包括：提供调用接口给使用所述节点使能功能组件的调用者，调用者可以同时显示若干个DOM节点及其子节点的内容；提供调用接口给使用所述节点使能功能组件的调用者，调用者可以设置一个DOM节点处于常驻使能状态，处于常驻使能状态的DOM节点处于显示状态且不能被所述节点去
使能功能组件设置为常规方式去使能状态。
[0013]进一步地，所述节点去使能功能组件在前端应用中的操作还包括：提供调用接口给使用所述节点去使能功能组件的调用者，调用者可以对若干个DOM节点及其子节点的内容设置为常规方式去使能状态，同时隐藏所述若干个DOM节点及其子节点的内容；提供调用接口给使用所述节点去使能功能组件的调用者，调用者可以对设置为常驻使能状态的DOM节点进行强制方式去使能操作，同时隐藏所述设置为常驻使能状态的DOM节点的内容；提供调用接口给使用所述节点去使能功能组件的调用者，调用者可以将设置为常驻使能状态的DOM节点外的所有DOM节点及其子节点设置为常规方式去使能状态，同时隐藏所述设置为常驻使能状态的DOM节点之外的所有DOM节点及其子节点的内容。
[0014]进一步地，所述节点使能功能组件只显示所述指定DOM节点和所述指定DOM节点的子节点的实现方式包括：将所述指定DOM节点和所述指定DOM节点的子节点以外的其他DOM节点的css显示属性设置为隐藏属性。
[0015]进一步地，所述节点去使能功能组件不显示所述指定DOM节点和所述指定DOM节点的子节点本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种单页面web前端应用路由实现装置，其特征在于，包括节点层次关系分析功能组件、节点使能功能组件、节点去使能功能组件，所述节点层次关系分析功能组件在前端应用中的操作包括：分析前端应用的HTML页面，分析出所述前端应用的HTML页面的DOM节点层次关系，并将所述节点层次关系分析功能组件分析出的前端应用的HTML页面的DOM节点层次关系存储为反映DOM节点层次关系的节点树；所述节点使能功能组件在前端应用中的操作包括：获取所述节点层次关系分析功能组件存储的节点树，根据所述节点树获取指定DOM节点的父节点和子节点的层次嵌套关系；只显示所述指定DOM节点和所述指定DOM节点的子节点；所述节点去使能功能组件在前端应用中的操作包括：获取所述节点层次关系分析功能组件存储的节点树，根据所述节点树获取指定DOM节点的父节点和子节点的层次嵌套关系；不显示所述指定DOM节点和所述指定DOM节点的子节点。2.根据权利要求1所述的一种单页面web前端应用路由实现装置，其特征在于，还包括对象树存储数据结构，所述节点层次关系分析功能组件将所述节点树存储于所述对象树存储数据结构。3.根据权利要求2所述的一种单页面web前端应用路由实现装置，其特征在于，所述节点层次关系分析功能组件在前端应用中的操作还包括：提供回调接口给使用所述节点层次关系分析功能组件的调用者，调用者可以获得存储在所述对象树存储数据结构的节点树；提供调用接口给使用所述节点层次关系分析功能组件的调用者，调用者可以通过DOM节点ID获得存储在所述对象树存储数据结构的节点树中该DOM节点的所有子节点的子树；提供调用接口给使用所述节点层次关系分析功能组件的调用者，调用者可以重新分析HTML页面并刷新所述节点树中的内容。4.根据权利要求1所述的一种单页面web前端应用路由实现装置，其特征在于，所述节点使能功能组件在前端应用中的操作还包括：提供调用接口给使用所述节点使能功能组件的调用者，调用者可以同时显示若干个DOM节点及其子节点的内容；提供调用接口给使用所述节点使能功能组件的调用者，调用者可以设置一个DOM节点处于常驻使能状态，处于常驻使能状态的DOM节点处于显示状态且不能被所述节点去使能功能组件设置为常规方式去使能状态。5.根据权利要求1所述的一种单页面web前端应用路由实现装置，其特征在于，所述节点去使能功能组件在前端应用中的操作还包括：提供调用接口给使用所述节点去使能功能组件的调用者，调用者可以对若干个DOM节点及其子节点的内容设置为常规方式去使能状态，同时隐藏所述若干个DOM节点及其子节点的内容；提供调用接口给使用所述节点去使能功能组件的调用者，调用者...

【专利技术属性】
技术研发人员：杨宇彤，
申请(专利权)人：成都索骥科技有限公司，
类型：发明
国别省市：