切换部分网页的原理是什么

square_http · 发表于 2023-9-17 19:57:27

本帖最后由 square_http 于 2023-9-17 20:02 编辑

在写头歌的页面优化脚本,但是这种只切换部分网页的原理搞不懂,有没有哥哥能解释下,或者说一下这种技术的名字.

像这样,点击左侧栏,右边的内容就会切换

Yiero · 发表于 2023-9-17 19:57:28

本质上就是将页面数据保存, 然后当选择对应项目的时候显示对应项目, 具体有两种实现:

一种是使用路由跳转的, 也就是点击之后页面的URL会有变化但是没有刷新页面, 一般用于比较大的模块切换, 比如你那个网站的头部导航栏. (下面将这种方法称为路由跳转)

一种是直接使用Js控制的, 不操作URL, 一般用于比较小模块的切换, 一般用于页面UI固定只要切换一部分内容. (下面将这种方法称为标签跳转)

这些一般都是借助一些框架或者库去做的, 比如路由跳转 Vue / React 这些框架都有对应的实现; 标签跳转有 ElementUI / Ant Design 这些库提供组件来实现.

具体做法就是提供一个对应的容器, 比如:

[教学课堂] 对应一个教学课堂的 div 容器, 里面包含了 [教学课堂内容]
[实践项目] 对应一个实践项目的 div 容器, 同样包含了 [实践项目内容]

点击 [教学课堂] 时就将 [教学课堂内容] 显示出来, 其他的都隐藏掉; 同样的点击 [实践项目] 时就将 [实践项目内容] 显示出来, 其他的都隐藏掉.

这个隐藏和显示可以使用任何方式进行, 比如:

使用 html + js + css 控制, 比如定义一个 .hide {display: none;} 类, 将所有内容写在html中, 将隐藏的元素添加上 .hide 类, 显示的内容删除 .hide 类.
使用纯 js 控制, 将 [教学课堂内容] 和 [实践项目内容] 都保存在一个 js 变量中, 需要显示的时候就将对应内容写入到页面中, 删除需要隐藏的元素.

而上文所说的路由跳转和标签跳转 , 只是控制这些内容该什么时候显示和显示什么内容, 具体的显示方式大致就是上面的内容.

李恒道 · 发表于 2023-9-17 22:43:50

SPA页面
由于浏览器支持可以本地替换路由而不重新加载HTML
JS监听路由变化
出现变化会计算当前应该渲染的内容
然后根据渲染内容重新进行渲染
Vue/React都是这个步骤

这个页面就是React框架写的

李恒道 · 发表于 2023-9-17 23:18:52

Yiero 发表于 2023-9-17 22:45
[md]本质上就是将页面数据保存, 然后当选择对应项目的时候显示对应项目, 具体有两种实现:

一种是使用**路 ...

哥哥写的好严谨
爱了

luckyfh · 发表于 2023-9-19 14:40:30

test一下一下

发表回复