如何成为一个更好的前端开发者

很多人来问我,如何成为一个更好的前端开发者,当我们已经有了一些前端的开发经验之后,如何进入下一个level呢?

本文就像一个清单,而不是一个文章。我觉得我们就像朋友之间聊天一样,假如有什么你不是很清楚的,可以再搜搜看相关的内容。

好吧,让我们来看看具体的内容。

理解你的编程语言

其实这个部分是最常的,甚至可以拿出来单独写一篇文章。不过,我们还是放在这里,和别的建议一样。

我们使用编程语言的时候并不需要什么常识,只是某些人定义了一系列规则,然后我们使用这些规则来和机器通信,我们这里就是使用他来和浏览器通信。Javacript也同样,它有自己定义的规则和规范,我们只要像使用其他语言一样遵守就可以了。

下面是一些我的笔记:

类型

了解JS如何进行值类型化,并了解其如何提供访问和使用内存,以及代码的定义部分。

Scope和闭包

在函数中变量是如何和Scope外的变量交流以及和别的Scope的交互的。

变量提升

Javascript提供了一个非常独特的方式和顺序进行读取和执行代码的方案,你应该对这些有所了解。

JS中的面向对象编程(OOP)

这些年JS也正在提供一些方案来让开发者可以使用一些通用的编程范例。

Async JS

你要build是一个动态的,单页的实时应用,那么你最终是需要写代码来等待一些request的返回,同时又可以在等待时做别的事情。

首先了解Callback函数,然后Promises,玩玩async-await方案,然后了解Generator Functions,然后把这些融合到用XHR请求获取数据,然后等待数据并使用他们更新你的HTML内容并基于它做一些操作。

Array的高阶函数

还在用循环来访问array吗?为什么不试一试“map,find,filter,reduce”等等函数。这些函数都是很有作用的函数。

JS是怎样和浏览器交互的

使用全局的对象,比如window,document等等,JS如何访问HTML元素以及如何注册events以及handle相关的action

对象的解构和运算符

非常方便,尤其是你想访问数据解构或者状态中的一部分,或者不丢失不变性的前提下对其更改的时候

Git的版本控制

当你工作在一个比较大公司,哪怕是一个小的团队的时候,如何管理相关的代码,尤其是不同环境的代码,比如production,staging等等。

所以,你需要理解如何运行git的命令,比如git checkout,checkout -b, git merge等等。你可能需要理解cherry-pick一个功能,或者你需要git revert一些代码。大胆地去用这些命令吧,希望你能够细化它。

不要满足于一个框架或者库

首先熟练使用一个JS框架,但是最好再尝试尝试新的框架,尤其是发现他们能够使用不同的方法实现同样的功能的时候,问自己一个问题:”我们之前是这样实现这个功能,现在是怎样实现的,这两种实现有什么差别,我更喜欢哪个?”,这个能力是最重要的,尤其是用来区分一个新人和一个资深的程序员。资深的程序员甚至可以在完全没有使用过这个框架的时候,帮助解决相关的问题。

关注后端的问题

我们是后端的客户,会使用他们的数据来显示给最终的用户。我们需要至少有一些和后端相关的知识,比如在一个社交软件中,Posts,Comments,Users在数据库中是如何相互交互的,尤其是在关系型数据库中,他们如何组织的,我们可以尝试一个简单的CRUD操作,比如创建一个表格,创建一条记录,读取这个记录,更新和删除它。甚至可以创建一些别的表格,然后使用一个外键来进行join,然后搜索等等。

亲手试试moudle bundlers

Webpack,Parcel以及别的一些工具可以使用node和npm的生态圈来改善你的开发体验或者让我们可选择的框架更加多样,试着深入去看看他们是怎样工作的,他们是怎么处理你的文件,import文件,直到最终如何到达你的主要index.js的,了解怎样进行代码的分割,如何提高性能,了解bundle是如何打包你的代码,最红服务器只要返回一个HTML文件,一个CSS文件一个JS块,就是这么简单。

自定义你的工作工具

你的文本编辑器,你的终端应当能够帮助你控制开发的流程,检测你的git branch。

比如使用VSCode的Gitlens扩展来监测谁对你的代码做了修改,什么时候做的。

你的终端应该很有用,不仅仅是写一些命令,而是可以知道你的branch的状态,你做了什么改变,你是在前面和落后了,在push之前使用文本编辑器来使得修改尽量少。

我真的希望这对你来说会有帮助。如果有问题,请留言给我。

参考文章: https://dev.to/gurutobe/keys-for-you-to-become-a-better-frontend-web-developer-1ba8

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *