V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
oyp
V2EX  ›  程序员

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

  •  
  •   oyp · 2022-06-27 13:18:02 +08:00 · 2884 次点击
    这是一个创建于 640 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我用 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
        1
    LIBQ  
       2022-06-27 13:21:44 +08:00
    第一眼看成了 sap 才点进来的

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

    直接在招聘平台发招聘信息 然后面试时候问相关的技术栈应用更快一点
    oyp
        2
    oyp  
    OP
       2022-06-27 13:25:23 +08:00
    @LIBQ #1 问题太小白了是吗😂😂😂
    oyp
        3
    oyp  
    OP
       2022-06-27 13:25:53 +08:00
    @oyp #2 我是不懂就问
    yyfearth
        4
    yyfearth  
       2022-06-27 14:01:19 +08:00
    @oyp jQuery 不是已经可以用 Backbone 来做 SPA 了吗?
    组件化和路由 10 年前的东西了
    当初比 Angular.js 还更普及来着
    yyfearth
        5
    yyfearth  
       2022-06-27 14:06:40 +08:00   ❤️ 1
    这么说吧 现在 jQuery 本身的存在价值已经很低了
    除非要支持 IE 和上古的浏览器
    基本上 jQuery 的绝大部分功能浏览器已经自带了
    除非是遗留项目 实在没有继续用 jQuery 的价值

    “jQuery 并没有很好地支持单页面应用程序开发”
    怎么会呢 当年 jQuery + Backbone + Bootstrap + Require.JS 差不多时间的还有 Ember
    SPA 就是这么起来的 然后才有的 Angular.js 再是 React Angular Vue 这些
    再古老一点的还有 ExtJS/Sencha
    TomatoYuyuko
        6
    TomatoYuyuko  
       2022-06-27 14:08:59 +08:00
    Jquery 和现代框架也不冲突啊,你完全可以借用其他框架的路由,再者 jq 社区当年那么庞大,现成的方案也有你查查就是了
    oyp
        7
    oyp  
    OP
       2022-06-27 14:29:14 +08:00
    @yyfearth #4 Backbone 是真的没听过,我回去看下历史😂😂😂😂
    @TomatoYuyuko #6 确实是
    @yyfearth #5 这是以前的技术吗?原来以前还有这种东西,现在都很难听到了,我最近找用 jQuery 去做 SPA 的教程,发现只是说用 location 和 history ,然后就直接说 Vue 和 React ,我现在想要了解一下以前的 SPA 开发教程,应该去哪里找呢?
    oyp
        8
    oyp  
    OP
       2022-06-27 14:32:51 +08:00
    我希望能使用 jQuery ,把多页面合并起来,用 display 去控制显示,这个不是很复杂,但是要配置路由的话,而且路由的改变要让页面也作出响应,我想用 jQuery 应该怎么做会更好呢?
    skinny
        9
    skinny  
       2022-06-27 16:20:25 +08:00
    别想不通
    lesismal
        10
    lesismal  
       2022-06-27 16:41:46 +08:00
    试试我这个:
    github.com/lesismal/pmjs

    本人非专业前端,主要原理就是多个页面共存,当前显示谁就把 i 其他的隐藏,纯原生、如果你控场能力强、性能可以做到最强。
    代码也不多,有需要的话 OP 可以随便改。
    kop1989smurf
        11
    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
        12
    kop1989smurf  
       2022-06-27 17:03:06 +08:00
    以上只是几分钟内的思考,肯定有所疏漏,楼主仅供参考。
    cheng6563
        13
    cheng6563  
       2022-06-27 17:40:53 +08:00
    基于 jQuery 的组件不是一堆。。。为啥你不能自己弄组件化。。。
    fox0001
        14
    fox0001  
       2022-06-27 17:45:58 +08:00 via Android
    当年 jQuery 用来屏蔽各个浏览器的 JS 不兼容,确实很好用,但是 IE 都挂了,加上 Webkit 内核大行其道,而且 jQuery 那庞大的体积……感觉没必要折腾 jQuery 了
    fox0001
        15
    fox0001  
       2022-06-27 17:47:13 +08:00 via Android
    @fox0001 #14 修正一下:“Webkit 内核大行其道”改为“ES6 普及”,更为恰当
    oyp
        16
    oyp  
    OP
       2022-06-27 17:47:18 +08:00
    @lesismal #10 这个我喜欢
    oyp
        17
    oyp  
    OP
       2022-06-27 17:48:55 +08:00
    @kop1989smurf #12 有点启发了,感谢
    hzxxx
        18
    hzxxx  
       2022-06-27 19:38:17 +08:00
    拿 react-router 用的 router 库来用
    Zzzz77
        19
    Zzzz77  
       2022-06-27 20:43:05 +08:00
    jQuery 已经完成了它的历史使命😂真的不值得再去折腾,目前用 jQuery 相比直接写原生 js 已经没有什么优势了。
    zhuweiyou
        20
    zhuweiyou  
       2022-06-27 20:51:35 +08:00
    jquery.pjax.js
    backbone.js
    Rache1
        21
    Rache1  
       2022-06-27 21:38:59 +08:00
    有 PJAX ,这里 P 指 Page ,不过也是很早的东西了
    runze
        22
    runze  
       2022-06-27 22:38:26 +08:00
    dagger8224
        23
    dagger8224  
       2022-06-27 22:41:20 +08:00
    @oyp 楼主你好,可以尝试一下 https://daggerjs.org ,使用原生 js 开发 SPA ,连 jQuery 都省了:)
    oyp
        24
    oyp  
    OP
       2022-06-27 22:43:52 +08:00
    @dagger8224 #23 这个看上去还可以,拿来学习一下
    ztcaoll222
        25
    ztcaoll222  
       2022-06-27 22:46:03 +08:00
    某大厂内部还在开发的 spa ,现在还用着 jq+ifame+vue😁
    adjusted
        26
    adjusted  
       2022-06-27 22:58:03 +08:00
    jquery mobile!
    oyp
        27
    oyp  
    OP
       2022-06-27 23:02:54 +08:00
    主要是我一直在用 Bootstrap 的响应式,手机和电脑都能适应,而之前的 Bootstrap4 是要求 jQuery 的,所以才一直在用 Jquery ,和我界面写的烂也很有关系。现在 Bootstrap5 是可以搭配很多主流框架了,有机会要学一下
    mahone3297
        28
    mahone3297  
       2022-06-27 23:05:52 +08:00
    要什么路由。。。div hide/show 不就解决了
    pytth
        29
    pytth  
       2022-06-27 23:20:04 +08:00 via iPhone
    用一个插件可以实现,叫做 InstantClick.js ,我还用这个插件写了一个油猴脚本让所有多页面网站秒变 SPA 。具体看:/t/848726
    pytth
        30
    pytth  
       2022-06-27 23:20:28 +08:00 via iPhone
    dagger8224
        31
    dagger8224  
       2022-06-27 23:43:11 +08:00
    @oyp 可以加入 qq 群: https://jq.qq.com/?_wv=1027&k=XxLkXILv 进行讨论哈
    AloneHero
        32
    AloneHero  
       2022-06-28 08:44:19 +08:00 via Android
    基本没有学校会教 react/vue ,自己学吧
    YoRolling
        33
    YoRolling  
       2022-06-28 17:08:16 +08:00
    当年拿 jQ+page.js 整过一个小玩具。需要模板引擎就加个模板引擎
    luffy
        34
    luffy  
       2022-06-28 18:59:27 +08:00
    别折腾了,直接上 react
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1011 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:31 · PVG 03:31 · LAX 12:31 · JFK 15:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.