致刚入行的前端工程师

柔光的暖阳◎ 2022-02-03 14:39 228阅读 0赞

讲真，这篇文章已经憋了好多天了。其实本文可以说是“起于前端，但不止于前端。”

写作的契机是最近在指导一位北京的哥们写前端，有感而发罢了。希望能够给同行一些可行性的建议吧。

![01.png][]

文章开始之前我想要深情地问候一下社保业务的相关部门，你们高耦合的业务，让我在天河区兜兜转转了小半天，却只是为了一张难以识别的照片。让这篇文章拖到深夜才能完成。

OK，回归正题。这篇文章出于一个刚转行6个月的初级前端之手，故不能保证看了这篇文章的人就一定能做好前端工程师的工作（我自己也尚且没做好），也不确定这篇文章能够帮到多少人，不过如佛家所言

> “能度一人是一人吧”

### **1. Github，Github，Github** ###

![02.png][]

重要的事情所以说三遍。如今前端圈大热，除了前端项目天生开源的优势之外，Github这个网站功不可没。

我们打开浏览器的调试模式就能看到对应页面的结构，以及对应的样式实现，我们也可以通过恰当的方式获取到页面的js代码。

如果说前端天生的开源知识是“发散”的，那我觉得github就是这类知识的一种“聚合”。

如今几乎所有的前端技术都是开源的，前端开发人员可以很方便地在上面找到一些高效的插件库。这不但可以提高我们的开发效率，还可以借此学习一些前端知识。

如果你想搞前端，那我觉得咱们面试之前起码得有个Github的账号，毕竟这个*全球最大的同性交友网站*对于前端工作者来说太重要了。

但有一点要注意的Github跟百度云盘是不一样的。他是程序员交流的地方我们只需要上传代码就可以了，我们不需要通过视频来交流（曾经有同学说想往Github上传视频）。

### **2. 小心培训班** ###

如果你像我一样穷到上不起培训班的话，我相信你也不会对培训班有什么特别的好感。更加不会*依赖*培训班。

当然，我这里只是叫你小心培训班。并没有否定所有培训班，毕竟我知道有一些培训班还是挺用心的。

**（1）培训班并没有教会你写代码**

*很抱歉北京的朋友，这里得借用一下聊天记录*

![03.png][]

这是我觉得比较操蛋的一件事情。毕业之后似乎就再也没遇到过用拼音命名变量的情况。当时我只是建议这位哥们以后都用英文。并没有说为什么。

先引入一位大牛的话

> *“代码是写给人看的，并且可以顺带运行到机器上。”*

你使用拼音来命名的话中国人都尚且看不懂，更何况是老外？而且咱们中国文化博大精深，用拼音来命名跟使用a, b, c 来命名其实并没有什么区别，语义并没有明确多少。

*为了减少代码的字符数量而把变量名转换成a, b, c这种简化形式，那是优化器做的事情。*而我们作为程序员，尽可能让自己的代码更语义化一些，请选择适当的英文来命名你的变量。（当然，如果你使用国人开发的易语言，那就当我没说。）

**（2）培训班并不会帮你找到工作**

![04.png][]

![05.png][]

被这样说简直压力山大，您付费都尚且做不到的事情，我这种免费的服务肯定也做不到。培训班能做的顶多只是帮你梳理一些基础知识（或许有的只是教你背书？）知识能吸收多少主要是看自己。

再者，如今许多公司对程序员的要求已经不限于他能否写代码（或者说敲键盘？）。还有一些其他的潜规则。我举几个例子

1.  合作意识。
2.  沟通能力。
3.  编码风格。  
    .....

当然还有很多，从这位兄弟的情形来看，某些培训班只是教会了我们敲键盘，许多软实力的东西并没有提点太多。过于依赖培训班的话，我相信人们会逐渐疏于其他软技能的练习，这其实并不利于就业。

对于没有经验的技术工作者来说更是如此。技能已经不够硬了，其他方面如果不能稍微弥补一下那还谈什么就业？

### **3. 挑选一个合适的编辑器** ###

> 一个好的编辑器能够提高你的编码效率，一个赏心悦目的编辑器能够让你开发的过程更加愉悦。

![06.png][]

现在出现了许许多多优秀的编辑器，Vim， Emacs，Sublime Text，Atom， VSCode 等等。编辑器之间该如何选择?本来就是个人喜好问题。

据我个人的使用体会，Vim跟Emacs两个编辑器比较轻量级一些，但是他们的界面我只能说一般，而且学习曲线比较陡峭。*如果你喜欢折腾，倒是可以尝试一下。*

Sublime Text是我目前发现周围用的人比较多的编辑器，而我个人也比较推荐，他不但有丰富的插件，还有比较美观的界面。更重要的是操作简单，能够满足大部分开发需求。

虽说我推荐Sublime Text，但其实我是一个Atom用户，两者用起来感觉差不多。

Atom比较Cool的地方是，它是通过Web技术搭建起来的桌面端软件。这也有个问题，毕竟它是通过Web技术搭建的（可以看成是运行在chrome内核的浏览器上网站），这就导致了这款编辑器相当耗电。

总之选择一个自己喜欢的编辑器。写代码去吧!!

### **4. 独立解决问题的能力** ###

“这种能力是个人都有啊！！”

是吗？

![10.png][]

![192883-059b03906ceb4126.png][]

如果一个程序员在一些没有耐心的老鸟面前问这种问题的话，我相信老鸟们不只是内心有千万只*草泥马*在蹦腾，而是*草泥马*早已脱口而出了。

“当然如果对象是妹子的话，我们倒是很乐意着手帮她解决这些问题。”

以上哥们明显就还不具有这种独立解决问题的意识，并不是说不能拿问题去请教别人。而是，您需要请教别人的问题，必须是自己已经动手尝试解决，而且解决不了的问题。

> 毕竟程序员最怕打扰，咱们能不打扰就不打扰。

我们生活在如此幸福的时代，其实很多问题已经有大牛解决了，并且他们会把经验分享到网上，我们需要做的只是组织好自己的问题简单地Google，或者百度一下。这样很难吗？

如果连这点都做不到，那我觉得要进入一家公司或者是在一家公司里生存都是很艰难的事情（*当然某些国有企业除外*）。毕竟大部分公司需要的是能够解决问题的程序员，而不是只会写代码的打字员。

### **5. 阅读英文文档** ###

这让我之前想起知乎上Vue.js 作者[尤雨溪][Link 1]说过的一句话，其大意是:

> 我为什么要浪费跟家人相处的时间来教你学英文?

如今大部分优秀开发的资源都是以英文的形式展现到网络上的。

当然不排除有些国内的热心人会把他们翻译成中文，再托管到相关网站上，但是，这毕竟是少数。而且中文文档往往会跟不上国外官网的脚步。

*还记得我当初用Python的时候，框架Django的中文版本是1.6.x而官方的最新版本已经到1.8.x了。*

这也导致了，如果你用着新版本的框架，而看着旧版本文档写代码的话可能会引入一些新版本里面已经抛弃了的写法，进而你的项目可能会出现一些诡异的行为。*而且这类bug往往最难发现。*

当然，并不是说你一定要英文很流利才行，但是最起码要看得懂英文文档。（实话说现在我工作快两年了，看英文文档还是有些吃力。）

### **6. 操作系统** ###

好吧，允许我再啰嗦一下。

这里我们谈谈操作系统，毕竟有些朋友还是会纠结选择什么操作系统。

**Windows**

优点: 用户页面可用性较好，丰富的桌面端软件，玩游戏一级棒。  
缺点: 软件广告比较多，病毒相对多些。命令行不够友好（我个人觉得相当操蛋）。

**Linux**

优点: 命令行非常好用，开源社区活跃，发行版本比较多。  
缺点: 常用桌面软件开发商比较少，QQ这些都没有。有些发行版不怎么稳定，经常卡死。

**MacOS**

优点: 命令行非常好用，界面优雅，可用性高。苹果商店有许多windows平台所没有的优质软件。  
缺点: 设备昂贵，普遍配置不高，不太适合打游戏。

以上是我使用操作系统的一些小体会吧。至于具体使用什么系统各位可以自行掂量，但是个人觉得结合命令行开发会更爽一些。因此我曾经选择过Linux。后来，机缘巧合之下买了台Macbook之后就再也回不了头了。

正如业界的人所赞赏的

> “MacOS就像是Liunx跟Windows的结合体。它既有Windows的用户友好的界面，也有Linux优雅的命令行。”

不过这玩意儿

> 用了之后就很难回头了。

我有个同学买了它之后，干脆把LOL（英雄联盟）都戒了。

![11.png][]

### **7. HTML + CSS + JavaScript** ###

现在才谈这些技术点并不是说这东西不重要。只是我觉得这三样东西就算我不说，只要你有心搞前端肯定会去学，那还有说的必要吗？（此处省略百万字）

### **8. 尾声** ###

都不知道自己写了多少字，只希望今晚能够发布出去。希望能对有缘看到此文的朋友有那么一点帮助吧。

# Happy Coding and Writing !! #

[01.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4e94e6e2d.png
[02.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4ea1361d7.png
[03.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4ea916920.png
[04.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4eb5582fe.png
[05.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4ebf53962.png
[06.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4ec83eafd.png
[10.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4ed17b98e.png
[192883-059b03906ceb4126.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4ee769992.png
[Link 1]: https://www.zhihu.com/people/evanyou
[11.png]: https://www.itcodemonkey.com/data/upload/ueditor/20170612/593e4eefb9177.png