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

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

  •  
  •   oyp ·
    oyps · 46 天前 · 2161 次点击
    这是一个创建于 46 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我用 jQuery 很久了,从刚开始的多页面网站开发,到后来转为 SPA ,有时候会用 Electron ,把网页变成一个客户端。

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

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

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

    我技术上还比较小白,想寻求一种更好的在 jQuery 环境下实现 SPA 应用开发以及 jQuery 配置前端路由的方案
    第 1 条附言  ·  45 天前
    我学校就教一下 HTML 和基础的 JS ,那些库一个都没讲,据说下学期讲 jQuery ,我 x ,垃圾学校

    如果你们知道我学校开的课程有多垃圾,就知道我为什么还在用 jQuery ,并且继续追随 jQuery 了😥
    34 条回复    2022-06-28 18:59:27 +08:00
    LIBQ
        1
    LIBQ  
       46 天前
    第一眼看成了 sap 才点进来的

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

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

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

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