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

2022-06-27 13:18:02 +08:00
 oyp
我用 jQuery 很久了,从刚开始的多页面网站开发,到后来转为 SPA ,有时候会用 Electron ,把网页变成一个客户端。

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

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

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

我技术上还比较小白,想寻求一种更好的在 jQuery 环境下实现 SPA 应用开发以及 jQuery 配置前端路由的方案
3170 次点击
所在节点    程序员
34 条回复
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
以上只是几分钟内的思考,肯定有所疏漏,楼主仅供参考。
cheng6563
2022-06-27 17:40:53 +08:00
基于 jQuery 的组件不是一堆。。。为啥你不能自己弄组件化。。。
fox0001
2022-06-27 17:45:58 +08:00
当年 jQuery 用来屏蔽各个浏览器的 JS 不兼容,确实很好用,但是 IE 都挂了,加上 Webkit 内核大行其道,而且 jQuery 那庞大的体积……感觉没必要折腾 jQuery 了
fox0001
2022-06-27 17:47:13 +08:00
@fox0001 #14 修正一下:“Webkit 内核大行其道”改为“ES6 普及”,更为恰当
oyp
2022-06-27 17:47:18 +08:00
@lesismal #10 这个我喜欢
oyp
2022-06-27 17:48:55 +08:00
@kop1989smurf #12 有点启发了,感谢
hzxxx
2022-06-27 19:38:17 +08:00
拿 react-router 用的 router 库来用
Zzzz77
2022-06-27 20:43:05 +08:00
jQuery 已经完成了它的历史使命😂真的不值得再去折腾,目前用 jQuery 相比直接写原生 js 已经没有什么优势了。
zhuweiyou
2022-06-27 20:51:35 +08:00
jquery.pjax.js
backbone.js

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

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

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

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

© 2021 V2EX