JavaScript大师必须掌握的12个知识点

更新日期: 2019-04-07 阅读: 3.1k 标签: 前端

既然你对这篇文章感兴趣,我想你应该是一位前端开发,也许你有一份不错的工作、自主创业甚至是一位自由从业者。不知你的前端技术如何,也许你是一位新手,亦或是一位资深开发。 如果你想让自己成为一个 JavaScript 大师,在此我列出 12 条必备知识:


1. 控制流(Control Flow)

我们从最基础的开讲。当然,它也是最重要的一个知识点。如果你连这个都没有整明白的话,那你的代码生活将会很艰难。

  • if else : 如果连这个都不知道,之前怎么码代码的?
  • switch : 当有很多的情况要处理(>2)的时候,用它准没错。
  • for: 不要去编写重复的代码,请使用 for。for of和for in都十分便利。一个很大的优势在于 for 循环是阻塞式的,可以配合async await使用。
  • 高阶的条件语句: 使用三元运算符或则逻辑判断。如果想把代码写得简洁,甚至不需要存储中间值的话,可以这么做。
// ternary
console.log(new Date().getHours() < 12 ? "Good Morning!" : "Time for a siesta");

// logical operators
const isJsMaster = prompt("Are you a JavaScript master?") === "true";
console.log(isJsMaster && "proficient coder");


2. 异常处理

不管前端还是后端工程师,作为一个新手,经常会使用console.log或则console.error来处理错误。为了写出健壮的应用,则需要改掉到处使用 console.log 的习惯,构建自己的异常处理器,然后优雅地处理异常。 你也许对如何处理异常很感兴趣,可以看看我写的这篇文章


3. 数据模型

需要想清楚如何组织数据(合并或则分离),这不仅仅关乎在数据库里如何定义其模型,同时也包含了函数参数,定义的变量、对象等等。

const calcShape = (width, height, depth, color, angle) => {...}
const calcShape = ({width, height, depth, color, angle}) => {...}


4. 异步性

这个是 JavaScript 非常重要的一个特性,要么需要从服务器获取数据或则在服务器端异步去处理请求。几乎在所有的情况下,都要面对异步。如果搞不清楚异步,可能会遇到非常奇怪的报错,以至于要花费几个小时去搞定它。如果你知道异步,但是没有完全理解,那么可能掉入“回调地狱”。如今,最好的方法是使用 Promises 和async await。


5. 操作 dom

对于开发者来说,通常已经学会了 jquery,似乎不需要再去了解如何直接操纵 DOM 的技巧。甚至直接使用前端框架,根本不需要去操纵 DOM 了。但是,我认为对于理解前端 JavaScript,这是必不可少的一环。知道 DOM 的工作原理以及如何操纵 DOM 元素会让你对网页的工作机制有更加清楚的理解。而且,尽管使用了前端框架,总有些情况下你需要直接操纵 DOM。打个比方,如果仅仅只是想访问某个元素,你肯定不想把整个 jQuery 都导入到项目中吧。


6. Node.js / Express

作为一名前端开发,依然需要学习一点 Node.js。最好懂得如何用 Express 快速搭建一个服务器,并且使用路由功能。JavaScript 作为一门“脚本”语言,很适合定义各种自动化任务,因此知道如何读取文件,操纵 Buffer 可以助你构建工作流。


7. 函数式编程

函数式编程和面向对象编程哪个更好的争论由来已久。其实,你可以使用任何一种编程方式达到相同的目的。在 JavaScript 中,事情变得简单,两种方式任你挑选。像lodash就以函数式的角度提供了非常多的工具函数。如今,甚至很多函数已经内置实现,无需导入外部库,比如map,reduce,filter,forEach,find。


8. 面向对象编程

和函数式编程类似,你同样需要熟悉面向对象的 JavaScript 编程。我曾经很长一段时间拒绝在 JavaScript 中使用面向对象,但是后来发现使用对象/类/实例的方式确实会更加合适。类(class)广泛使用于 react, Mobx 或则一些自定义的构造函数中。


9. 前端框架

当今最流行的三大框架:React.js,angularvue.js。如果你在找一个前端的工作,在简历上面至少需要列出它们其中之一。尽管它们更新很快,你需要理解它们总体的工作原理。而且,对底层原理的理解可以让你更好地使用框架编写应用。如果还不确定上哪辆车,我建议学习 React.js。我已经使用了好些年,并且不后悔当初的选择。(译者建议 Vue.js,简单好用上手快)


10. 编译(transpilation)/打包

很不幸,在 Web 开发中这一工作占了很大比重。一方面我又不能说不幸,它使得我们可以用最新的特性来编写代码。我说不幸是因为我们需要时刻注意新的特性在某些旧版本的浏览器不支持,需要将其翻译到低版本浏览器解释的代码。业界的通用标准是babel.js,你需要熟悉它。对于打包,可以使用老大哥Webpack ,或则后起之秀parcel。我倾向于使用 parcel,尽管不完美,但是它性能很好,而且配置方便。


11. 正则表达式

不仅仅针对 JavaScript,但是真的非常有用,也很容易让人迷惑。掌握正则表达式会花点时间,不需要记住所有的情况,可以边查边用。


12. 测试

正如Paul Kamma指出,在软件开发中,测试真的是一个非常重要的部分。JavaScript 也不例外,在发布新功能前,最好是(一定要)对代码进行充分的测试。甚至某些情况下需要手动操作,也是值得的。当然,使用自动化测试工具才能一劳永逸,测试包括:单元测试、端到端测试、加载速度测试、安全测试或则前端测试(组件是否加载)。目前市面上已经有很多用于测试的工具,比如 enzyme, jasmine, mocha, chai 等等。我现在最喜欢的是ava.js


原文: 10 things to learn on the way to becoming a JavaScript Master
译者: Fundebug


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/2758

相关推荐

前端和后端的区别_为什么很多人选择前端?

什么是前端什么是后端,前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不同的,下面简单说一下:前端更容易入门,每天调整界面的展示,通过代码 完成优美的界面和酷炫的交互。后端入门稍困难,每天关注的是业务逻辑的处理,数据的增删改查,性能的优化

掘金前端课程(小册)推荐

大家好,本期内容给大家推荐一些优质的前端掘金课程,比较适合初学者及工作几年的前端小伙伴,里面的内容讲解的比较详细,作者也是一线的大厂工作者。有兴趣的小伙伴快来打卡看一下吧

什么是前端? web1.0、web2.0时代的网页制作,前端开发都有哪些内容等

前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境

前端开发,如何写出优秀js代码

前端开发如何写出优秀js代码,什么样的javascript代码才是最优秀的的呢?我总结的大概分为三点:性能好,简单优雅,通俗易懂,这篇文章就将围绕这这3点来说明。

解读前端热更新原理

热更新:浏览器的网页通过websocket协议与服务器建立起一个长连接,当服务器的css/js/html进行了修改的时候,服务器会向前端发送一个更新的消息,如果是css或者html发生了改变,网页执行js直接操作dom,局部刷新,如果是js发生了改变,只好刷新整个页面。

前端开发,你的优势是什么?

每个前端开发都要有自己的优势,总结一下我的优势:1、工作年限长、经验多;2、基础相对扎实;3、逻辑思维能力合格;4、业务需求分析能合格。

前端权限控制

权限管理一般分以下 3 个基础概念:功能点,角色,用户。它们之间的关系一句话就能说清楚:一个用户可以拥有多个角色,而一个角色可以包含多个功能。

前端需要了解的后端知识

一名有前端工程师,除了掌握自身知识体系外,在业余时间也应该了解下后端的知识时间,由于前端与后端工作是最最密切相关的,多学习些后端知识对自身也是大有好处的。当然除了上述这些,计算机网络、数据结构和算法、计算机组成和原理、离散数学等知识都要涉及。

女生30 岁转行做前端开发,晚吗?

30岁转行做前端程序开发!请把“晚吗”去掉。50多岁大爷都学编程了。你还担心啥?先从年龄上来说,这个年龄进入IT职业,那是相当棒的黄金时间,有目标,有干劲,有新颖的思想,而且仍是女孩子。

前端常用的新手引导库,总有一款适合你!

在产品发布新版本或者有新功能上线时,经常需要新手引导功能来引导用户了解应用,下面就来分享几个开箱即用的新手引导组件工具库,帮你快速实现新手引导功能!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!