在 jQuery 环境下，怎么开发 SPA 应用程序，怎么配置路由？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 882 天前的主题，其中的信息可能已经有所发展或是发生改变。

我用 jQuery 很久了，从刚开始的多页面网站开发，到后来转为 SPA ，有时候会用 Electron ，把网页变成一个客户端。

我们知道，jQuery 不像 Vue 或者 React ，可以组件化，也有成熟的路由框架，jQuery 似乎只是为你提供了丰富的工具库，并没有很好地支持单页面应用程序开发。

于是我针对 jQuery ，自己开发了一套路由控制系统，它适合 jQuery ，写得非常简单，但很实用，详情查看：www.wolai.com/oyps/d6YrVHCCqFBPmk9pj4mm1b

我用这套控制系统，开发了很多网站，比如：github.com/oyps/poncon-copyrighted-music

我技术上还比较小白，想寻求一种更好的在 jQuery 环境下实现 SPA 应用开发以及 jQuery 配置前端路由的方案

第 1 条附言 · 2022-06-27 22:49:19 +08:00

我学校就教一下 HTML 和基础的 JS ，那些库一个都没讲，据说下学期讲 jQuery ，我 x ，垃圾学校

如果你们知道我学校开的课程有多垃圾，就知道我为什么还在用 jQuery ，并且继续追随 jQuery 了😥

34 条回复 • 2022-06-28 18:59:27 +08:00

LIBQ

2022-06-27 13:21:44 +08:00

第一眼看成了 sap 才点进来的

这种的我建议你不要在网上问了

直接在招聘平台发招聘信息然后面试时候问相关的技术栈应用更快一点

oyp

2022-06-27 13:25:23 +08:00

@LIBQ #1 问题太小白了是吗😂😂😂

oyp

2022-06-27 13:25:53 +08:00

@oyp #2 我是不懂就问

yyfearth

2022-06-27 14:01:19 +08:00

@oyp jQuery 不是已经可以用 Backbone 来做 SPA 了吗？
组件化和路由 10 年前的东西了
当初比 Angular.js 还更普及来着

yyfearth

2022-06-27 14:06:40 +08:00

这么说吧现在 jQuery 本身的存在价值已经很低了
除非要支持 IE 和上古的浏览器
基本上 jQuery 的绝大部分功能浏览器已经自带了
除非是遗留项目实在没有继续用 jQuery 的价值

“jQuery 并没有很好地支持单页面应用程序开发”
怎么会呢当年 jQuery + Backbone + Bootstrap + Require.JS 差不多时间的还有 Ember
SPA 就是这么起来的然后才有的 Angular.js 再是 React Angular Vue 这些
再古老一点的还有 ExtJS/Sencha

TomatoYuyuko

2022-06-27 14:08:59 +08:00

Jquery 和现代框架也不冲突啊，你完全可以借用其他框架的路由，再者 jq 社区当年那么庞大，现成的方案也有你查查就是了

oyp

2022-06-27 14:29:14 +08:00

@yyfearth #4 Backbone 是真的没听过，我回去看下历史😂😂😂😂
@TomatoYuyuko #6 确实是
@yyfearth #5 这是以前的技术吗？原来以前还有这种东西，现在都很难听到了，我最近找用 jQuery 去做 SPA 的教程，发现只是说用 location 和 history ，然后就直接说 Vue 和 React ，我现在想要了解一下以前的 SPA 开发教程，应该去哪里找呢？

oyp

2022-06-27 14:32:51 +08:00

我希望能使用 jQuery ，把多页面合并起来，用 display 去控制显示，这个不是很复杂，但是要配置路由的话，而且路由的改变要让页面也作出响应，我想用 jQuery 应该怎么做会更好呢？

skinny

2022-06-27 16:20:25 +08:00

别想不通

lesismal

2022-06-27 16:41:46 +08:00

试试我这个：
github.com/lesismal/pmjs

本人非专业前端，主要原理就是多个页面共存，当前显示谁就把 i 其他的隐藏，纯原生、如果你控场能力强、性能可以做到最强。
代码也不多，有需要的话 OP 可以随便改。

kop1989smurf

2022-06-27 17:00:44 +08:00

其实楼主想做的就是通过多个 div 的 show 与 none 来实现所谓的“单页面”。
大概 8 、9 年前做过一个。

需要做的一共是三步：
1 、动态加载 html 添加到主页面中（看了楼主的介绍，应该已经实现了）。
2 、控制界面的生命周期，实现页面的 init 和 callback 事件。
3 、解决 js 、css 的冲突干扰。

2 的话，在过去可以用原型链实现继承，现在已经直接支持继承了。每个页面的 js 均继承一个父类，父类存在 init 函数与 callback 函数，每个页面去分别实现即可。router 中调用对应的 init 、callback 函数。

3 的话，当年我才疏学浅没有解决，靠编码规则规避了。如今看来变量可以利用 js 的作用域、闭包特性来解决。css 样式还没思考到好的方式。

kop1989smurf

2022-06-27 17:03:06 +08:00

以上只是几分钟内的思考，肯定有所疏漏，楼主仅供参考。