JavaScript大师必须掌握的12个知识点
既然你对这篇文章感兴趣,我想你应该是一位前端开发,也许你有一份不错的工作、自主创业甚至是一位自由从业者。不知你的前端技术如何,也许你是一位新手,亦或是一位资深开发。
如果你想让自己成为一个 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,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。
JavaScript大师必须掌握的12个知识点的更多相关文章
- JS读书心得:《JavaScript框架设计》——第12章 异步处理
一.何为异步 执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上 ...
- Javascript基础 - js中曾经忽略的知识点
深入那些曾经忽略的Javascript知识 1. parseInt(string, [radix]),parseFloat(string) 一般我们省略第二个参数,parseInt(‘100’) == ...
- JavaScript—获取本地时间以12小时制显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习JavaScript你必须掌握的8大知识点!
大知识点! 一.JavaScript思维导图之<变量>的学习 二. JavaScript思维导图之<函数基础> 三.JavaScript思维导图之<基本dom操作 ...
- 深入理解javascript原型和闭包(12)——简介【作用域】
提到作用域,有一句话大家(有js开发经验者)可能比较熟悉:“javascript没有块级作用域”.所谓“块”,就是大括号“{}”中间的语句.例如if语句: 再比如for语句: 所以,我们在编写代码的时 ...
- 【转】JavaScript 经常忽略的 7 个基础知识点
原文转自:http://bbs.html5cn.org/thread-83442-1-1.html 1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位 令很多 ...
- 8.12 CSS知识点5
背景原点 background-origin 设置元素背景图片的原始起始位置,必须保证背景是background-repeat为no-repeat此属性才会生效. 语法: background-ori ...
- Javascript 笔记与总结(1-2)词法分析
词法分析,按顺序分析 3 样: 第 1 步:先分析参数 第 2 步:再分析变量声明 第 3 步:再分析函数声明 一个函数能使用的局部变量,就从上面 3 步分析而来. 具体步骤: 0:函数运行前的瞬间, ...
- JavaScript 经常忽略的 7 个基础知识点
1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位 令很多 JavaScript 初学者意外的是,字符串的 replace 方法并不会 替换所有匹配的子串—— ...
随机推荐
- 轮播效果/cursor
cursor属性:改变鼠标中的属性 例如: cursor:pointer(鼠标移动上去变小手) <!doctype html> <html> <head> < ...
- Samba部署共享服务
在本地PC文件共享 Samba服务程序是一款基于SMB协议并由服务端和客户端组成的开源文件共享资源软件,实现了Windows和Linux系统间的文件共享 1.安装Samba服务程序 yum in ...
- 合适么?现在学ASP.NET Core入门编程……
现在都快找不到ASP.NET的培训课程了. 知道我要开课做培训,有同学劝我:“憋讲那什么.NET,讲Java,现在这个火!”我说我Java不熟,“唉呀!C#转Java,分分钟的事!以飞哥你的经验,…… ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- 源码级调试的XNU内核
i春秋翻译小组-FWorldCodeZ 源码级调试的XNU内核 无论你是在开发内核扩展,进行漏洞研究,还是还有其他需要进入macOS / iOS内核,XNU,有时你需要附加调试器.当你这样做时,使用源 ...
- Win10U盘启动盘制作及Win10系统安装
准备工具: 1:一个8GU盘 2:下载MediaCreationTool1803.exe程序 及参考文档. 启动盘制作步骤: 1:运行 2:按照截图步骤依次...... 3:制作完成后插拔一下U盘在看 ...
- Vue(day2)
一.过滤器 Vue中可以自定义过滤文本插值的过滤器.目前有两个地方可以使用: 插值文本{{ var }}中使用. 在v-bind中使用.( 2.1.0+ ) 用法:使用管道连接符 | 将需要过滤的文本 ...
- zookeeper实现项目初始化缓存以及同步监听
Spring-利用InitializingBean接口和zookeeper实现项目初始化缓存以及同步监听 1.先贴出几个需要用到的工具类 ZkClientUtils import com.ithzk. ...
- [Abp 源码分析]九、事件总线
0.简介 事件总线就是订阅/发布模式的一种实现,本质上事件总线的存在是为了降低耦合而存在的. 从上图可以看到事件由发布者发布到事件总线处理器当中,然后经由事件总线处理器调用订阅者的处理方法,而发布者和 ...
- 开始使用Filebeat
认识Beats Beats是用于单用途数据托运人的平台.它们以轻量级代理的形式安装,并将来自成百上千台机器的数据发送到Logstash或Elasticsearch. (画外音:通俗地理解,就是采集数据 ...