jQuery 流行的年代,是如何做后台管理系统的页面切换功能的?

2023-05-01 10:07:01 +08:00
manyfreebug  manyfreebug

jQuery 流行的年代,是如何做后台管理系统的页面切换功能的?

看了一些以前的“左侧侧边栏、右侧内容区域的结构”的项目,似乎有 3 种途径:

1 、借助 iframe
    事件监听左侧侧边栏的菜单,当用户点击某个菜单项时,获取它的 href 属性值,并且将它赋值给右边内容区域的 iframe 元素的 src 属性,这样就可以实现内容页面的切换。
    
2 、借助 Ajax
	监听左侧侧边栏的点击事件,当用户点击某个菜单项时,使用 ajax 请求对应的内容页面,并将返回的数据替换右边内容区域的容器中
    
3 、不借助 js
    直接把侧边栏的菜单写在每一个 html 页面里,如果需要菜单高亮,在每个 html 页面对应的菜单里添加.active 等

这三种方式在点击菜单时,都会网络请求对应的 html 页面,而现在的 vue 、react 等框架,是不需要的。

有网络请求的情况下切换页面时观感上会没那么快,一般会用哪些手段提升体验。

5910 次点击
所在节点   JavaScript  JavaScript
43 条回复
libook
libook
2023-05-04 11:30:12 +08:00
jQuery 和现代框架的共同点都是降低开发者操作 DOM 的复杂度,区别在于 jQuery 是让开发者直接操作 DOM ,而现代框架是给开发者一套设计模式,让开发者只需要提供抽象的业务流程和数据流,框架会自动操作 DOM 。也就是说在 jQuery 流行的年代,用 jQuery 开发一个现代风格的网站是基本可行的,只不过部分特性可能需要写更多的代码。

jQuery 流行的时代和现在的需求是有很多区别的:
1. 过去网速普遍慢,2G 网络很多设备才几十 K 的速度,很多地区宽带能到 4Mbit 已经算是比较好的了。jQuery 在 2010 年的时候只有 78KB ,现在单个 JS 文件资源动辄 1M 左右的大小如果到了那个时代会严重拖慢首屏加载时间。所以按需加载+加载动画比单页面 All-in-One 更受欢迎,甚至当时开发者会主动删除依赖库中不需要的代码,以及在字体文件中删除页面上不涉及的字。现在网络快和便宜到可以随时刷短视频和直播了,以前的那些需求自然就不存在了。
2. 过去设备性能普遍较差,所以会尽量避免前端渲染,除了采用后端渲染以外,还流行预渲染,除了必要的交互动画以外,会将数据和页面框架结合渲染成静态的 HTML ,拿空间换计算量。现在设备性能强到前端渲染甚至快于网络请求方案了,而且网站运营方也可以利用前端渲染来节省服务器开销。
3. 过去 Web1.0 时代的目标主要是信息的呈现,现在 Web2.0 时代的目标主要是交互体验,所以现在交互功能更重,单页面应用在这方面的优势更大。
caiqichang
caiqichang
2023-05-04 11:32:54 +08:00
postmessage onmessage 封装一个页面间消息传递的工具
harrozze
harrozze
2023-06-14 07:52:06 +08:00
2007 年开发过一个 Google Reader ( RSS 订阅,早就不在了)的复刻版,抄它的界面风格,用的是 2+3 那种方法。除了 jquery 之外,纯手写 html/css/js……iframe 嵌入实在更早之前用的比较广泛,因为没有 AJAX 这东西,想做左右分栏的话,要么用 frameset ,要么 iframe 。

后面说的提升体验的方法通常是用预加载+缓存(列表页),或用摘要 /分页预加载(详情页),看自己怎么控制页面缓存的内存占用了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/936685

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX