一个后端程序员对前端技术的彩虹屁

[WadeLaunch]

我上次正式的写前端代码还是 10 年前，那时候要处理各种浏览器的兼容问题，IE 678 ，Firefox ，Chrome 等等。那时候 WebSocket 标准还是草案阶段，Firefox 和 Chrome 实现的版本还不一样，其他浏览器根本不支持，要开发一个聊天的功能，用了多种方案兼容不同的浏览器。

那时候大家的简历都是写的“熟悉 Div+CSS”，哈哈。而我从来没有真正把 CSS 里的 float: left|right, clear: left|right 搞明白，只知道加了某一行，刷新浏览器，噎，可以了。

JavaScript 框架大部分都是用的 jQuery ，有些项目用的 IBM 的 dojo ，还有 Yahoo 的什么框架，名字也忘记了。

用 Node.js 写聊天功能的后端逻辑，各种回调搞到吐。

后来也写过一些自己用的监控管理页面，一般都是用的 jQuery 和 Bootstrap 。

---

直到最近我要做一个业务管理后台，同时想趁机学一下久仰大名的 Vue 和前端的各种最新技术，就找到一个使用 Vue 的开源后台方案。在学习使用这些新技术过程中，让我每天都感叹现在的前端技术太强了，太好用了，太牛逼了。

请原谅我下面的失态。

ES6 真是太好用了！！！

1. for of, for in, Array.isArray(), Object.keys()...，让循环简单了很多。
2. Let, const, destructuring, template string 太方便了。
3. async, await, promise 太好用了，彻底解决了回调黑洞。
4. Arrow function 赞赞赞！
5. fetch() 这个 API 真是简练啊，同时给 axios 点赞。
6. 给 new FormData() 点赞！
7. 各种浏览器都实现了 ES6 ，然后终于把 IE 淘汰了（同情还要兼容 IE 的朋友）
8. 还有很多优点没写，有同样感觉的可以补充。

CSS 里的 display: flex 真棒！ CSS 其他的新技术我还没学，肯定有很多好用的技术。

然后 Vue 太牛逼了！想起以前用 jQuery hide/show 、append DOM 苦日子，我现在每天都感叹 Vue 牛逼！这就是响应式(reaction) 啊？

题外问：非浏览器的原生界面是否一直都是响应式这种方案？ Vue 是把这种技术移植到了浏览器前端？

再来一次：Vue 牛逼！

在编辑器保存后浏览器自动刷新界面，太方便了🥰。这是用 vite 实现的吧？还没有仔细研究 vite 的功能。

最后，TypeScript 这么牛逼的语言 V 站上怎么才 5 页讨论帖啊，比 Rust 还少，它比 Rust 简单多了吧，是大家很少用吗？类型系统这么强的语言怎么不用，能避免大部分写 JavaScript 时的低级 bug ，赶紧用起来。 虽然我现在不用 Node.js 了，但我认为新项目应该要强制用 TypeScript ，可以避免很多问题。

我本来打算上周就写贴彩虹屁的，但拖延症发作，今天看到下面这贴，被它催更(写)了。 “现在的前端技术栈真的太恶心了！”

[WadeLaunch]

我本来打算上周就写贴彩虹屁的，但拖延症发作，今天看到下面这贴，被它催更(写)了。
现在的前端技术栈真的太恶心了！
#/t/821702
--------
抱歉，主楼中不能写网址，要不发不出来。

[WadeLaunch]

我本来打算上周就写贴彩虹屁的，但拖延症发作，今天看到下面这贴，被它催更(写)了。
现在的前端技术栈真的太恶心了！
/t/821702
----
原来是这样链接站内贴，请管理员高抬贵手，不要删除。

[xuxuxu123]

楼主只是从 jq 直接到现在的脚手架方案，觉得很牛逼~~~，却不知道这 10 年前端经历了什么，累死了多少前端狗(别喷，本人也是)；

[otakustay]

@xuxuxu123 #3 整个技术的发展都在不断地让人可以做更少的重复工作、写更少的质量不可控的代码，前端狗不是被累死的，是学习学死的

[Dragonphy]

@otakustay 后端也一样啊，卷得不行

[zxcslove]

借楼问一下，微信 PC 版支持 ES6 了吗？

[murmur]

ts 主要是带来的枷锁是个问题，你都选了弱类型语言了，如果说强类型真的是万能药，那么 java 和 c#写出的项目应该美如画

[murmur]

我见过太多的例子了，别人都写了多少业务了，他还被一堆类型定义和检查折腾的死去活来

[zzhbbdbbd]

@murmur 这应该是静态类型和动态类型的问题，而不是弱类型和强类型的问题... 类型可以让问题提前暴露在编译时而不是运行时

[hlwjia]

作为后端程序员，你应该会更喜欢 react

[james2013]

@murmur python 代码看的我恶心,有时方法的传值我都不知道参数是什么,要好好看代码
敲代码时不小心打错字了,也正常编译和运行,直到运行到该端代码,才发现结果不正常或者报错

[pigspy]

作为后端程序员，我确实更喜欢 react
从 react 的代码里，可以看到一种思想，一种理念，一种坚持，难能可贵
学 vue 的时候，没有感受到这种编程上的美感

[zzhbbdbbd]

@james2013 py3.9 支持类型注解，渐进式类型能解决这个问题，不知道参数是什么，方法名是什么，这些都是因为没有静态类型来支撑 code hint 导致的。以后越来越多的 py 库加上了类型注解，这些问题都会没有

[seakingii]

typescript 的类型定义和检查真的折磨人

[murmur]

@pigspy 美感可算了吧，jsx 连最基本的代码对齐都没法保证，你的 if 和 for 要掺杂多少世俗进去

vue 的 if 和 for 是标签，不破坏对齐的

[murmur]

前端从盘古开天辟地以来写的都是 class ，到 react 就成了 className ，然后你跟我说一种坚持

[aababc]

@zzhbbdbbd python 注解感觉也是半吊子，循环引用搞起来头大，IDE 定位一个方法，出来一大坨（可能是我不会用），不过现在也是越来越好了。

[66beta]

react 美在哪里？

虽然写着 react ，但我觉得单 vue 单文件组件方案比较好

[WadeLaunch]

#2 @xuxuxu123
哈哈，大家终于趟过泥水河，走上了光明大道。
感谢前人的探索。

[MonkeyD1]

啊哈哈哈

[WadeLaunch]

@hlwjia #10
还没学 React ，只看了一眼语法，HTML 标签和 JavaScript 代码混在一起的，一时还没适应过来。
这种就是 jsx 吧？

[zhaol]

相比于 vue ，我虽然也更喜欢写 react ，但是楼上吹的思想，理念，坚持，难能可贵，是不是有点吹的过了，反倒是 vue ，对于降低前端门槛（新手入门 /后端兼职前端），降低小公司开发成本，做出了自己的贡献，比所谓的思想，理念是不是更有实际意义一点？

[tabris17]

@murmur 更别提那些 ts+any 了

[hlwjia]

@WadeLaunch #21

我只是觉得 react 更像在写后端，就是用程序产出 HTML ；

vue 我写地少，不知道现在是怎样了，但是以前 vue 给我的感觉是在 HTML 里面加了编程的语法。

所以我说后端会更喜欢 react ， 多数前端可能更喜欢 vue 因为更贴近他们原本的工作方式

[murmur]

@hlwjia 那你不是更说错了，后端在 jsp 年代就写 template 了，jsx 是个什么东西

[theprimone]

@66beta 我是从 React 入门，之前写了点 Vue ，不习惯 2333

[libook]

比较牛□的是，jQuery 几乎所有功能都能在新的原生 Web API 里找到替代方案，可以去了解一下 You Might Not Need jQuery 。

还不算完，WebWorkers 可以实现一些多线程工作了，以及用 Rust 写 WebAssembly 可以把性能坑也给填了。
另外 WebComponents 有大一统框架组件方案的趋势。

喜欢 Flex 布局可以去了解一下 Bulma 。

[lichdkimba]

new FormData()不是上古时期就有了么。。。。。

[lichdkimba]

@lichdkimba 查了一下 原来是 ie10 时期才有 感觉写法很古早

[makelove]

@pigspy 别这样，你这是先有信仰再找理由，我这种写了几年 react 受不了转 reactive 的算什么

[shakukansp]

#21 @WadeLaunch 没写过别的语言的模板语法？ smarty 没用过？

[nziu]

@zxcslove 支持，内核版本 81

[zxcslove]

@nziu 收到，这帮人总算想起来自己家有 PC 版了

[2i2Re2PLMaDnghL]

@murmur acl 时代就是用 s expr 结构化地定义生成结果了，template 这种字符串里嵌魔法的又是什么东西

[Buges]

恰恰相反，浏览器作为最大的 GUI 平台，一直是处于领先地位的，其他 GUI 平台后来才慢慢 adopt 浏览器生态发明的范式。

[liufish]

Android 开发一枚，之前用 ts 写 cocos creator 。发现 ts 真是太棒了。

[jjwjiang]

作为一个 8 年全栈，我跟你说你觉得好用的部分很多是外部环境的变化

包括不仅限于

浏览器更新换代，IE 没落
ES 新标准的普及以及浏览器支持
大众对 BS 程序有了更普遍的认识和期望

最后才是前端编程技术的更新换代，说实在的我没觉得纯技术上能带来太大的区别，vue react 是方便，但是从 html jquery 过来的谁没做过类似的数据驱动 HTML 的库呢，要产生质的区别还是不同因素一起起作用的结果。

现在做前端开发比过去舒服太多了。

[shunia]

明明 ts 和 react 都挺好的，也很少有人喷 vue ，为什么有个人在所有这种帖子里都要拉一踩多，是真的无语。。。

[lyz1990]

布局的话一定要看一下 grid ，简直是哲学

[ghostsf]

说白了，就是发明了一些语法糖，工具，脚手架，方便开发。其实虚拟 dom 并没有多好。

[yuezk]

哈哈，有点就像三体里面冬眠的人醒来之后的感觉

[leega0]

什么三大框架，Web Components 才是未来。

[DOLLOR]

TS 真是舒服，特别是按下点的时候，就弹出想要的东西。不用像以前写 JS ，老记不住接口、字段名，要来回在代码和文档之间反复切换，还怕拼写错误。

[qichunren]

了解一下这个 hotwired 这个技术

[tairan2006]

主要还是浏览器更新换代了

另外 React 有个 P 的美感

[Austaras]

@murmur js 里哪来的 class 给你用啊，谁告诉你 jsx 是 html 的

[murmur]

@Austaras 长得像 html ，又不是 html ，处处都是异类，坚持原生 js 就不要用 xml 语法啊，倔强到底

[lanten]

@66beta


所谓单文件就是 css 与 js 放在一起，小组件无所畏惧，大型业务组件呢？上千行的代码难道不是糟糕的代码吗？

[murmur]

@lanten react 可以拆函数，vue 也可以拆组件，大型业务组件都不拆 react 只会可读性更糟

[lanten]

@murmur

只有新手才会在 jsx 中添加大量业务代码。

vue 的 template 类 UI 描述方案饱受诟病的核心原因是在 js 代码中无法插入元素，只能手动创建 VNode ，以及没有 TS 类型提示，这将导致功能性、灵活性丢失。

[sunmoon1983]

Yahoo 的那个是吊 YUI 吧？

[TomatoYuyuko]

我是 jq->knockout->vue ，算是平滑过渡了，我感觉这才叫解放生产力。花里胡哨的东西终将被历史淘汰

[ilylx2008]

最近用 vue ，也是同样感慨。

[shapl]

最近在写 nuxt.js ，更加感慨。

[chouchoui]

前有吹 Go 语法美感，后有吹 React 美感
🤢

[SxqSachin]

工作写 vue ，个人玩写 react 。还是喜欢 react 一些，不喜欢 vue 可能是因为公司里的屎山代码搞得我心态崩溃。

[CodingNaux]

看 vue 的文档总头昏.vue3 composition api 没 react hook 那么自然

[Incrus]

@Austaras https://zh.javascript.info/class
有 class 的

然后 @murmur `前端从盘古开天辟地以来写的都是 class ，到 react 就成了 className ` 指的应该是
<div class = 'container'>这种 到 React 里面就是<div className = 'container'>

[zhea55]

@66beta

组件式的编程思维、函数式的编程方式。

控制组件的输入、输出，单向数据流，到处无副作用的方法，不可变数据。


到处都体现着 react 对程序的健壮性、可靠性的极度负责。

[TypeError]

不知道是不是文档水平问题，我作为熟悉 python 、go 的后端，
学起 react 很舒适，vue 总是感觉很别扭

[Alander]

@lanten

“只有新手才会在 jsx 中添加大量业务代码。” 新手解决这个的问题不就是拆分函数吗？

“上千行的代码难道不是糟糕的代码吗？” React 、webpack 、vue 的源码中均存在大量上千行的代码，它们也都是糟糕的代码吗？

“vue 的 template 类 UI 描述方案饱受诟病的核心原因是在 js 代码中无法插入元素，只能手动创建 VNode ”，都不讨论什么业务场景下驱使开发者即使在使用了 Vue 或者 React 框架后仍需要在 js 中插入元素了，你说的 Vue 只能手动创建 VNode ，那同样的需求场景下 React 不也是只能手动创建 ReactElement 吗？

“以及没有 TS 类型提示，这将导致功能性、灵活性丢失。” 这句话居然没有人反驳也是很奇怪。

React 和 Vue 的优劣势明显的很。但是抓着说 React 写出来的 jsx 优美，我用了这几年 React 真不觉得，虽然 Vue2.x 中连最基本的 @click 事件传参都做不到统一，但是 Vue 的 template 就是 template ，js 就是 js ，这一点来对比，说 jsx 优美的话应该很多人都不服气吧。

楼上吹的理念、坚持听着就想笑，React 设计的初衷是什么我不得而知，但是给了开发者更多的对应用和代码控制权限的同时写出来的代码必不可能优雅到哪里去。

[66beta]

@lanten 能写出来上千行的朋友，用 react 不也是上千行

[otakustay]

@Dragonphy #5 这样挺好的，真正有兴趣的人是学不死的，最后他们会更有竞争力被留下来，不会劣币驱逐良币

[DOLLOR]

冷知识，react 的 className 和 htmlFor 都是 web 标准。
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor

[selfcreditgiving]

非针对哈，只有我觉的楼主很有钓鱼嫌疑嘛，呵呵。
楼主挺厉害，故意把 数据绑定 写成 响应式，
故意说不懂前端，TypeScript 也用上了，nodejs 写后端也用过了。async await promise 也用的很溜了。

我想楼主可能已经是用原生 js 自己写组件的前端大牛了吧。

[gadfly3173]

@DOLLOR #64 可问题是在 react 里写 render 的时候写得是一堆长得很像 html 的东西，但是你又得按照 js 的思路来加属性

[gadfly3173]

@selfcreditgiving #65 数据绑定和响应式这个锅也许该给 vue 的文档，vue 的文档里有专门讲响应式 api ，但是没有特地提数据绑定，提数据绑定的时候基本都是在说组件传参

[rrfeng]

建议楼主学一下 Angular ，后端思维都不用变的，直接干

[darknoll]

前端门槛太低了，一天就能学会了

[wjploop]

回题外问：Android 原生界面是落后浏览器前端技术的，一直在学，从未跟上，曾出了一个 ViewDataBingding ，似乎没多少人用

[Aditya]

@darknoll 牛蛙

[chunzhang5748]

@darknoll 666 我觉得你不用学都会 这玩意还用学

[M003]

但是真正的从那个年代的人才懂得 js 的乐趣，全是 vue ，全是组件。手撸轮播图的感觉多爽，现在又有多少人只会写业务了。。。

[shyling]

jsx 虽然糅合了 html + js ，但用起来确实很香 =。=

不像 @click :bind v-if="字符串里写代码"，让人觉得那么别扭。。<slot>也是凭空出来的定义

jsx 就一个 html 标签 + {里写表达式}

[murphytalk]

@rrfeng 哈哈，后端写了十几年以前只鼓捣过 jQuery ，两年前开始全栈用的就是 Angular 全家桶，感觉很爽啊。另外不解楼上抱怨 Typescript 类型检查的，你们是继承了多少历史 JavaScript 代码还是上手就把 Typescript 当 JavaScript 用 any 满天飞啊😯项目稍微大点没有类型检查你们得损失多少睡眠啊，更不用说因为有类型帮忙 IDE 也可以聪明准确若干倍。现在连 python 都有 typing 了。另外有人用 svelte 吗

[zhwithsweet]

作为后端程序员，我确实更喜欢 angular
从 angular 的代码里，可以看到一种哲学，一种体系，一种笃定，难能可贵
学 vue 的时候，没有感受到这种编程上的美感

[cmdOptionKana]

作为后端程序员，我确实更喜欢 vue
从 vue 的代码里，可以看到一种哲学，一种变通，一种柔韧，难能可贵
学 react 和 angular 的时候，没有感受到这种佛光普照度众生的美感

[123jiayue]

@cmdOptionKana 你写个代码怎么那么多感悟 还佛光普度众生 不知道还以为你边嗑药边写代码写到飞升😄

[123jiayue]

@cmdOptionKana 好吧我更应该吐槽你上面那一个🐶

[alexkkaa]

这些 c#早都玩过了。mvvm xaml 十多年前就有了，可惜是基于 xml 的，xml 堪称最垃圾的发明，罗里罗嗦，简直跟 java 绝配。

[gadfly3173]

@shyling #74
1 、虽然可以在 vue 的指令里直接写很多代码，但是应该没有正常人会这么写吧。。。常规做法就是在这些地方传入一个值，这个值可以是 data 、computed ，也可以是 methods 返回的
2 、slot 也许看着有点怪，但是你理解成<div><slot></div>的话，slot 和你平时写在 div 之类的地方里的内容没什么区别

[lanten]

@Alander

“只有新手才会在 jsx 中添加大量业务代码。” 是反驳 @murmur 在 15 楼的观点。

依赖库中存在大篇幅代码和业务代码中的上千行是两码事，你在日常开发中根本不需要阅读和维护库中的代码，而业务代码不同，篇幅越大越难以理解。

react 的优雅是在于程序设计，而不是代码范式。

你似乎不太理解插入元素的含义，插入的不是原生 dom ，而是 jsx 虚拟 dom ，我真的不太明白你是怎么理解到那上面的，这让我感觉你似乎不是很懂。

逐句对线你似乎怒气很大，就像炸了毛的刺猬，有点好笑。

[murmur]

@lanten 所以我帮你总结下观点

vue 对 ts 支持不好

这不就完了

[shyling]

@gadfly3173 写代码这个我觉得应该不算少见吧。。。v-if="xxx.length"
主要多了心智负担，你的双引号里不是字符串而是 js 代码。
然后你看了 v-for ，又发现你的双引号里的不是 js 代码。。a in b 得到的 a 居然不是 key 。。

[Torpedo]

其实都是发展演化来的，也不都是凭空出现，只有逐渐淘汰的

发展演化来的：
vue 、react 框架，在 n 年前，虽然大部分都写 jq ，但是上规模的项目都有自己封装的框架，基本做到组件化，但是响应式数据绑定做的不多，而且大家各自封装，没有几种特别流行的

ES6 这些，吸取了很多 es4 标准，不过 es4 死掉不谈，lodash 等函数库和内置 api 有很多相似的地方

编辑器保存后浏览器自动刷新界面，live reload 很早就有了，不过现在基于响应式的视图，发展除了 hmr （不过有些人不一定喜欢用）

强类型语言，最开始 coffe 和 ts 齐头并进，后来 ts 更贴合 js 生态，加上 vscode 、 @types 的支持，ts 慢慢胜出。同时 ts 自身也不断完善

nodejs 的回调，也是从回调到 generator 到 async await 越来越方便


逐渐淘汰的：
IE 的兼容性问题
float 的布局方式

其实楼主感觉是对的，整体就是再越来越好。只不过也带来一些问题

[gadfly3173]

@shyling #84 xxx.length 这种还是可以接受的范围，可以很直观的知道这是一个值。
双引号里是代码这个其实只有声明了这个属性需要 bind 才是代码，vscode 装上官方插件就会有高亮，webstorm 也有很好的支持。这个东西我觉得比按照 react 那样要搞一堆拼接还是更容易理解的
v-for 这个确实坑爹，in of 竟然还是相同的表现。。。

[shyling]

@gadfly3173 对呀，template 里的怪怪的。

结果就是你想用个新语法，obj[key] ?? 'xxxx' 还得思考一下到底能不能用

[Alander]

@lanten

“只有新手才会在 jsx 中添加大量业务代码。” 是反驳 @murmur 在 15 楼的观点。我就是在替 15 楼反驳你的观点，你说 react 不会有上千行代码，vue 也不会有，你说 vue 会有上千行代码，react 也会有

依赖库中存在大篇幅代码和业务代码中的上千行是两码事，你在日常开发中根本不需要阅读和维护库中的代码，而业务代码不同，篇幅越大越难以理解。React 本身就是个业务框架啊，写 React 就是一种业务啊，其中 reconcilation 的代码也就是普通业务，其理解难度本身也很大，代码行数上千行。所以你的“上千行的代码就是糟糕的代码”这个观点肯定是不敢苟同。

“你似乎不太理解插入元素的含义，插入的不是原生 dom ，而是 jsx 虚拟 dom ，我真的不太明白你是怎么理解到那上面的，这让我感觉你似乎不是很懂。” show me the code ，让我看看到底是什么场景，我确实没理解你说的 jsx 虚拟 dom 是什么场景，如果你说的是可以用 js 写 React.crateElement ，那用 babel 替换 React.createElement ，完全可以用 jsx 写 vue ，vue 没有用 jsx 而是用 template 的考量普通业务程序员有思考过吗？

“逐句对线你似乎怒气很大，就像炸了毛的刺猬，有点好笑。”我怒气并不大，只是实在是在技术上看见你说的一大堆文字里面没几句话是正确的，摘出来提醒后续人看的时候注意一下别带偏了。

反倒是我想问你个问题，你理解的 jsx 到底是什么？你理解的虚拟 dom 到底是什么？你知道为什么你只需要写 jsx 却可以最后生成了 dom 元素？如果理解了那你理解 vue 是怎么生成的 dom 元素？如果理解了这两个差异是不是用现有工具完全可以用 jsx 写 vue 代码？

不懂可以，在指出来问题的时候不要避重就轻，理性回复就可以了。

[Alander]

@murmur haha

[murmur]

@shyling a in b 对于数组来说本来就直接对着元素遍历啊，你难道不知道要 key 可以写 item, index in array 这种写法

[unco020511]

后端你用 kotlin 可能也会有这种体会

[yazoox]

@libook "以及用 Rust 写 WebAssembly 可以把性能坑也给填了"听到过几次这种说法，不是很理解。
有没有比较好的文档，或者例子，来说明，如何使用 Rust 解决前端的某些性能问题？谢谢

[libook]

@yazoox #82 JS 虽然借助一些引擎能具有很不错的性能了，但保不齐有一些对性能要求极其苛刻的场景，比如专有格式的视频解码，用 JS 写个视频解码器怕不是只能放 PPT ，那么你可以用 C++、Rust 等语言，按照 WebAssembly 标准来写，然后编译成 WebAssembly 字节码的 js 文件，在页面上引入这个 js 文件，然后就可以用原生 JS 来调用解码器对视频进行解码了，性能能做到跟 C++、Rust 编译成的桌面版本软件差不多。

感兴趣可以直接去 MDN 上看相关介绍，https://developer.mozilla.org/zh-CN/docs/WebAssembly

[Austaras]

@murmur 那你去写 _jsx/createElement 啊谁拦着你了。。。

[lanten]

@Alander

你最好查看并尝试理解一下 15 楼老哥到底说了啥。

你也提到了用 jsx 写 vue ，你看，你这不是能理解吗？
遗憾的是，vue 的 jsx 与 ts 的契合度非常差。

这是一个简单的例子， `notification.error` 方法会在执行后弹出一条消息。注意此方法可以在任意区域执行。
```tsx
notification.error({
content: (
<div>Any React.ReactNode</div>
)
})
```

[shyling]

@murmur 没看懂意思吗，js 本身的语法里可不是你说的这样。你难道以为你在 js 里写 py ？

[murmur]

@shyling js 的语法里有 xml 么，你都 jsx 了还在 js

[murmur]

@lanten 这个例子很糟糕，有什么场景让 notification 弹出的消息还要嵌套组件

这是 dialog 不是 notification ，如果复杂到 dialog 肯定要抽组件出来的

[murmur]

而且正常的思维不是
this.$notification({
type: 'error',
icon: 'icon-alert',
title: '错了',
msg: '你自己猜哪里报错了',
callback: function(){...}
})

[lanten]

@murmur

试想想一个场景，你需要弹出 10 个 notification ，每一个的 content 都不相同，它不是简单的 string ，里面有 input ，有 button ，有其他组件，量不大。按你说的封装策略，是不是需要封装 10 个组件？这些代码分散后，阅读者无法一目了然的掌握所有逻辑，还得一个个找，可读性是不是就差了？