切换部分网页的原理是什么
本帖最后由 square_http 于 2023-9-17 20:02 编辑在写[头歌](https://www.educoder.net/)的页面优化脚本,但是这种只切换部分网页的原理搞不懂,有没有哥哥能解释下,或者说一下这种技术的名字.
!(data/attachment/forum/202309/17/195557kbz6eobfjztcp6kr.png)
!(data/attachment/forum/202309/17/195448spumfo7mqthtmz6t.png)
像这样,点击左侧栏,右边的内容就会切换 本质上就是将页面数据保存, 然后当选择对应项目的时候显示对应项目, 具体有两种实现:
一种是使用**路由跳转**的, 也就是点击之后页面的URL会有变化但是没有刷新页面, 一般用于比较大的模块切换, 比如你那个网站的头部导航栏. (下面将这种方法称为**路由跳转**)
一种是直接使用Js控制的, 不操作URL, 一般用于比较小模块的切换, 一般用于页面UI固定只要切换一部分内容. (下面将这种方法称为**标签跳转**)
这些一般都是借助一些框架或者库去做的, 比如路由跳转 Vue / React 这些框架都有对应的实现; 标签跳转有 ElementUI / Ant Design 这些库提供组件来实现.
***
具体做法就是提供一个对应的容器, 比如:
[教学课堂] 对应一个 教学课堂的 div 容器, 里面包含了 [教学课堂内容]
[实践项目] 对应一个 实践项目的 div 容器, 同样包含了 [实践项目内容]
点击 [教学课堂] 时就将 [教学课堂内容] 显示出来, 其他的都隐藏掉; 同样的点击 [实践项目] 时就将 [实践项目内容] 显示出来, 其他的都隐藏掉.
这个隐藏和显示可以使用任何方式进行, 比如:
* 使用 html + js + css 控制, 比如定义一个 `.hide {display: none;}` 类, 将所有内容写在html中, 将隐藏的元素添加上 `.hide` 类, 显示的内容删除 `.hide` 类.
* 使用纯 js 控制, 将 [教学课堂内容] 和 [实践项目内容] 都保存在一个 js 变量中, 需要显示的时候就将对应内容写入到页面中, 删除需要隐藏的元素.
而上文所说的 路由跳转 和 标签跳转 , 只是控制这些内容该什么时候显示和显示什么内容, 具体的显示方式大致就是上面的内容. SPA页面
由于浏览器支持可以本地替换路由而不重新加载HTML
JS监听路由变化
出现变化会计算当前应该渲染的内容
然后根据渲染内容重新进行渲染
Vue/React都是这个步骤
这个页面就是React框架写的 Yiero 发表于 2023-9-17 22:45
本质上就是将页面数据保存, 然后当选择对应项目的时候显示对应项目, 具体有两种实现:
一种是使用**路 ...
哥哥写的好严谨
爱了
test一下一下
页:
[1]