为什么后端老是觉得前端简单?
原创
作者：PerishWithHonour 链接：https://www.zhihu.com/question/409197374/answer/1373509698 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
我前后端都做过，我来说下吧。
一开始，我是做后端的，写前端几乎都是用现成的模板，用别人的代码块，JQuery一把梭过去。现在补完前端，发现JS和H5的世界已经发生了天翻地覆的变化，从ES3.1 到ES5 ,ES6，ES7还有现在的ES11。js不再是那个只能在浏览器里蹦跶的语言了，基本啥都能写，桌面端的Electron，移动app的 WebView/Hybrid Native解决方案，各种小程序语法，哪一个不要学习成本？觉得前端简单，无非就是不过脑子说事。
就拿上传文件来说，会自己按照需求设计组件吗？会自己全盘负责联调吗？知道怎么精确监控HTTP请求全过程吗？还有websocket这种东西，大多数人写代码的贼难看。没有node带来的前端项目工程化体验，很多代码看起来就和屎一样又臭又长。好了，说到工程化，复杂的Webpack了解下，babel保姆用一下,ts.config.json 你也来个？前端复杂了，但是也变强大了，最典型的就是SSR的出现，把页面请求的资源从nginx上面打包好的SPA，换到了前端服务器的html模板中来了。总的来说，就是尽量的在体系中发挥js和DOM打交道的能力。还有就是找工作要用到的各种框架技术，都是要花时间去学的，就一个React周边技术栈多的一批，还有Angular8+ ，东西多吧？想高阶地使用？那又要费不少时间，我自己学了3个月才勉强做成了一套自己的Angular工程模板(IndexedDB, ng2-stompjs, ngx-umeditor,Ng-Zorro, RouteReuseStrategy, PipeTransform, HttpInterceptor,Karma-overall-test)。前端绝对不简单，反倒是复杂繁杂，选个UI组件库都一大把可以想到的。否则你自己写CSS、LESS、SASS和SCSS吧，代码多的一批。能把前端样式写得能自适应的还懂Flex布局，真不多，CSS动画就更不用说了，CSS3这玩意可比XAML玄学多了。
/***
- 看到有人点赞，再写一些 补完js的历程吧
*/
一开始接触前端的时候，是不知道H5,H4规范什么的，不管三七二十一直接html开头就是 <!DOCTYPE html>，js也写的贼拉跨，什么玄学eval乱用一气，call() ，apply() ，bind()就会用绑定，教学的人也教什么ES标准具体的新增内容，给jquery获取的jq对象绑定就完了。箭头函数也没人教，function内的this指向啥也是蒙的。学完java的经验告诉我对象和函数两个东西，不能搞混啊，结果js不是这样的，又不是typescript有???.d.ts文件给你指明某变量是函数还是对象。后来直接上手vue.js，data()=>{return { ???} }什么鬼，为啥是函数，往上一看extends，感情js还能玩起了继承？一看vue的源码，所有vue组件都是Vue原型对象的子对象，也就是“组件是可复用的vue的实例”。es6的东西？啥规矩啊？看了一下原来是对原型链的一种使用啊，可是发现原型链也没学，恶补了Object各种属性和方法，怪不得有人说js可以oop编程，原来如此。哦，所以data要设计成函数为啥啊？每个函数js 作用域内部数据是独一份的。接下来为了方便使用当前vue的数据，把getData()函数移交给vm._data再传给原生vm.$options.data的实例——data属性（即vue属性中的data属性），然后又在getData()中设计return data.call(vm, vm)重新定位this指向当前vm！！这样的化，在开发的时候，我们就可以直接用this.data.??? 来使用 data()=>{ return {obj} }返回的任意数据了。后来学了python发现这些脚本语言都是这么灵活的，什么__builtins__，__init__，__name__，__dict__，开发者直接print出来就能把对象看个究竟。不像憨憨java，搞个reflect，一堆又臭又长的api，要不是有AOP的生态资源（Annotation式开发真香），Java笨死了要。对了，还得回来说下组件和标签，一开始学开发的时候觉得原生的HTML标签像是黑盒子，你一写他就给你显示出来了，不像VB你一拖控件，还能做设计，也能改代码，对应的class实例代码。咋web开发就要写style调样式呢，后来学ts发现了lib.dom.d.ts，哎哟我擦，原来各位标签也是对象啊。这就是DOM对象吧，直到这个时候我才反应过来，之前只是听说有这么一个定义，现在浏览了下block.rnc，phrase.rnc等等定义文件，前前后后都融会贯通了起来。
完犊子！感情之前我是一点也不懂js？是的，我心态没放好，js虽说设计的很烂，但也好歹是一门脚本语言。前端的路还有很久要走，不求精通，只求全面了解。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
