2017年最值得学习的前端框架和技术

silverpanda 发布于1年前 阅读396次
0 条评论

JavaScript 的普及造就了一个非常活跃的技术,框架和库的生态系统。 这个生态系统不断涌现多式多样的框架和技术,对许多人来说都是高度的混乱。 那么你应该关注什么样的技术呢?

你应该在哪里方面投入时间来获得最大收益呢? 目前公司招聘哪些技术栈呢? 哪些技术增长潜力最大呢?

现在最重要的技术是什么?这篇文章高度概括了你需要知道的内容,你可以通过文章中的链接了解所有关于它的一些信息。

课程内容大纲 | 开篇:一线大公司对中高级前端工程师的要求

  • 1 JavaScript 测试基础
  • 2 JavaScript 难点选讲
  • 3 异步流程控制
  • 4 模块化
  • 5 模板引擎
  • 6 webpack
  • 7 学会性能测试对比
  • 8 基于缓存的前端性能优化
  • ......

记住,当你在学习一些实际的代码时,您可以在 Codepen.io 上交互式地执行代码。如果你还在学习 ES6 ,您可以看看如何使用  Babel REPL 进行转译。

这个列表很长,但不要气馁。你可以做到! 在看这个清单列表时,如果你担心你将如何学习所有构建现代应用程序所需知识,那么建议你先阅读一下 “为什么我要感谢 JavaScript 疲劳” 。然后静下心来,开始学习和工作。

可选学习标记

有些东西严格的说是 可选的* ,这意味着,如果您对他们感兴趣,我推荐它们,或者你的工作需要了解它们,但你不应该觉得必须去学习它们。任何标有星号的东西(例如: example* )都是可选的。

任何没有带 * 的东西都应该学习,但是不要觉得要学习一切或知道一切。应该有一个很好的认知,不一定需要成为一名各个领域都出众的专家。

JavaScript & DOM基础知识

在尝试以 Javscript 为生,进行工作之前,您应该对 Javascript 的基础知识有深刻的了解:

  • ES6  :当前最新版本的 JavaScript 是 ES2016(又名 ES7 ),但很多开发人员还没有正确学习 ES6 。是时候学习是  ES6 要点  了: Arrow functions(箭头函数) ,rest(剩余参数) / spread(扩展操作符) ,default parameters(默认参数) , concise object literals(对象字面量) ,destructuring(解构),解构等等…
  • Closures(闭包)  :了解 JavaScript 函数作用域的基本特性。
  • 函数 和   pure functions(纯函数) :你可能以为你已经很好地掌握了函数,但是 JavaScript 有一些技巧,您需要了解 纯函数 来掌握函数式编程。
  • Functional programming basics(函数式编程基础)  :函数式编程通过组合数学中的函数来生成一个大的程序,避免共享状态和可变数据。多年以来,我还没有看到一个大量使用函数式编程的 JavaScript 应用程序。是时候掌握基本原理了。 (愚人码头注:可以看看知乎上的这个回答:https://zhihu.com/question/28292740/answer/40336090)
  • Partial application(局部应用) 和 Curry(柯里化)
  • Builtin methods(内置方法)  :学习标准的数据类型 (特别是  arrays  ,  objects  ,  strings  , 和  numbers  )。
  • Callbacks(回调) : 回调是一个函数,当另一个函数有结果就绪时立即执行。 就像你说,“做你的工作,做完后打电话给我。”
  • Promises  : promise 是处理未来值的一种方式。当函数返回 promise 时,您可以使用  .then()  方法附加回调,这个回调将在 promise resolves时运行。resolved 值被传递到你的回调函数中,例如: doSomething().then(value => console.log(value));

JavaScript 代码:

  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. // 使用返回的 promises
  9. doSomething().then(
  10. // 当 resolve 时:
  11. log, // logs 42
  12. // 当 reject 时(resolve 时不会调用)
  13. log
  14. );
  15. // 记得处理错误哦!
  16. doSomething(new Error('oops'))
  17. .then(log) // not called this time
  18. .catch(log); // logs 'Error: oops'