JavaScript的流行促进了一个非常活跃的由相关技术,框架和库组成的生态圈的发展。整个生态圈的多样性和活跃性越来越强,这让许多人变得越来越困惑。 你应该了解些什么技术呢?
我们应该将时间花费在哪里才能获得最大的收益? 现在公司招聘要求的技术栈包括哪些?哪项技术的发展潜力最大?
当前需要掌握的最重要的技术是什么?
这篇文章高度概括了你需要了解的技术,并附上了每个技术对应的链接,通过链接中内容你可以详细了解该技术。
任何没有标有 “*” 的内容都需要学习,但不要觉得有义务去学习每项内容。你需要知道这些非可选的知识,但你不一定需要成为该主题绝对的专家。
JavaScript 和 DOM 基础
在找一份JavaScript工作之前,你应该熟练掌握相关的JS基础知识:
ES6: JavaScript 的最新版本是 ES2016 (即 ES7),但很多开发人员还没有完全掌握ES6。是时候了解ES6了,至少需要了解下面这些基础的知识:箭头函数, rest参数/spread运算符, 默认参数,简洁的对象直接量表示法,解构等等;
闭包: 学习JavaScript的函数作用域是如何发挥作用的;
函数 & 纯函数 : 也许你会认为自己已经熟练掌握了函数的功能,但是JavaScript中的函数有一些自己的技巧,而且你需要学习纯函数来应付函数式编程;
函数式编程基础 : 函数式编程通过组合数学函数来产生程序,可以避免共享状态和可变数据。在产品级JavaScript应用程序中没有大量使用函数式编程的情况我已经很多年没有见过了。因此,现在是时候掌握函数式编程的基本原理了;
原生方法 : 学习内置标准数据类型的方法(尤其是 arrays, objects, strings, 和 numbers类型);
回调函数 : 回调函数是一个基本函数,它由另一个函数在特定结果发生时调用。回调函数可能会说: “执行你自己的逻辑,在特定事件发生时调用我”。
Promises机制 : 诺言是用来处理未来返回值的一种方法。如果某函数调用返回一个诺言对象,你可以使用该对象的
.then()
方法绑定一个回调函数,它在诺言兑现的时候被调用。 而且,诺言兑现时候的值会传递到你的回调函数比如:doSomething().then(value => console.log(value));
const doSomething = (err) =>new Promise((resolve, reject) => { if (err) return reject(err); setTimeout(() => { resolve(42); }, 1000);});const log = value => console.log(value);// Using returned promisesdoSomething().then( //on resolve: log, // logs 42 // on reject (not called this time) log);// remember to handle errors!doSomething(new Error('oops')) .then(log) //not called this time.catch(log); // logs 'Error: oops'
Ajax & 服务器API调用: 最有趣的应用最终需要与网络交谈. 你应该知道如何与 APIs通信.
Classes (note: 避免类继承. 阅读 如何使用类and Sleep at Night.)
Generators & 异步/等待: 在我看来, 最好的方法编写异步代码看起来同步. 它有一个学习曲线, 但是一旦你学会了它, 代码更容易阅读.
性能: RAIL — 开始于“PageSpeed见解” &“WebPageTest.org”
渐进式的Web应用程序 (PWAs): 阅读 “原生应用” & “为什么原生应用是失败的”
Node & Express: Node允许您在服务器上使用JavaScript, 意味着用户可以在云中存储数据并在任何地方访问它. Express最流行的框架为Node.
Lodash: 一个伟大的, JavaScript的模块化使用, 应用了函数式编程的好东西.导入最后一个功能模块的数据
lodash/fp
.
React
React 是一个JavaScript库,用于构建用户界面,由Facebook创建. 它是基于单向数据流的概念, 意味着每个更新周期:
React 采用组件作为props 和有条件地呈现DOM更新如果数据改变了DOM的特定部分. 数据更新在此阶段不能再触发器渲染,直到下一个绘画阶段.
事件处理阶段 — 在DOM渲染之后, React 在DOM树的根中自动将DOM事件委托给单个事件侦听器(为了获得更好的性能). 你可以侦听事件和更新数据的响应.
使用任何更改数据, 这过程将重复执行步骤1.
更多关于 React & Flux 架构的内容请阅读 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”.
create-react-app*: React 快速开始