随着 JSX 大火,是不是意味着前端重新发明了 PHP 语言? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
3dwelcome
V2EX    前端开发

随着 JSX 大火,是不是意味着前端重新发明了 PHP 语言?

  •  
  •   3dwelcome 2021-06-18 16:04:02 +08:00 3803 次点击
    这是一个创建于 1652 天前的主题,其中的信息可能已经有所发展或是发生改变。

    React JSX 以代码精炼著称,但 XML 又没有版权,各种框架纷纷效仿。

    JSX 是 JS 里嵌套 HTML 标签,和 PHP 的 HTML 标签里嵌套代码,两者有点殊途同归的感觉。

    前端发展了那么多年,最终还是没能逃出 PHP 语法的影子嘛。

    有人会说 PHP 是后端语言不一样,但其实随着这些年 WASM 普及,前端早就可以嵌入 PHP 了。

    28 条回复    2021-07-16 15:13:17 +08:00
    Rrrrrr
        1
    Rrrrrr  
       2021-06-18 16:04:54 +08:00   1
    ???
    murmur
        2
    murmur  
       2021-06-18 16:06:27 +08:00
    jsx 代码精炼?笑了,跟模板还差一点,完全是开发者偷懒,然后搞出一堆所谓借口,然后被前端一顿吹

    vue 支持 jsx,vue 里写的是 class 不是 className,从亘古开始,html 里写的就是 class,什么时候写过 className
    murmur
        3
    murmur  
       2021-06-18 16:07:58 +08:00
    *vue 就算是 jsx 语法写的也是 class
    meteor957
        4
    meteor957  
       2021-06-18 16:08:23 +08:00
    @murmur 你这个『亘古』给我看笑了
    3dwelcome
        5
    3dwelcome  
    OP
       2021-06-18 16:10:15 +08:00
    @murmur JSX 就是为了脱离模板自定义语法,把组件做成库,任何 JS 环境都能调用。

    而 VUE 那种对模板语法有很大修改的入侵式框架,写出来的组件,只能给 VUE 自家来用,移植性不好。
    murmur
        6
    murmur  
       2021-06-18 16:11:49 +08:00
    @3dwelcome jsx 是标准 js 和 html 语法么,不是,需要 loader 么,需要

    既然需要 loader,为啥不多做一点

    和 html 一样的语法,模板 if 、模板 for,这些东西属于可以不用,但是必须得有
    shintendo
        7
    shintendo  
       2021-06-18 16:17:57 +08:00
    缓缓打出一个问号,嵌后端代码和嵌前端代码是一回事吗……
    3dwelcome
        8
    3dwelcome  
    OP
       2021-06-18 16:19:41 +08:00
    @murmur 模板 IF/FOR 都是对于 HTML 模板的扩展,又不像 JS 有标准可循,大厂都希望发明自己的语法,毕竟 VUE 距离一统天下,还很遥远。

    而且代码写好后,大部分人都懒得修改。很多年后你的 VUE 模板写法也许跟着框架升级变了,可是 JS 是不会变的。
    U7Q5tLAex2FI0o0g
        9
    U7Q5tLAex2FI0o0g  
       2021-06-18 16:20:10 +08:00
    是是是,你说的都对
    Leviathann
        10
    Leviathann  
       2021-06-18 16:25:28 +08:00 via iPhone
    后端语言明显是被 xml 搞恶心了
    以至于开发的用来写页面的 dsl 都刻意避开 xml
    比如 kotlin 和 rust
    sunjourney
        11
    sunjourney  
       2021-06-18 16:25:34 +08:00   1
    @murmur #6 半桶水说话就不要这么自信了好么
    ragnaroks
        12
    ragnaroks  
       2021-06-18 16:36:09 +08:00
    不是 jsx 大火,是模板引擎
    shintendo
        13
    shintendo  
       2021-06-18 16:36:29 +08:00   2
    @3dwelcome 大家都是 render funtion 的语法糖,大家也都不是标准,为啥一个就比另一个移植性高了
    3dwelcome
        14
    3dwelcome  
    OP
       2021-06-18 16:46:56 +08:00
    @shintendo 因为 JSX 代码可以写成库,在别的框架里,都可以随便调用。

    可是模板里写了 V-IF,就只有 VUE 框架能认识。
    ragnaroks
        15
    ragnaroks  
       2021-06-18 16:54:59 +08:00
    @shintendo 正解

    @3dwelcome vue 项目也是可以打包成单个.es 或.js 的,比如 vue-toast,打包后的单个 js 文件的内容其实就是各种 createElement
    ragnaroks
        16
    ragnaroks  
       2021-06-18 16:56:14 +08:00
    sof 上有如何使用 react 和 vue 编写油猴脚本的教程,你自己搜看下就明白了
    Jirajine
        17
    Jirajine  
       2021-06-18 16:57:51 +08:00 via Android
    这个真不一样,最大的区别是动态化。后端语言里套的是模板,数据更新了就得重新请求整个页面。而 jsx 写的是交互式、响应式的完整应用。
    Shy07
        18
    Shy07  
       2021-06-18 17:02:50 +08:00 via iPhone
    “ JSX 是 JS 里嵌套 HTML 标签,和 PHP 的 HTML 标签里嵌套代码,两者有点殊途同归的感觉。”


    楼主再仔细想想真的是殊途同归,而不是背道而驰?
    mxT52CRuqR6o5
        19
    mxT52CRuqR6o5  
       2021-06-18 17:03:33 +08:00 via Android
    一个是拼字符串,一个是语法糖,差多了
    AV1
        20
    AV1  
       2021-06-18 17:30:13 +08:00
    如果你觉得“殊途同归”,那就说明你肯定也不懂 Object 和 JSON 的区别。
    3dwelcome
        21
    3dwelcome  
    OP
       2021-06-18 18:16:12 +08:00
    @Jirajine "后端语言里套的是模板,数据更新了就得重新请求整个页面。"

    时代变了,你可能不太清楚,现在 HTML 可以和 PHP 混写。

    <script type = "text/php">
    <?php echo "Hello, world!";?>
    </script>

    只需要 npm install php-wasm, 就那么简单
    Jirajine
        22
    Jirajine  
       2021-06-18 18:44:31 +08:00 via Android
    @3dwelcome 这样用显然不是“后端语言”。
    nodejs 和浏览器里的 js 是不同的东西。
    wanguorui123
        23
    wanguorui123  
       2021-06-18 19:02:07 +08:00 via iPhone   1
    我最讨厌在 XML 里写一堆判断和控制逻辑语法,JSX 这种代码堆久了,写法不克制,维护只会越来越麻烦
    Desiree
        24
    Desiree  
       2021-06-18 19:43:46 +08:00
    引战帖,鉴定完毕
    otakustay
        25
    otakustay  
       2021-06-18 19:52:26 +08:00
    @murmur 那啥,jsx 不需要 loader,需要 babel 插件……你可别说得好像用些 ES 的新语法也要 babel-loader 最后为什么 ES 不多做一些
    akira
        26
    akira  
       2021-06-18 21:35:36 +08:00
    和 php 没啥关系,以前的 asp jsp 还不是一样的各种 html 到处飞。 只能说,人都是趋于偷懒的写法的
    Cbdy
        27
    Cbdy  
       2021-06-19 15:50:41 +08:00
    @murmur

    一方面,自古以来没有写过 className ?那 HTMLElement.prototype.className 是啥? HTMLLabelElement.prototype.htmlFor 是啥?

    另一方面,React 的 JSX 用 class 不能用吗?可以用的大兄弟,React 没有规定一定要用 className
    shilianmlxg
        28
    shilianmlxg  
       2021-07-16 15:13:17 +08:00
    又想到之前认识一个“大佬”
    因自己写 jsp
    所以自己的职位定义的是全栈
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2555 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 01:42 PVG 09:42 LAX 17:42 JFK 20:42
    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