本帖最后由 断天涯大虾 于 2017-3-28 16:03 编辑
JavaScript的流行促进了一个非常活跃的由相关技术,框架和库组成的生态圈的发展。整个生态圈的多样性和活跃性越来越强,这让许多人变得越来越困惑。 你应该了解些什么技术呢?
我们应该将时间花费在哪里才能获得最大的收益? 现在公司招聘要求的技术栈包括哪些?哪项技术的发展潜力最大?
当前需要掌握的最重要的技术是什么?
这篇文章高度概括了你需要了解的技术,并附上了每个技术对应的链接,通过链接中内容你可以详细了解该技术。
关于“可选学习”的注意事项文章中的有些内容是 可选的*,这里可选的意思是:如果你对这些内容感兴趣的话,我向你推荐这些知识;或者,找工作的时候可能会需要了解它们,但是不是非得学习它们。 任何标有星号(如例*)的都是可选的。
任何没有标有 “*” 的内容都需要学习,但不要觉得有义务去学习每项内容。你需要知道这些非可选的知识,但你不一定需要成为该主题绝对的专家。
JavaScript 和 DOM 基础在找一份JavaScript工作之前,你应该熟练掌握相关的JS基础知识: - ES6: JavaScript 的最新版本是 ES2016 (即 ES7),但很多开发人员还没有完全掌握ES6。是时候了解ES6了,至少需要了解下面这些基础的知识:箭头函数, rest参数/spread运算符, 默认参数,简洁的对象直接量表示法,解构等等;
- 闭包: 学习JavaScript的函数作用域是如何发挥作用的;
- 函数 & 纯函数 : 也许你会认为自己已经熟练掌握了函数的功能,但是JavaScript中的函数有一些自己的技巧,而且你需要学习纯函数来应付函数式编程;
- 函数式编程基础 : 函数式编程通过组合数学函数来产生程序,可以避免共享状态和可变数据。在产品级JavaScript应用程序中没有大量使用函数式编程的情况我已经很多年没有见过了。因此,现在是时候掌握函数式编程的基本原理了;
- 回调函数 : 回调函数是一个基本函数,它由另一个函数在特定结果发生时调用。回调函数可能会说: “执行你自己的逻辑,在特定事件发生时调用我”。
- 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 promises
- doSomething().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'
复制代码
- Node & Express: Node允许您在服务器上使用JavaScript, 意味着用户可以在云中存储数据并在任何地方访问它. Express最流行的框架为Node.
- Lodash: 一个伟大的, JavaScript的模块化使用, 应用了函数式编程的好东西.导入最后一个功能模块的数据 lodash/fp.
工具
- npm: JavaScript语言的标准开源包存储库。
- Babel: 用于编译ES6以在旧版浏览器上工作。
- Webpack: 用于标准JavaScript的最受欢迎的捆绑包寻找简单的入门工具包/样板配置示例,使事情快速运行)
- 原子, VSCode或 WebStorm + VIM: 你会需要一个编辑器。Atom和VSCode是当今最流行的JS编辑器。Webstorm是另一种解决方案,非常强大的支持质量工具。我建议学习vim,或者至少加上备忘单,因为迟早会需要在服务器上编辑文件,这是最简单的方法 - vim安装在与Unix兼容的操作系统的每一种风格上,在SSH终端连接上运行良好。
- ESLint: 尽早捕捉语法错误和风格问题。在代码审查和TDD之后,您可以做的第三件事就是减少代码中的错误。
- Tern.js: 用于标准JavaScript的类型推理工具,目前我最喜欢的JavaScript类型相关工具 - 无需编译步骤或注释。我已经踢了所有的轮胎,Tern.js提供了大部分的好处,几乎没有一个使用静态类型的JS系统的成本。
- 纱线 *: 与npm类似,但安装行为是确定性的,纱线的目的是要比npm快。
ReactReact 是一个JavaScript库,用于构建用户界面,由Facebook创建. 它是基于单向数据流的概念, 意味着每个更新周期: - React 采用组件作为props 和有条件地呈现DOM更新如果数据改变了DOM的特定部分. 数据更新在此阶段不能再触发器渲染,直到下一个绘画阶段.
- 事件处理阶段 — 在DOM渲染之后, React 在DOM树的根中自动将DOM事件委托给单个事件侦听器(为了获得更好的性能). 你可以侦听事件和更新数据的响应.
- 使用任何更改数据, 这过程将重复执行步骤1.
这与双向数据绑定相反,DOM更改可能会直接更新数据(例如,与Angular 1和Knockout相同)。使用双向绑定,DOM渲染过程(称为角度1中的摘要循环)对DOM的更改可能会在绘制完成之前重新触发绘制阶段,从而导致回流和重绘 - 降低了性能。 React不规定数据管理系统,但推荐使用基于Flux的方法。React的单向数据流方法借助功能编程和不可变数据结构的想法改变了我们对前端框架架构的思考。
ReduxRedux 为您的应用程序提供事务性,确定性的状态管理。在Redux中,我们迭代一个动作对象流,以减少到当前的应用程序状态。要了解为什么这很重要,请阅读 “10个更好的Redux架构提示”。 要开始使用Redux,请查看Redux的创始人Dan Abramov的优秀课程 : Redux是强制性学习,即使您从未将Redux 用于生产项目。
为什么?因为它会给你很多的练习,并教你使用纯功能的价值, 并教你如何思考reducers的新方法 ,这些是 减少数据库的通用功能 ,用于迭代数据集合并从中提取一些值。减速器通常是有用的, Array.prototype.reduce 被添加到JS规范中。
减少器对于不仅仅是阵列而言是重要的,并且学习使用减速器的新方法是有价值的。
Angular 2+*
Angular 2 + 是Google广受欢迎的Angular框架的继承者。由于这是疯狂的人气,它将在你的简历上看起来很棒 - 但是我建议先学习React。 - 这更简单,
- 它非常受欢迎,用于大量工作(Angular 2+)
因此,我建议学习React,但我认为Angular 2+是严格可选的*。如果您对Angular 2+有较强的偏好,请随意互换。首先学习Angular 2+,并考虑React可选。要么会让你受益匪浅,你的简历会很好。
不论你选择哪一个,试着去关注它至少6个月 - 1年之后再去学习另一个。要真正精通是需要时间的历练。
RxJS *RxJS 是JavaScript的响应编程实用程序的集合。认为这是lodash流。响应式编程已经正式官方的进入JavaScript的使用场景。ECMAScript可见提案草案阶段1和RxJS 5 +规范化标准的实现。
我非常喜欢RxJS,如果你只是一下子就把整件事全部导入,它真的可以扩大你的包大小(会产生很多的数据流量,套餐不够用了)。为了减小束生产环境文件的大小,不要导入所有程序接口。使用补丁进口,替代: - import { Observable } from 'rxjs/Observable';
- // then patch import only needed operators:
- import 'rxjs/add/operator/map';
- import 'rxjs/add/observable/from';
- const foo = Observable.from([1, 2, 3]);
- foo.map(x => x * 2).subscribe(n => console.log(n));
复制代码
|