找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2017-3-28 15:55  /   查看:6844  /  回复:2
本帖最后由 断天涯大虾 于 2017-3-28 16:03 编辑

JavaScript的流行促进了一个非常活跃的由相关技术,框架和库组成的生态圈的发展。整个生态圈的多样性和活跃性越来越强,这让许多人变得越来越困惑。 你应该了解些什么技术呢?

我们应该将时间花费在哪里才能获得最大的收益? 现在公司招聘要求的技术栈包括哪些?哪项技术的发展潜力最大?

当前需要掌握的最重要的技术是什么?

这篇文章高度概括了你需要了解的技术,并附上了每个技术对应的链接,通过链接中内容你可以详细了解该技术。

记住,在学习的过程中一定要多动手写代码。 你可以通过 Codepen.io 网站来交互式地写代码;或者如果你在学习ES6的话,可以尝试通过 Babel REPL来对其进行转码。

这将会是一份很长的清单,但请不要气馁。相信自己,你能够做到的!如果你看着这份清单,担心到什么时候才能学会构建现代应用程序所需的一切,请先移步 “Why I’m Thankful for JavaScript Fatigue”。然后沉下心来开始我们的学习:

关于“可选学习”的注意事项
文章中的有些内容是 可选的*,这里可选的意思是:如果你对这些内容感兴趣的话,我向你推荐这些知识;或者,找工作的时候可能会需要了解它们,但是不是非得学习它们。 任何标有星号(如例*)的都是可选的。

任何没有标有 “*” 的内容都需要学习,但不要觉得有义务去学习每项内容。你需要知道这些非可选的知识,但你不一定需要成为该主题绝对的专家。

JavaScript 和 DOM 基础
在找一份JavaScript工作之前,你应该熟练掌握相关的JS基础知识:
  • ES6: JavaScript 的最新版本是 ES2016 (即 ES7),但很多开发人员还没有完全掌握ES6。是时候了解ES6了,至少需要了解下面这些基础的知识:箭头函数, rest参数/spread运算符, 默认参数,简洁的对象直接量表示法,解构等等;

  • 闭包: 学习JavaScript的函数作用域是如何发挥作用的;

  • 函数 & 纯函数 : 也许你会认为自己已经熟练掌握了函数的功能,但是JavaScript中的函数有一些自己的技巧,而且你需要学习纯函数来应付函数式编程;

  • 函数式编程基础 : 函数式编程通过组合数学函数来产生程序,可以避免共享状态和可变数据。在产品级JavaScript应用程序中没有大量使用函数式编程的情况我已经很多年没有见过了。因此,现在是时候掌握函数式编程的基本原理了;



  • 回调函数 : 回调函数是一个基本函数,它由另一个函数在特定结果发生时调用。回调函数可能会说: “执行你自己的逻辑,在特定事件发生时调用我”。

  • Promises机制 : 诺言是用来处理未来返回值的一种方法。如果某函数调用返回一个诺言对象,你可以使用该对象的 .then()方法绑定一个回调函数,它在诺言兑现的时候被调用。 而且,诺言兑现时候的值会传递到你的回调函数比如: doSomething().then(value => console.log(value));
    1. const doSomething = (err) => new Promise((resolve, reject) => {
    2.   if (err) return reject(err);

    3.   setTimeout(() => {
    4.     resolve(42);
    5.   }, 1000);
    6. });

    7. const log = value => console.log(value);

    8. // Using returned promises
    9. doSomething().then(
    10.   // on resolve:
    11.   log, // logs 42
    12.   // on reject (not called this time)
    13.   log
    14. );

    15. // remember to handle errors!
    16. doSomething(new Error('oops'))
    17.   .then(log) // not called this time
    18. .catch(log); // logs 'Error: oops'
    复制代码



  • Generators & 异步/等待: 在我看来, 最好的方法编写异步代码看起来同步. 它有一个学习曲线, 但是一旦你学会了它, 代码更容易阅读.



  • Node & Express: Node允许您在服务器上使用JavaScript, 意味着用户可以在云中存储数据并在任何地方访问它. Express最流行的框架为Node.

  • Lodash: 一个伟大的, JavaScript的模块化使用, 应用了函数式编程的好东西.导入最后一个功能模块的数据 lodash/fp.

工具

  • npm:  JavaScript语言的标准开源包存储库。

  • git  &  GitHub:  分布式版本管理器 - 跟踪您的源代码随时间的变化。

  • 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快。


  • Flow *:  JavaScript的静态类型检查器。请参阅 “TypeScript vs Flow”  ,以便对这两者进行令人印象深刻的客观比较。请注意,我有一些困难,让Flow给我很好的IDE反馈,即使使用 Nuclide


React
React 是一个JavaScript库,用于构建用户界面,由Facebook创建. 它是基于单向数据流的概念, 意味着每个更新周期:
  • React 采用组件作为props 和有条件地呈现DOM更新如果数据改变了DOM的特定部分. 数据更新在此阶段不能再触发器渲染,直到下一个绘画阶段.
  • 事件处理阶段 — 在DOM渲染之后, React 在DOM树的根中自动将DOM事件委托给单个事件侦听器(为了获得更好的性能). 你可以侦听事件和更新数据的响应.
  • 使用任何更改数据, 这过程将重复执行步骤1.

这与双向数据绑定相反,DOM更改可能会直接更新数据(例如,与Angular 1和Knockout相同)。使用双向绑定,DOM渲染过程(称为角度1中的摘要循环)对DOM的更改可能会在绘制完成之前重新触发绘制阶段,从而导致回流和重绘 - 降低了性能。
React不规定数据管理系统,但推荐使用基于Flux的方法。React的单向数据流方法借助功能编程和不可变数据结构的想法改变了我们对前端框架架构的思考。


Redux
Redux  为您的应用程序提供事务性,确定性的状态管理。在Redux中,我们迭代一个动作对象流,以减少到当前的应用程序状态。要了解为什么这很重要,请阅读 “10个更好的Redux架构提示”。  要开始使用Redux,请查看Redux的创始人Dan Abramov的优秀课程 :
Redux是强制性学习,即使您从未将Redux  用于生产项目。

为什么?因为它会给你很多的练习,并教你使用纯功能的价值,   并教你如何思考reducers的新方法  ,这些是  减少数据库的通用功能  ,用于迭代数据集合并从中提取一些值。减速器通常是有用的,  Array.prototype.reduce 被添加到JS规范中。

减少器对于不仅仅是阵列而言是重要的,并且学习使用减速器的新方法是有价值的。

Angular 2+*
Angular 2 +  是Google广受欢迎的Angular框架的继承者。由于这是疯狂的人气,它将在你的简历上看起来很棒 - 但是我建议先学习React。
我喜欢对Angular 2 + 的  反应,因为:
  • 这更简单,
  • 它非常受欢迎,用于大量工作(Angular 2+)

因此,我建议学习React,但我认为Angular 2+是严格可选的*。如果您对Angular 2+有较强的偏好,请随意互换。首先学习Angular 2+,并考虑React可选。要么会让你受益匪浅,你的简历会很好。

不论你选择哪一个,试着去关注它至少6个月 - 1年之后再去学习另一个。要真正精通是需要时间的历练。

RxJS *
RxJS  是JavaScript的响应编程实用程序的集合。认为这是lodash流。响应式编程已经正式官方的进入JavaScript的使用场景。ECMAScript可见提案草案阶段1和RxJS 5 +规范化标准的实现。

我非常喜欢RxJS,如果你只是一下子就把整件事全部导入,它真的可以扩大你的包大小(会产生很多的数据流量,套餐不够用了)。为了减小束生产环境文件的大小,不要导入所有程序接口。使用补丁进口,替代:
  1. import { Observable } from 'rxjs/Observable';
  2. // then patch import only needed operators:
  3. import 'rxjs/add/operator/map';
  4. import 'rxjs/add/observable/from';

  5. const foo = Observable.from([1, 2, 3]);
  6. foo.map(x => x * 2).subscribe(n => console.log(n));
复制代码

   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

3 个回复

倒序浏览
taniyuki
注册会员   /  发表于:2023-12-14 12:42:03
沙发
本帖最后由 taniyuki 于 2023-12-14 12:43 编辑

ECMAScript可见提案草案阶段1和RxJS 5 +规范化标准的实现。
(https://gg.com)


回复 使用道具 举报
Richard.HuangSpreadJS 开发认证
超级版主   /  发表于:2023-12-14 15:18:05
板凳
taniyuki 发表于 2023-12-14 12:42
ECMAScript可见提案草案阶段1和RxJS 5 +规范化标准的实现。
(https://gg.com)

您好,请问您的具体问题是什么?
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部