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

柔情只为你懂 2021-09-20 09:48 398阅读 0赞

**为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。**

既然你对这篇文章感兴趣，我想你应该是一位前端开发，也许你有一份不错的工作、自主创业甚至是一位自由从业者。不知你的前端技术如何，也许你是一位新手，亦或是一位资深开发。 如果你想让自己成为一个 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 的习惯，构建自己的异常处理器，然后优雅地处理异常。 你也许对如何处理异常很感兴趣，可以看看我写的[这篇文章][Link 1]。

### **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，Angular 和 Vue.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][]。

[Link 1]: https://link.zhihu.com/?target=https%3A//medium.com/%40gisderdube_55369/the-definite-guide-to-handling-errors-gracefully-in-javascript-58424d9c60e6
[lodash]: https://link.zhihu.com/?target=https%3A//lodash.com/
[babel.js]: https://link.zhihu.com/?target=https%3A//babeljs.io/
[Webpack]: https://link.zhihu.com/?target=https%3A//webpack.js.org/
[parcel]: https://link.zhihu.com/?target=https%3A//parceljs.org/
[Paul Kamma]: https://link.zhihu.com/?target=https%3A//medium.com/%40xtender
[ava.js]: https://link.zhihu.com/?target=https%3A//github.com/avajs/ava