前端新人,怎么知道前端的规范是什么? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
rookiemaster

前端新人,怎么知道前端的规范是什么?

  •  
  •   rookiemaster 2024 年 5 月 25 日 8063 次点击
    这是一个创建于 699 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如提交表单,可以在 form 里设置 action 提交,可以设置 button 的 onclick 方法触发一个函数调用 ajax 提交,也可以使用 jquery 序列化表单的数据然后使用$.post()提交。这其中有什么规范吗,就比如大家一都都用什么方法?

    47 条回复    2024-05-28 11:44:54 +08:00
    rookiemaster
        1
    rookiemaster  
    OP
       2024 年 5 月 25 日
    或者有什么比较标准(符合开发规范)的前端或者后端项目推荐吗
    flytsuki
        2
    flytsuki  
       2024 年 5 月 25 日   2
    果然是新人,好多年没用过 jquery 了。。。
    orlog
        3
    orlog  
       2024 年 5 月 25 日
    最重要的是理解规范,想明白它为什么要规定成那样,不要盲目的墨守成规,否则会变成人力机器,最终被 AI 工具所取代
    xuld
        4
    xuld  
       2024 年 5 月 25 日
    想知道规范是好事,说明有认真在学习。
    不过,另一个问题是你必须要思考的,那就是”为什么需要有规范?“

    规范会告诉你,这个地方应该怎样做。

    但很多地方不是简简单单遵循某个规范就可以的,而是需要随机应变的。

    就像某些人总认为 jQuery 过时了,用 jQuery 的就是菜鸟。这是非常片面的。
    有些场景下使用 jQuery 可能是最高效的。

    最好掌握规范的方式不是去死记硬背,而是掌握每种用法的优缺点,并择优使用

    `
    zhongerbing
        5
    zhongerbing  
       2024 年 5 月 25 日
    jq 应该也有封装好的表单库,多年不写 jq 都没关注过了。。
    rabbbit
        6
    rabbbit  
       2024 年 5 月 25 日
    form action 很老了,不再推荐使用。
    jQuery 现在也用的少,不过只有几个页面用用也不错。

    是要开发 UI 组件库吗?
    常用的方法是监听按钮事件,阻止掉默认的 form ,使用 fetch 提交。

    新人为什么会知道 form action ,还是看的资料太老了。
    kneo
        7
    kneo  
       2024 年 5 月 25 日   1
    每个公司,每个项目,每个框架,每个应用场景都不一样。自己观察总结。没有捷径。
    orzorzorzorz
        8
    orzorzorzorz  
       2024 年 5 月 25 日
    主楼提到的,我认为是规范的各类实现。op 的问题,我会理解成对“工具好多啊,怎么选啊,有啥祖传规矩没有”的困惑。答案是工具背后能带来多少好处,这个只能看具体场景。比如已经有了成熟的 fetch 封装库,那用 ajax 就没什么好处了。
    这块我理解为业务规范,还有编码规范、交互规范之类的。这些直接搜就是,但得知道这些东西的适用范围。得有“我要画个页面,那么 ui 设计的规范是啥样的...噢,想起来了有篇这个规范,我瞅瞅先”、“我要写 css 了,那么 css 变量规范是啥样的”这类的想法。
    当然在这之前,还是要想想“接下来使用的规范”能带来什么收益。
    yuuko
        9
    yuuko  
       2024 年 5 月 25 日
    梦回 2014
    oamu
        10
    oamu  
       2024 年 5 月 25 日
    这两种应该都不怎么用了,太原始了,当然维护上古项目就另说。现在基本都用组件库,使用 Form 表单组件设置回调函数就行了。
    quijote
        11
    quijote  
       2024 年 5 月 25 日
    啥项目啊,2024 年了还用接 q 睿
    coala
        12
    coala  
       2024 年 5 月 25 日
    应该看写好的项目, 先模仿着写
    AV1
        13
    AV1  
       2024 年 5 月 25 日   4
    @xuld
    jquery 就是过时了,要学也应该学 DOM API 。
    特别是那些在 vue react 里还非要引入 jquery 的。
    小范围的 DOM 操作我不反对,但是这种场景还非要用 jquery ,就是菜鸟了。
    xiaoming1992
        14
    xiaoming1992  
       2024 年 5 月 25 日 via Android   1
    re #6
    > form action 很老了,不再推荐使用。

    现在 react 推荐使用 form action 。

    关键是理解为什么要用 form action ,它解决了什么问题?解决了“页面水合完成前,页面无法交互”这个难题。react 服务端渲染、form action 都是在致力于解决这个问题
    uni
        15
    uni  
       2024 年 5 月 25 日
    @rabbbit remix 和 next 的表单提交都是用 action……
    wpzz
        16
    wpzz  
       2024 年 5 月 25 日
    多看少做
    rabbbit
        17
    rabbbit  
       2024 年 5 月 25 日
    @uni 为啥又用回 action 了,这样做有什么好处吗?
    bzw875
        18
    bzw875  
       2024 年 5 月 25 日
    jQuery 过时了
    uni
        19
    uni  
       2024 年 5 月 25 日
    首先肯定是根据你做的那个项目来了,你做的项目别的地方是怎么做的就复制粘贴同样的做法就行了
    如果是没有参考的,jq 首先要排除,用 jq 还不如用原生 dom 操作
    然后不同地方不同框架的推荐方式也不一样,国内的话大部分应该还是用“设置 button 的 onclick 方法触发一个函数调用 ajax 提交”的方法,直接用这个就行了
    但是最新的方向(往 ssr 走的)反而是偏向于 action ,可以去参考 remix 和 next 的文档,不过国内的人都不懂也没什么人跟进,如果你圈子在国内,对新技术又不是很好奇和激进的话不建议搞这个,在国内说这个可能会像上面那样让别人误以为你落后了
    rabbbit
        20
    rabbbit  
       2024 年 5 月 25 日
    xiaoming1992
    form action 不是会导致页面跳转吗,他们是怎么解决这个问题的?还是我记错了。
    uni
        21
    uni  
       2024 年 5 月 25 日   1
    @rabbbit #17 跟服务端渲染结合的,不用 js 加载就可以提交表单,可以去看下 remix 和 next 的文档
    rabbbit
        22
    rabbbit  
       2024 年 5 月 25 日
    @uni 谢谢,看来是我落后了
    bgm004
        23
    bgm004  
       2024 年 5 月 25 日 via Android
    @xuld jQuery 还能活着就是过时的人和新手被误导。
    多少网站使用 JQuery 就只是绑事件和切换 calss 。
    0Z03ry75kWg9m0XS
        24
    0Z03ry75kWg9m0XS  
       2024 年 5 月 25 日
    没点进来我还以为你要说组件拆分,命名,写法什么的。
    xiaoming1992
        25
    xiaoming1992  
       2024 年 5 月 25 日 via Android   1
    @rabbbit 如果 js 加载好了、页面水合好了,那就走 js ,发请求,前端更新页面;如果没有,也能保障基础交互(通过 form action 提交)。而这一切都是 react 自动完成的,开发人员只需要按照 action 的形式编码就行
    rabbbit
        26
    rabbbit  
       2024 年 5 月 25 日
    看了些资料还是没搞懂,form action 是为了把表单的处理往后端移吗?
    不会只是为了解决禁用 js 无法提交的问题吧。
    ebushicao
        27
    ebushicao  
       2024 年 5 月 25 日   1
    @rabbbit preventDefault
    xiaoming1992
        28
    xiaoming1992  
       2024 年 5 月 25 日 via Android   1
    根据我的理解,react 以及 mui 推崇的各种实践,都是在优化页面首次渲染。

    服务端组件是为了减少需要发送到前端的 js ; form action 是为了支持在 js 加载完成前页面也能交互;推荐使用 anchor 而非 js 跳转,同样是为了在 js 加载完成前也能交互(跳转);多端适配时建议使用 media query ,同样是为了这个目的
    oamu
        29
    oamu  
       2024 年 5 月 25 日
    @uni #19 国内清一色的信息系统项目,谁在乎 SEO ?也就没动力搞 SSR 。
    rabbbit
        30
    rabbbit  
       2024 年 5 月 25 日
    不确定理解的对不对
    form action 在 js 加载完毕后走 fetch 提交表单(跟现在常用的提交表单差不多),在 js 未加载完成时通过 <form action=""> 提交表单。
    next.js 会自动帮助用户处理表单 api 地址的问题。
    优点是 js 未加载完成前也能进行交互操作。
    xuld
        31
    xuld  
       2024 年 5 月 25 日   1
    关于提交表单是用 form 的 action 还是 button 的 onclick ,显然是首选 form 的 action 。

    表面上,通过 button 的 onclick 触发并提交数据,简单明了。

    但这样写会导致只能通过点击按钮来触发提交,其他交互方式则无法提交,比如:

    1. 通过在表单内的文本框按回车提交表单
    2. 通过”屏幕阅读器“提交表单
    3. 在禁用 JS 的浏览器上提交表单

    如果你能掌握这些细节,那这个问题的答案显而易见
    isSamle
        32
    isSamle  
       2024 年 5 月 25 日
    不延期就是最重要的开发规范,其他随便你造
    Forviler
        33
    Forviler  
       2024 年 5 月 25 日
    不用框架的话 jq 的比较多吧,form 里用 action 这种在现在看来应该是只存在于课本里的知识了吧,入行六七年没用过。不过现在如果真的工作用框架的占多数,Vue/React 。github 上找个星高的项目随便看看。 前几楼说的 理解为什么规范,你就知道该怎么写规范了
    okrfuse
        34
    okrfuse  
       2024 年 5 月 25 日
    前期规范不重要,思路实现方式才重要,后期慢慢就懂得规范了
    uni
        35
    uni  
       2024 年 5 月 25 日
    @oamu #29 我个人的观点,管理系统之类的重业务与数据、轻性能的项目,更加应该采取前后端不分离的分工方式,一个业务或者功能就应该由一个人从前到后全部打通,还要前后端分离一个功能分两个人做,增加了多少沟通成本
    n18255447846
        36
    n18255447846  
       2024 年 5 月 25 日
    前期不要考虑什么规范,多学。

    你说的就发请求,首先要处理好表单数据,表单里放个 submit 类型按钮,监听 form 的 submit 事件,处理完数据后用 xhr 或 fetch 发请求
    go522000
        37
    go522000  
       2024 年 5 月 25 日
    我个人对这些没啥规范。
    form 里设置 action 提交会刷新页面(或者跳转到新页面),很少用; button onclick 提交,方便把一些过滤、检测之类的放在一起; jQuery 的 $.post()提交一般与 button onclick 提交放在一起,如果这个项目有用到 jquery 就会直接用这个,方便。
    shiroyuri
        38
    shiroyuri  
       2024 年 5 月 25 日
    公司规范 > 社区规范 > 语言规范
    zmqking
        39
    zmqking  
       2024 年 5 月 25 日
    应该是算老菜鸟吧,还知道 jQuery ,
    v2er4241
        40
    v2er4241  
       2024 年 5 月 25 日
    https://github.com/ecomfe/spec

    看看这个是否对你有帮助
    HI101
        41
    HI101  
       2024 年 5 月 25 日
    请问下个为大佬 如何防止 form 表单重复提交?
    catch
        42
    catch  
       2024 年 5 月 25 日
    直接看 chromium 源码完事
    silence0812
        43
    silence0812  
       2024 年 5 月 25 日
    我的规矩就是规矩
    Torpedo
        44
    Torpedo  
       2024 年 5 月 25 日
    @rookiemaster #1 你说的这种是类似于 best practice ,而不是规范吧。就比如表单这个场景,浏览器原生是有很多 api 的。理论上你用原生的这些 api ,兼容性最好。但是这也要考虑你的产品。假如你的产品都是中后台,那么你可以抛弃原生,自己搞一套。

    之所以说是 best practice 就是因为这东西是个实践,实践就要考虑环境,比较依靠经验和技术。

    建议学习一些开源的写法。然后搜一下各种 api 的优劣
    liKeYunKeji
        45
    liKeYunKeji  
       2024 年 5 月 26 日 via Android
    没有什么规范。用什么工具链就用什么做法就行了。
    用 jQuery 就用 ajax 异步提交,用原生 Javascript 就用 XHR ,用 Vue 就用 axios 就行了。

    现在提交讲究的是前后端分离,不要用 form 的 action 了,这个会有默认跳转事件。
    signalas1
        46
    signalas1  
       2024 年 5 月 26 日
    按你团队的规范,已经有的功能直接复制粘贴,自己一个人怎么爽怎么来
    hesetiema
        47
    hesetiema  
       2024 年 5 月 28 日
    新时代的 jQuery 替代品:Alpine 。新的流行架构可供参考:AHAAstro + HTMX + Alpline 。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     3848 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 104ms UTC 05:12 PVG 13:12 LAX 22:12 JFK 01:12
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86