[交流] 最近在看前端的内容，接触了一些前端的代码，有一些吐槽

[eryajf]

最近在看前端的内容，接触了一些前端的代码，从一个小白的角度，仅以过往一些 go 编程经历对比而言，对前端技术栈吐槽如下：

1. html 标签里边，需要手写的内容太多，自动补全方面比起一些后端语言，差太多。
2. 外部的包，已经引入成功，也能正常使用，但是这个包的方法并不会自动补全，写起来很难受。
3. 函数的写法太多了，什么箭头函数之类的，而且感觉写法挺奇怪挺麻烦，老是记不住。
4. 前端编码不能很方便地看到函数的入参以及返回值，导致用的时候就很模糊，要么死死记住这个方法，要么就得再次看方法的源码。
5. 前端对方法的调用也是各有便道（混乱），没有参数的函数不加括号也可以以至于后来再看并不好区分这是用了一个方法还会一个参数。在 template 区域，大多方法都是在双引号的包裹当中，以至于补全不力，无法跳转，更无法直接通过调用的地方看到方法的具体实现。

暂时想到这么多，以后可能还补充，欢迎前端朋友一起交流下你的感受。

仅是一些个人角度的主观感受，没有任何恶意，请友善交流！

很多交流已脱离交流本身，也就简单做下回复：

1. 收回吐槽二字，没有任何恶意攻击任何一门语言或者"存在"，如有人觉得冒犯，那我表示抱歉。

2. 我们已惯历皇帝的新衣这样的故事，并想象着认为自己作为国王，将会大度地包容小孩儿的指摘。然而当我们真正面对这样的事儿，仅仅作为旁观的大人，就已不能容忍小孩儿的话。

   ps: 昨晚再次看到海龟先生李红旗的那段话：“我想摇滚乐，有两点我觉得，是当时吸引我的原因，第一点：是它的常识，第二点：是它的勇气。诚实就是知道，比如像国王没有穿衣服，作为一个诚实人，不管父母怎么说，他就是没有穿衣服。勇气就是，不管这个国王身边，有多少兵丁或者再困难，就是要把事实说出来，我觉得这两点特别吸引我。”

   我常常注意在路上的人们和旁观者的人们的话的一个原因在于，所有事物的第一个创造者，又何尝不是这个事物的旁观者，尽管这个旁观者可能会因为外行而闹笑话，那你就尽管一笑了之，而不必打压这种旁观，因为打压旁观，也就是打压自己的创造性，因为自己随时也会成为一个旁观者。在路上的人的想法通常会具有一定建设性，通常会是许多老司机习惯之后不太能产生的想法，这也是我前天与两个前端朋友交流的一个体会，他们身处前端已久，习惯成自然，倒是没有觉察到我提到的这些问题是问题。另外每个人也都会在路上，当我们行至山腰里，最能在这个阶段给我们帮助的，并非那些山顶上人的金口玉言，而是同为在路上的相同心声。

3. 我本才疏学浅，也正在学习当中，一些心声感慨，问题比较初级，竟引轩然大波，这并非不该发生，希望无人因此不吃中饭。

4. 感谢一些能够站在在路上人的角度感同身受的朋友，给了很多非常有帮助的指导与建议，这会成为我下一步注意的地方。

[murmur]

弱类型语言的 IDE 提示都是个问题，尤其是前端这种文件引入方式都各种各样的

箭头函数不是什么难点吧，这个东西最大的用途实际上是解决 this 的问题，我一直观点是代码长度不等于执行效率，如果你能处理好 this ，用 function 定义没任何问题

[ifdef]

评价猪肉好不好吃，至少得多吃几块肉吧，刚嚼了一根猪毛，就发一通牢骚，“这也忒难吃了”。河狸听了都直呼哒咩。

[jeesk]

前端一样自动补全。 比如 div*3. 那么就是 3 个 div 。

[yukiwc]

试试 typescript

[retrocode]

吐槽没有骂 node_modules 我不是很认可

[lingly02]

你说的这些问题，把 JS 换成 TS 基本上都解决了。HTML 的问题，不知道你用的什么编辑器，用 vscode 的自动补全还是没问题的

[fox0001]

从强类型语言的角度，特别是 go 这种编译型语言，来吐槽弱类型语言…也是毫无意义的纯吐槽吧？

我只能说，存在即合理。例如 HTML 标签，没提示就记一下吧，记不住就查一下。我认为前端工程师的经验和价值，不是依靠 IDE 的语法自动补全。

[JDog]

你敢吐槽贵圈儿？不要命辣？
我先来，html 是世界上最好的编程语言！

[ccyu220]

你这个最近，估计也就一天不到的时间吧。

[musi]

1. 用个 IDE 会好点
2 、4 用 TS
3. 当函数就用箭头函数基本上就可以
5. 没看懂

[horseInBlack]

1 、2 和 4 好像是觉得代码提示不够智能，可以给 VSCode 安装更多的插件或者直接用 Webstorm

3 对于新手来说新概念不熟悉很正常，接触新语言和新版本都会有这种情况，箭头函数和

[Bazingal]

有没有想过是因为 go 的设计已经落后于其它现代语言了呢？

[eryajf]

@murmur 箭头函数的确如此，我用得不多，还不够熟练，能理解解决 this 的问题

[eryajf]

@ifdef 嗯，你说得对，但我就是要吐槽

[eryajf]

@retrocode 哈哈哈哈，因为刚接触学习，涉及 node_modules 还不多

[pytth]

自动补全这个还得看编辑器，前端技术很成熟，暂时没有值得吐槽的地方。

[kangyan]

请使用 TS

[wangtian2020]

reply1.vscode 会自动闭合标签，其他手写的内容都是必要的
reply2.只有含有 typescript 类型标注的，或者是代码中有 jsdoc 注释的 package 导入后有属性提示
reply3.我目前的个人风格是所有地方全用箭头函数，没有问题
你不应该在自己不确定的地方使用 this ，使用 globalThis 替代
reply4.即使是像我这种记忆力差的人，也完全没有感觉记不住方法。（不常用的正则那是一点都记不住）
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
顶多记个 array.map 、array.forEach 、array.find 、string.substring 之类的，其他我都想不出来有什么好记的，忘了就去查文档
reply5.你描述的内容看上去是 vue 的语法糖，你乐意的话每次都加上括号也没人阻止你 funName()

多学
https://zh.javascript.info/

[eryajf]

@lingly02 html 自己的标签补全当然没有问题，有问题的是给这个标签绑定个事件回调之类的，这个时候补全能力就弱了很多

[eryajf]

@fox0001 你的回复让我从另一个角度看前端以及前端人员了，感谢

[eryajf]

@JDog 其实吐槽也是希望大家能交流一下，可能有些自己痛的点，是因为不知道通过一个简单的方案就能解决这个痛点，交流过程中，这些点以及方案就出来了，也是一种学习的方式

[sillydaddy]

#2 楼 @ifdef 的回复并不友善，是把楼主往其他语言推的感觉。现在不正是介绍前端丰富的生态、活跃的社群、不断的创新的机会吗？

楼主试一下 TypeScript ，带类型的 javascript ，目前是前端的主流吧。

[supertan]

同感，前端代码不仅没有自动补全，js 方法也不显示函数注释，ts 也一个鸟样，甚至连高亮都没有，真的辣鸡。哦，对了，我用的记事本，画个页面而已，应该够用了吧？

[eryajf]

@sillydaddy 感谢

[eryajf]

@wangtian2020 感谢回复，学到很多

[lujiaosama]

@supertan 一时间居然看不出是黑还是吹.

[GiantHard]

1. 确实如此，所以 React 有 tsx, Angular 有带类型检查的 html 模板,这样可以借助类型信息辅助编程
2. 确实如此，所以有很多包都有对应的类型定义包
3. 这不能怪 js
4. 参考 2 ，你需要安装类型定义包，或者用 typescript
5. 换一个支持 language server 的编辑器吧

[cheng6563]

弱类型的就是这样的，你换 python 换 php 啥的也是这样

[Zzzz77]

1 、请安装编辑器 /IDE 插件；
2/4 、请使用 typescript;
3 、箭头函数和普通函数的作用并不完全一样，就像 var let const ，并不是相同功能的多个写法....可以去了解一下；
5 、这个只是 Vue ，并不能代表前端，但也没多大毛病，模板内的函数调用建议全部带上括号统一风格即可（语法糖而已），至于语法 /变量 /方法补全，同第一条~

另外 2L 不友善发言 OP 无需理会，但是用在 23L 却是极其的合理😆

[xz410236056]

@fox0001 #7 “存在即合理” 这句话本身就不合理。。这是唯心主义的观点。HTML 当初就不是程序员搞出来的，所以各种问题，后续的一系列操作在此基础上修修补补，所以一堆问题。

“我认为前端工程师的经验和价值，不是依靠 IDE 的语法自动补全。”
那要 IDE 干嘛。。写俩代码没多牛逼。

[supertan]

@lujiaosama 哈哈哈哈，可能 OP 标题换成“最近在看前端的内容，接触了一些前端的代码，有一些疑问请教一下” 可能就看得出来了。

“不懂就问，虚心求教” VS “一知半解，傲慢偏见”

“仅是一些个人角度的主观感受，没有任何恶意，请友善交流！" VS “最终解释权归我所有”

[864498233]

用 webstoorm 吧，这玩意儿有提示，有补全，有自动导入

[lovephpframework]

前端太卷了,本身就是弱类型还写法这么飘逸,项目越来越复杂之后后面维护扩展太头疼,php 最近更新的版本语法约定越来越严谨也是一个方向

[angrylid]

一个能跑脚本的文档阅读器，怎么被他们搞成 App 容器了. webp

[JounQin]

就挺逗的。

[fox2081]

《傲慢与偏见》

[yaphets666]

不要为自己的菜找借口。。。

[zhw2590582]

到你学到 CSS 部分的时候，才真正知道前端的险恶

[eryajf]

@supertan 看起来没有归我，都归你了

[xiaochena]

敢问用的可是 Vue ？

[eryajf]

@GiantHard 感谢回复

[eryajf]

@Zzzz77 感谢回复

[fernandoxu]

@wangtian2020 #18 全用箭头也不好，函数声明提升还是很方便的

[xiaojun1994]

用 ts ，用 webstorm

[murmur]

@zhw2590582 css 的 flex 已经很简单了，都什么年代还险恶

[zhaol]

虽然 2L 说的不好听，但是道理我极其认同.
OP 说的这些都有解决方案的，楼上都说了
第五点，感觉 op 说的是 vue ，现在 vue3 也支持 ts 了，但是感觉还是没有 react 和 angular 好用。

[lookStupiToForce]

你需要 AI 补全并用你自己的代码好好调教它（。

[supertan]

@JounQin 大佬泥豪~

[sqlNice]

CSS 又是另一套语法（狗头

[mingyoung]

自己做菜难吃，却怪厨具不好用

[rodrick]

这些都不算问题 ts+好的编辑器插件基本都解决了 css 才是痛苦根源

[slipkinem]

上 typescript ，ide 开发环境又会变重，觉得不爽就别写了，要么就吃前端的屎呗。吐槽没啥意义，真想解决你这些东西百度哪个查不到解决方法。

[jones2000]

js 挺好用的， 没有其他语言的条条框框。爱怎么写就怎么写，放飞自己我。 开发，调试也方便记事本+浏览器就可以搞定了。

[zmal]

op 吐槽的其实都是 js 的问题。
js 最开始只是想做个脚本语言，弱类型写法多变没啥不好。结果前端发展过于迅猛，很快面临了工程化问题。js 的各种弱点暴露的比较明显。

你吐槽的东西大部分能用 js 类型补丁语言：ts 来解决。ts 写起来挺爽的。

[janus77]

这些确实都是 js 的问题，也是代码圈（包括非 js 使用者对 js ）的共识。克服不了就用工具辅助减少吧，比如用个 IDE 什么的

[agdhole]

装个 jb webstorm 吧

[ZeroDu]

弱类型语言通病

[twofox]

@ifdef 吃着吃着发现了带屎的大肠，但有的人硬是嘴硬，说这是猪杂
猪杂和屎分不清

[learningman]

@murmur 来个政府项目，要兼容 IE （

[murmur]

@learningman IE8 以上问题都不大，IE10 以上还可以用 vue 和 react ，IE6 不好意思我投降

[cangcang]

槽点太多不知从何吐起。总之，还是多学几天再来吐槽吧

[yunyuyuan]

如果你说的是 jq 写前端，那确实问题很多，还不止你说这些。

1. html 标签里边，需要手写的内容太多，自动补全方面比起一些后端语言，差太多。
> html 是一种描述性结构，类似 qml 这种。但使用框架是有自动补全的，react 里你输入`<button onClick={`，就能触发补全。

2. 外部的包，已经引入成功，也能正常使用，但是这个包的方法并不会自动补全，写起来很难受。
>js 是动态语言，这个包没有用 typescript ，没有 index.d.ts

3. 函数的写法太多了，什么箭头函数之类的，而且感觉写法挺奇怪挺麻烦，老是记不住。
> 普通函数，匿名函数，箭头函数三种，其实还有匿名 class ，并不难理解吧。比较难理解的是原型链，function 可以用 new 操作符实例化。

4. 前端编码不能很方便地看到函数的入参以及返回值，导致用的时候就很模糊，要么死死记住这个方法，要么就得再次看方法的源码。
> js 是动态语言，想要 IDE 提示，用 typescript 就行了

5. 前端对方法的调用也是各有便道（混乱），没有参数的函数不加括号也可以以至于后来再看并不好区分这是用了一个方法还会一个参数。在 template 区域，大多方法都是在双引号的包裹当中，以至于补全不力，无法跳转，更无法直接通过调用的地方看到方法的具体实现。
> 你说的是`<button v-on:click="func1"`和`<button v-on:click="func2()"`这种吗，func1 不加括号就是默认把$event 当第一个参数，而 func2 拿不到 event 。vue 的 template 区域补全，vscode volar 做得挺好的。

比起你说，我觉得 css 和 node_modules 更值得吐槽

[iwh718]

对我来说，只要能挣钱的都是好的。

[TArysiyehua]

楼上很多人回的才是真的傲慢，确实有很多问题却怪楼主不会用。

[Torpedo]

你是不是写了 vue ？建议使用 react 🐶

[Felldeadbird]

我能理解楼主的痛苦。后端去写前端，然后打算用一下前端的东西。找到一个 V1 版本。用了一会，发现竟然有 V2 版本了。WTF ，V2 版本语法怎么不一样了？ 马上去学习新语法。再一段时间，V3 版本发了，彻底用了最最最最新语法。

到最后，我到底是来写前端，还是学新的编程语言？

[murmur]

@Felldeadbird 互联网面向造轮子编程是这样的，你一水 var 也没人管你，而且同样的功能，你用内置函数，语法糖，还是网上 npm 下的 util 都可以实现，没有高下之分

[ztxcccc]

@cheng6563 php 和 python 比 nodejs 阳间多了

[murmur]

比如说 abc?.def?.hij 这样逐级试探访问，在没有语法糖之前，你可以找个库，比如 objectPath("abc.def.hij", "失败的返回值")

[DOLLOR]

你是用记事本来写代码的吧？
哪怕是作为文本编辑器的 vscode ，写 html 都有完善的补全功能。
除了第 3 点，其他全是一个完善的编辑器就能解决的事情。

[lujiaosama]

@ztxcccc nodejs 哪里阴间了? 如果不上强类型, 动态语言都是一泡污.

[hsfzxjy]

html 装 emmet 插件可减少输入

[darknoll]

emmet

[fox0001]

@xz410236056 #30 容许我解析（狡辩）一下。

就是 HTML + JS ，这么多年了，特别是 JS 一直被吐槽，都没有被替代。如果它们是不合理的，就应该有新技术替代它们吧？

再说 JS ，它当初设计出来就不是应对现在的工程化前端。现在也出现了很多更好用的方案，可以考虑使用。

“吐槽”解决不了问题。曾经在 IE 阴影下的 JS 开发更艰难，因此也涌现了一批优秀的框架，解决当时的问题。正视问题本身，想办法解决它，才是该做的事情。

以上纯粹小弟愚见。

[fox0001]

@eryajf #20 有些事情，就是不认同，但需要接受。

[lancelock]

你只写过 go 吗

[phyzoo]

那这是自己还不会用，你会用了这些问题压根不存在

[sechi]

有没有一种可能以上大部分问题是你的 IDE 或者技术栈导致的，我的建议是换 webstorm 以及使用 ts

[alphardex]

1. emmet
2. ts
3. arrow only
4. ts (no any)
5. volar

[SanjinGG]

现在是个人都要吐槽下前端吗？要不发明个新语言把 js 干掉？再让后端学习下把前端干掉？

[Leviathann]

go：为什么路上都是逆行的啊

[lawler]

栓 Q 。

[libook]

建议不要吐槽自己不了解的东西，等你真正了解了这些东西之后，回过头来看这些吐槽会觉得很羞耻（关键 V2EX 还不能删帖）。

1. 自动补全不属于絕大多数语言的规范范畴，所以这是 IDE 的锅，我用 Jetbrains 家的 IDE 是可以自动补全 HTML 的属性和值的。
2. 有了 Jetbrains 家的代码分析能力，或者使用 JSDoc/ESDoc ，再或者用 TS 都是可以让外部包有完备的文档提示和自动补全的。
3. 蹲一个 C++/Rust 开发者吐槽 Go 语言特性太简陋的回复。
4 、5. 同第 2 条。

你要知道，Go 是一个力求千人一面的语言，靠牺牲灵活性来换取团队高效协作，通常对开发者要求不高，可以让开发者有更多精力放在业务上；而 JS 完全相反，是一门超级灵活的语言，用起来舒不舒服全看个人经验、罗列的三方工具，所以对开发者的要求反而高（即便入门门槛很低）。

[richarddingcn]

没看过前端 看到楼上的内容实属笑死

[c1273082756]

TypeScript

[Mexion]

1. 换个好点的 IDE
2. js 是动态类型语言，用 JSDoc 解决或者直接上 Typescript
3.不要因为 go 太垃圾不支持就这么说，写 go 的说 js 写法奇怪麻烦简直滑天下之大稽
4. js 是动态类型语言，上 typescript
5. 不加参数的函数不加括号也可以是什么意思，传参还要加什么括号，参数就是参数，加括号就是调用了。在 templete 区域，大多数方法在双引号的包裹当中，可以看出写的是 vue ，这是 vue 的问题，要么装个插件(volar)，要么换成 jsx 写

[wunonglin]

看来也只有前端才能有那么多回复量了 [doge]

[wupher]

挺好的，正不正确无所谓，能勇敢，直接的表达自己的观点，在这个 GreateWall 时代正逐渐变得难能可贵。

[bthulu]

@lawler [].toString()是空字符串, {}.toString()是[object Object]. []+{}可以理解成都转换 string 相加, 但是{}+[]似乎把这俩都看成数字了, 这个如何理解呢? 即便我调用 0+[], 也是看作字符串相加的, 咋{}+[]就是俩数字了?

[Mexion]

@lawler 我要反驳一下这个图。
首先 NaN 类型不是 js 独有的，而是 IEEE 754 的规范，它是数值类型也不是 js 独有的，在其它语言中也是一样的，比如在 go 中是 float64 ，在 java 中也是 double 或者 float ，不管用不用 js 这都是要处理的特殊情况。
9999999999999999 这个是精度溢出了。
0.1+0.2 !== 3 ，这也不是 js 的问题，大多数语言都有这个问题，你可以看看其他语言是什么结果： https://0.30000000000000004.com/ 。
没传任何值，max 返回无穷小作为最大值，min 返回无穷大作为最小值，不知道有什么问题，完全符合逻辑。
其它都是些隐式转型的问题，js 作为一门弱类型语言，在判断时== 有问题，所以专门给了个===来判等，==会隐式转换，===不会隐式转换，所以直接使用 === 即可解决大部分问题，现在前端基本没有用==的。

[ifdef]

@bthulu 这里 {} 会被当做一个空的块，因此什么都不会执行；+会当作算术运算符，因此 + []相当于 + Number([])，所以是 0 。然而谁会在实际项目里这样写呢，好无聊..

[xz410236056]

@fox0001 #74
“如果它们是不合理的，就应该有新技术替代它们吧？”
并不是。这个世界不是程序员组成的，不存在好技术一定替换旧技术，它出来的早且还能用，大家没有换的动力。你用新技术其他所有的去适配你吗，巨硬都没这本事。HTML+JS+CSS 这个方案本事就是在打补丁，完美的方案 HTML 都不应该存在。

剩下的可以看

https://www.zhihu.com/question/508865977/answer/2294083632

这个回答

[YasinChan]

@lawler 图中大部分都可以用 js 强制类型转换的概念来解释

[dlmy]

你这跟我同事吐槽测试一样，不用脑子，有手就行

[Email]

至少做出了一个像样的产品之后再来吐槽吧，而不是用两天就 嘿嘿嘿

[binfengxy]

[copy & paste]
JSON 之父：JavaScript 已非常复杂，我们能做的最好的事情就是让它退役
https://news.cnblogs.com/n/726211/

[xiangyuecn]

翻翻 20 年前教程来学，绝对简单

html：< div|span class style >
css：优先考虑上面这种内联（拒绝 tailwind ）
js：es3 ，没有心智负担（拒绝 ts ）

[tairan2006]

你这个吐槽…只能说明你各种语言写的太少…不在点子上

[fox0001]

@xz410236056 #92 它有存在的意义了，所以这不算是“存在即合理”？

[laolaowang]

为了这些破事，争来争去，喜欢就用，不喜欢就不用