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

上一次玩前端还是 JQuery 1.5 的年代,这两天玩了一下 React…………

  •  
  •   billtsui · 2020-04-20 14:53:36 +08:00 · 9068 次点击
    这是一个创建于 1438 天前的主题,其中的信息可能已经有所发展或是发生改变。

    写了 10 年的服务,上一次搞前端还是 2010 年,记得当时还是用 JQuery 1.5 。

    这段时间工作需要玩了一下 ReactJS,Taro,AntD 。妈的真香,真 TM 好玩!

    有没有前端大佬带我飞的,求一个前端群!

    84 条回复    2020-04-22 16:51:04 +08:00
    faceRollingKB
        1
    faceRollingKB  
       2020-04-20 15:34:02 +08:00   ❤️ 2
    要玩 angular 么
    IGJacklove
        2
    IGJacklove  
       2020-04-20 15:36:25 +08:00   ❤️ 2
    @faceRollingKB 这是邪教,React 大法天下第一。
    jydeng
        3
    jydeng  
       2020-04-20 15:37:27 +08:00
    Vue 考虑一下
    autoname
        4
    autoname  
       2020-04-20 15:39:33 +08:00   ❤️ 1
    啥 React 比 jq 香吗
    举个例子?

    $ajax('url','data')
    billtsui
        5
    billtsui  
    OP
       2020-04-20 15:46:57 +08:00
    @faceRollingKB 不玩,angular 是邪教
    billtsui
        6
    billtsui  
    OP
       2020-04-20 15:47:22 +08:00
    @jydeng 这个也挺香的,就是学不过来,更新太快了
    billtsui
        7
    billtsui  
    OP
       2020-04-20 15:50:12 +08:00   ❤️ 1
    @autoname 我说他香,就是我觉得他比 jq 香,杠精散去。
    autoname
        8
    autoname  
       2020-04-20 15:53:54 +08:00
    @billtsui 看谁的代码少,
    发个请求是怎么发的 React
    billtsui
        9
    billtsui  
    OP
       2020-04-20 15:54:46 +08:00   ❤️ 4
    @autoname 不看
    autoname
        10
    autoname  
       2020-04-20 15:57:21 +08:00
    @billtsui https://www.jianshu.com/p/74a5e5aba82f
    感觉。。。
    为啥说 jq 太重呢,
    ddup
        11
    ddup  
       2020-04-20 15:59:01 +08:00
    我居然成了邪教一员。
    elone
        12
    elone  
       2020-04-20 15:59:29 +08:00
    angular 邪教成员来报道
    SuperManNoPain
        13
    SuperManNoPain  
       2020-04-20 16:02:08 +08:00
    只会 jq 的不敢吭声
    billtsui
        14
    billtsui  
    OP
       2020-04-20 16:09:43 +08:00
    @SuperManNoPain 玩玩 React
    artyhacker
        15
    artyhacker  
       2020-04-20 16:13:53 +08:00   ❤️ 4
    @autoname 建议学习一下再发言吧,用 react 发个请求是什么鬼? 另外你写的那句 jq 就是发个请求,你引用的文章里发请求、处理 response 、处理异常、渲染页面全有了,但凡能看懂几句 js 也不会这么比吧...
    cydian
        16
    cydian  
       2020-04-20 16:15:27 +08:00 via Android
    @artyhacker jq 处理异常很复杂吗?
    artyhacker
        17
    artyhacker  
       2020-04-20 16:20:03 +08:00
    @cydian 不复杂.
    minglanyu
        18
    minglanyu  
       2020-04-20 16:22:35 +08:00
    jq 其实还有不少老项目在跑的,比如银行这种
    DOLLOR
        19
    DOLLOR  
       2020-04-20 16:26:49 +08:00
    @autoname


    //老式 jquery 写法
    $.ajax('url1', {
    data: {username: 'example'},
    success: function (res) {
    $.ajax('url2', {
    data: {somedata:res},
    success: function (res) {
    $.ajax('url3', {
    data: {somedata:res},
    success: function (res) {
    },
    error: function () {
    console.log('error')
    }
    })
    },
    error: function () {
    console.log('error')
    }
    })
    },
    error: function () {
    console.log('error')
    }
    })
    /////////////////////////////////////////////////

    //fetch api
    try{
    let res = await fetch('url1',{
    body:{username: 'example'},
    method: 'POST'
    }).then(res=>res.text())

    res = await fetch('url2',{
    body:{somedata:res},
    method: 'POST'
    }).then(res=>res.text())

    res = await fetch('url3',{
    body:{somedata:res},
    method: 'POST'
    }).then(res=>res.text())
    }catch(err){
    console.log('error')
    }

    再见,回调地域。
    MorningStar0
        20
    MorningStar0  
       2020-04-20 16:26:54 +08:00
    @autoname 所以发请求和用哪个前端框架有啥关系呢?或者实在想知道哪个代码少 fetch 了解下?
    billtsui
        21
    billtsui  
    OP
       2020-04-20 16:27:44 +08:00
    @minglanyu 还有 gov 的网站
    lancelock
        22
    lancelock  
       2020-04-20 16:32:13 +08:00
    确实好玩,用 hooks 更好玩了
    wunonglin
        23
    wunonglin  
       2020-04-20 16:33:06 +08:00
    ng 大法好
    murmur
        24
    murmur  
       2020-04-20 16:33:29 +08:00
    @DOLLOR 我记得 await 写法是不是有专属 bug,好像是 promise.reject 不触发异常还是啥
    billtsui
        25
    billtsui  
    OP
       2020-04-20 16:35:11 +08:00
    @lancelock 多谢大佬指点
    krystal9527
        26
    krystal9527  
       2020-04-20 16:37:07 +08:00
    为什么 angular 是邪教?我觉得挺好的,项目工程化
    billtsui
        27
    billtsui  
    OP
       2020-04-20 16:39:36 +08:00
    @krystal9527 不要太认真,你开心就好。
    autoname
        28
    autoname  
       2020-04-20 16:40:15 +08:00
    @MorningStar0 不知道这么比啊,只能拿常用的功能比了
    shintendo
        29
    shintendo  
       2020-04-20 16:58:09 +08:00
    @autoname 大哥,求你先学一下 react,你这例子举得我这个 react 黑都看不下去了
    ccyu220
        30
    ccyu220  
       2020-04-20 17:02:03 +08:00
    @autoname 大哥,下次找个合适的例子再来黑,用封装的请求函数来说框架,半毛钱都没联系。
    otakustay
        31
    otakustay  
       2020-04-20 17:06:42 +08:00
    我们现在请求都是
    const response = useResource('url', {data})
    这样子了,await 都不用
    faceRollingKB
        32
    faceRollingKB  
       2020-04-20 17:21:54 +08:00   ❤️ 1
    vue 、react 的数据请求概念都是 promise 那一套,如果想玩出花样的话建议试试 angular 的 observable,你会看到新世界
    Bramblex2
        33
    Bramblex2  
       2020-04-20 17:24:53 +08:00
    @autoname 黑都黑不到点子上哎……
    huijiewei
        34
    huijiewei  
       2020-04-20 17:29:01 +08:00
    @autoname 你在搞笑么?
    auroraccc
        35
    auroraccc  
       2020-04-20 18:10:25 +08:00
    @otakustay 这样咋处理异常啊
    jingcoco
        36
    jingcoco  
       2020-04-20 18:12:31 +08:00 via Android
    无耻的又来宣传一下 https://v2ex.com/t/661640#reply19
    sirnay
        37
    sirnay  
       2020-04-20 18:16:57 +08:00
    @faceRollingKB 然而可以自己加入 rxjs 随便玩
    otakustay
        38
    otakustay  
       2020-04-20 18:24:46 +08:00
    @auroraccc Suspense 处理异步,Error Boundary 处理异常: https://github.com/ecomfe/react-suspense-boundary
    faceRollingKB
        39
    faceRollingKB  
       2020-04-20 18:31:53 +08:00
    @sirnay 试过 vue 添加 rxjs,不好玩
    fescover
        40
    fescover  
       2020-04-20 18:33:25 +08:00 via Android
    auroraccc
        41
    auroraccc  
       2020-04-20 19:03:10 +08:00
    @otakustay 感谢,去了解一波
    autoname
        42
    autoname  
       2020-04-20 19:30:39 +08:00
    @Bramblex2 这怎么叫黑?黑它我有什么好处,就不能端正下看法?

    我是真不明白才问的,什么黑不黑的
    autoname
        43
    autoname  
       2020-04-20 19:31:26 +08:00
    @DOLLOR 感谢大佬科普
    raymanr
        44
    raymanr  
       2020-04-20 19:34:49 +08:00
    @DOLLOR
    呃, 先说我不是专业前端

    不过回调地狱这个不是用 Promise 就可以解决吗?

    也不用这一个就引入一个框架这么大的东西啊
    raymanr
        45
    raymanr  
       2020-04-20 19:38:10 +08:00
    其实我之所以不想学的原因是总觉得前端的东西变化太快了。。。除了 jq 以外的东西指不定说凉就凉

    反正我的页面简单,包装个类,然后用 get set 模仿一下数据绑定,顶层添加个事件监听 ,也凑活用了
    wildnode
        46
    wildnode  
       2020-04-20 19:56:47 +08:00
    @murmur 是 reject 出来的值用 await 接收不到,所以一般 async/await 都用 try/catch 来处理错误
    wildnode
        47
    wildnode  
       2020-04-20 20:00:22 +08:00
    @murmur 可能我说不明白哈。。补一段 MDN 上的解释

    When an async function is called, it returns a Promise. When the async function returns a value, the Promise will be resolved with the returned value. When the async function throws an exception or some value, the Promise will be rejected with the thrown value.

    按这个意思来看,如果 reject 了,是以 throw 的方式直接抛错误了,所以拿不到
    jon
        48
    jon  
       2020-04-20 20:57:04 +08:00
    @IGJacklove #2 为什么 angular 是邪教?
    billtsui
        49
    billtsui  
    OP
       2020-04-20 21:00:56 +08:00
    @faceRollingKB 多谢大神指点
    orzorzorzorz
        50
    orzorzorzorz  
       2020-04-20 21:06:36 +08:00
    react 是好玩,但玩厌了、碰到瓶颈了、累了,然后就会发现你会不知不觉地慢慢往 angular 的方向靠,然后慢慢研究测试、rx 、ivy 这些,然后就会发现,还是服务端好。:doge
    Canrz
        51
    Canrz  
       2020-04-20 21:46:02 +08:00
    @DOLLOR 你这都是多少年前的写法了。就我所知的 jQuery 1.7 版本 ajax 进行重写,改成 deferred,那都是已经 2011 年的版本了。
    wszgrcy
        52
    wszgrcy  
       2020-04-20 21:53:54 +08:00 via Android
    ng 大法好
    huijiewei
        53
    huijiewei  
       2020-04-20 22:32:44 +08:00
    @wildnode
    ```
    const flatry = (promise) =>
    promise
    .then((data) => ({ data, error: null }))
    .catch((error) => ({ error, data: null }))

    export default flatry
    ```
    使用方法
    const { data, error } = await flatry(promise)
    imswing
        54
    imswing  
       2020-04-20 22:53:59 +08:00 via iPhone
    vue 其实更好玩啊
    lewinlan
        55
    lewinlan  
       2020-04-20 23:07:42 +08:00 via Android
    力挺 ng 邪教!
    ooee2016
        56
    ooee2016  
       2020-04-20 23:37:13 +08:00
    同感
    itning
        57
    itning  
       2020-04-20 23:41:24 +08:00
    angular 赛高 虽然 市场份额最少...
    hareandlion
        58
    hareandlion  
       2020-04-21 08:45:02 +08:00
    Angular 始终给我 Java MVC 的既视感。。。还是 React 好玩
    qinxi
        59
    qinxi  
       2020-04-21 09:17:57 +08:00
    来了来了
    qinxi
        60
    qinxi  
       2020-04-21 09:18:45 +08:00
    @qinxi #59 几年前看到了,仅供娱乐...
    Felldeadbird
        61
    Felldeadbird  
       2020-04-21 09:52:58 +08:00
    所以没有前端群?

    我现在还在写 JQ 。VUE 目前还在观望中。
    我目前发现,JQ 最大问题还是项目复用性低,写着写着,感觉这代码以前就有啊。
    Tdy95
        62
    Tdy95  
       2020-04-21 10:25:26 +08:00   ❤️ 1
    @Felldeadbird
    前端框架的生态可以让你只关注你的核心业务代码,免去通用组件的开发,稍微复杂一点的页面,用 vue\reatc\angular 之类的现代框架开发起来,效率提升不是一点半点。
    fedfrank
        63
    fedfrank  
       2020-04-21 11:03:33 +08:00
    @Felldeadbird 前端群加我 vx:qianduanmi
    Chenamy2017
        64
    Chenamy2017  
       2020-04-21 11:13:56 +08:00
    VUE 入门快很香
    DOLLOR
        65
    DOLLOR  
       2020-04-21 11:27:25 +08:00
    @raymanr
    Fetch API 是浏览器内置的接口标准,如果想用它并不需要引入任何框架。它不是 vue 或者 react 的组件。😐
    我现在写快速原型直接用 Vanilla JS 已经足够了,连<script src="jquery.js">都嫌多余。
    Lawlieti
        66
    Lawlieti  
       2020-04-21 11:34:32 +08:00
    三天兴趣,一周后发狂
    StrayBugs
        67
    StrayBugs  
       2020-04-21 13:00:27 +08:00 via Android
    chocotan
        68
    chocotan  
       2020-04-21 13:09:28 +08:00
    我用 element ui 和 ant design 的感受是

    npm install 会遇到各种奇葩问题
    打个包,idea 卡成狗,时间比 java 应用打包时间都长
    TimLang
        69
    TimLang  
       2020-04-21 13:45:17 +08:00
    试试 flutter 啊,更好玩。
    Hanggi
        70
    Hanggi  
       2020-04-21 13:56:54 +08:00
    哈哈,Angular 都成邪教了,那些把传统 HTML/CSS 都弄成 js/jsx 对象处理不更邪教吗?
    zhouS9
        71
    zhouS9  
       2020-04-21 14:12:33 +08:00
    jq 转到 vue 无比震撼,现在玩腻了准备换 react 玩玩❤️
    hantsy
        72
    hantsy  
       2020-04-21 14:25:30 +08:00
    说 Angular XX,自己已经给自己打上了杠精的标签了。

    我个人几乎没用过 JQuery 。

    写一点前端的时候用过 Prototypejs, delicious, dojo,刚看到 JQuery 的时候,Angularjs (内置了一个 JQLite ) 来了。

    对于长期做后端的,特别是 Java 等 OOP 语言的,还是喜欢 Angular 系。在用 Angularjs 的就开始试用过了 React, 感觉一般,不是我首选,对于我而言,原因两个,1,对 TS,ES6+ 支持太慢了,最初版本只能用 ES5 (实在写不来),时到今日,React 还是太重的 JS 味。2,仅仅包含了 Components UI 部分,其它部分选择太多了,不是像 Angular 一样全栈的方案,当然对于高级 FE,选择多是好事。
    bzj
        73
    bzj  
       2020-04-21 16:33:25 +08:00
    @autoname 说 jq 太重是因为,有的页面即使只有一个 ajax 请求,也要引用 jquery 核心文件,然而 jq 压缩后也有几百 k
    autoname
        74
    autoname  
       2020-04-21 16:49:14 +08:00
    @bzj 谢谢回复,jq 的生态应该也是比较好的吧,比如各种特效什么的

    反正都是客户端的事情,“重”不到哪里去吧。没啥影响吧

    套用某大佬的,前端娱乐圈真 TM 的乱 哈
    bzj
        75
    bzj  
       2020-04-21 17:01:12 +08:00
    @autoname

    Jquery 我也用,Vuejs 也用,适合自己项目的才是最好的,没必要一味追新,不然坑的是自己。
    charten
        76
    charten  
       2020-04-21 19:58:07 +08:00
    @autoname ??? react 里不包括请求库的,人家只负责渲染。。。。比$(`<div>${2333}</div>`).append($('body'))好维护许多。。。特别是大型应用里。。。
    redbuck
        77
    redbuck  
       2020-04-21 23:17:37 +08:00
    vue3 发布了,不趁热来一发?

    vue 的 hooks 比 react 的好用多了
    xiaomingVTEX
        78
    xiaomingVTEX  
       2020-04-21 23:32:13 +08:00
    vue 才是最好的 vue 才是最好的 , 嘻嘻
    pandaii
        79
    pandaii  
       2020-04-22 09:26:32 +08:00
    目前在用 ng8,等 vue3 发布了可以试试搞一下,感觉 ts 还是很香的 :doge
    MYDTX
        80
    MYDTX  
       2020-04-22 09:39:28 +08:00
    async function getEdition() {
    return await $.getJSON('/home/material/edition');
    }
    jquery 也可以很香啊,回调什么的用 es6 新语法完全可以去掉的……
    框架只是做大项目更易于梳理维护,在语法上并没有什么优势。
    billtsui
        81
    billtsui  
    OP
       2020-04-22 11:52:09 +08:00
    昨晚看了 VUE3 的直播发布会,香气逼人啊!
    hbolive
        82
    hbolive  
       2020-04-22 14:01:10 +08:00
    @billtsui 2 还没整明白呢,3 都来了啊,那直接上 3 行不?
    faceRollingKB
        83
    faceRollingKB  
       2020-04-22 15:21:42 +08:00
    只希望 3 能把 ts 的支持做好一点,目前在 2.6 基础上加 ts 真的是坑
    billtsui
        84
    billtsui  
    OP
       2020-04-22 16:51:04 +08:00
    @hbolive 我一个前端初学者,你问我这么高深的问题,合适吗。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   964 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 20:47 · PVG 04:47 · LAX 13:47 · JFK 16:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.