什么基础才能学 node、angular、react、vue?

每天接到许多朋友的咨询:

你们 vue 课程讲的深吗? 有没有 react 深入的内容学习? 你们 Angular 会讲哪个版本?有最新的 AngularJS2 吗?我要学最新的…… 哦对了,你们教 node.js 吗?我听说会了这个工资能上 20k 呢~~

一般来说,如果不清楚对方基础,就没法往下继续了,所以我就会问:

你现在的技术掌握到哪个程度了?例如:

  • 处理用户提交数据及后端传输的数据可有困难?
  • 是否能够基于对象或面向对象进行程序开发?
  • 对 ES6 新出现的语法是否有一定了解?

之所以这样问,是因为只有充分了解对方的实际情况后,才能继续讨论下去。接下来对方的回答大多都是:

我听说这些很火啊,公司面试都会问啊,我之前大概了解过 JS ,但我听说公司现在都要求这些嘛,你说的那些东西要是我不懂的话,我就不能直接学 vue / react / angular / node…… 吗??

我眼神开始迷离了,思绪也慢慢飘向远方……忍不住想起几年前,类似的声音犹在耳畔:

我不懂 JS 啊,我不能直接学习 jQuery 吗?为什么一定要学 JS 呢?公司开发不是只需要 jQuery 就行了吗??

这类滑稽的对话,若干年就会出现一次,仿佛冥冥中注定一般,交替往复、轮回不休…


好吧,且收起无意义的感触,回归正题:

其实任何框架,都是用来解决开发中的某些实际问题的,比如 jQuery 是对原生 JavaScript 进行的封装,提供了一些方便使用的方法和特性,以及一些兼容性问题的处理。但如果不了解原生 JavaScript 的流程控制、内置方法、运行机制等核心基础,而直接去学习构建在这套体系之上的框架,那么无异于架构空中楼阁,越看越迷糊、越学越迷茫、越走越艰难……

那么,究竟要怎样才能顺畅的学习这些时下最流行的前端界宠儿呢?我们分别为大家一一介绍,先从 node.js 开始吧!


nodejs 的学前要求

首先需要明确的是 nodejs 其实是使用 JavaScript 基础语法做了操作浏览器之外的事情,比如:php、java 等语言做的事情。简单点说,在语法结构上和 JavaScript 是一致的,但是做的事情和 php、java 是一致的。那么学习 nodejs 之前我们必须要掌握的知识是:

一、JavaScript 基础,其实就是 ecmascript 部分,包括:

  • 数据类型;
  • 运算符;
  • 类型转换;
  • 流程控制;
  • 函数、闭包、回调、原型链等;
  • 事件机制;
  • 对象编程;

二、对一些系统、网络等知识需要有基本了解

  • 文件系统(例如获取文件信息、创建文件、文件访问权限……,要是对此一头雾水的同学,请自行度娘:文件系统);
  • 网络系统/协议(tcp/udp/http……);
  • 操作系统(windows/Linux);

三、了解一些基本的系统命令和工具的使用

  • cmd、Terminal(终端)工具;
  • ls(dir)、mkdir、rm、cd……等基础命令;

以后随着学习的深入,还需要根据实际需求,要了解诸如“图形图像、字符编码、数据库”等相关的知识。 对照你个人的知识结构,你知道自己要从哪里开始了吗?


接下来,按照出场时间顺序,我们再来看看 AngularJS、react.js、vue.js 的学习路径。


AngularJS1.x 的学前要求

AngularJS 提供了一套前端开发模式,比如“模块化、组件化、依赖注入”等,解决项目开发中结构组织的编写问题。与 jQuery 类似的地方在于 AngularJS 是可以让我们在开发中不需要过多的关注一些 DOM 操作、兼容性等内容,而专注于业务的处理,在学习 AngularJS 之前,你必须得知道什么是数据类型、怎么进行流程控制、如何进行前后端交互、如何处理解析数据等基础知识,因为这些事情 AngularJS 或其他框架是不会去帮我们处理的。按照知识点类型来划分,大体有三块:

一、必须要非常熟悉下面这几个知识点,我们才能处理用户提交的数据、后端传输的数据,才能知道怎么按照不同的业务去做不同的处理:

  • 数据类型;
  • 运算符;
  • 类型转换;
  • 流程控制;
  • 基本数据结构与处理(如数组、字符串、日期、集合等);

二、下面的知识点将帮助我们学会如何和后端进行交互,完成实际功能开发:

  • http;
  • ajax;
  • CORS;
  • jsonp;
  • Promise、await/async;
  • comet、SSE甚至是WebSocket;

三、框架基本都基于对象或面向对象进行开发,使用框架,我们至少得知道什么是对象,如何面向对象,才能在框架基础上解决问题,毕竟框架不是万能的,实际开发中需要我们能够有基于框架的扩展开发能力,这也是区别于他人的核心竞争力。具体至少包括以下几个知识点:

  • 对象;
  • 面向对象;
  • 组件等;

AngularJS2 的学习要求

AngularJS2 是 AngularJS1.x 的升华版,它继承了 1.x 的基本概念和特性,如“模块、组件、依赖注入”,同时又加入了一些新的功能特性,如“装饰器、组件强化”等。最新版本的 AngualarJS 底层代码基本全部重构了,并提供基于 JavaScript、Dart、TypeScript 的不同版本。当然,如果我们希望充分使用 AngularJS 的功能特性,推荐的是 TypeScript 的,那么这个时候对学前要求会相对 1.x 来说有很大的提高,除了具备上述 AngularJS1.x 的要求以外,还需要:

  • TypeScript:这个不用说,ng2 的基础,TypeScript 是微软开发的 JavaSript 的超集语言,它借鉴了 C# 等高级语言的语法特性;
  • ES2015+:可以说这是学习 TypeScript 必备的基础了;
  • npm(node包管理工具) / gulp(工程化工具) / webpack(与 gulp 类似) / tsc(TypeScript预编译工具) 等工具……;

了解以上的知识点以后,就可以开始学习 AngularJS2 的开发了。应该说,相对于 AngularJS1.x 来说,AngularJS2 的学习曲线异常陡峭!另外,令人惊喜的消息是:

AngularJS4 就快出来了唷,为啥木有 3 ?问 google 去喽,反正版本直接干到 AngularJS4 了,AngularJS4 计划本月推出(2017年3月份)。哦哦,不止哦,还有令人振奋的好消息呢:计划 2017 年底出 AngularJS5,2018年3月份出 AngularJS6,2018年底出 AngularJS7……从这个节奏看,似乎一年更新两个版本唷~ 总之,AngularJS 如此快捷迅猛的更新速度,能把人瞬间引向 “从入门到放弃” 的康庄大道上来……


react 的学前要求

react 在思想层面上与 AngularJS 类似,但是更轻量,更专注于 UI(界面)层的封装。既然是这样,学习基础也就与 AngularJS1.x 类似了,意味着如下知识必须牢牢掌握(复制了一段上面的文字,怕有些人跳过了 AngularJS1.x 直接看到这段来了):

一、必须要非常熟悉下面这几个知识点,我们才能处理用户提交的数据、后端传输的数据,才能知道怎么按照不同的业务去做不同的处理:

  • 数据类型;
  • 运算符;
  • 类型转换;
  • 流程控制;
  • 基本数据结构与处理(如数组、字符串、日期、集合等);

二、下面的知识点将帮助我们学会如何和后端进行交互,完成实际功能开发:

  • http;
  • ajax;
  • CORS;
  • jsonp;
  • Promise、await/async;
  • comet、SSE甚至是WebSocket;

三、框架基本都基于对象或面向对象进行开发,使用框架,我们至少得知道什么是对象,如何面向对象,才能在框架基础上解决问题,毕竟框架不是万能的,实际开发中需要我们能够有基于框架的扩展开发能力,这也是区别于他人的核心竞争力。具体至少包括以下几个知识点:

  • 对象;
  • 面向对象;
  • 组件等;

但是,react 是构建于 ECMA2015 以及现代化工具基础之上的,因此还需要了解:

  • ES2015+;
  • npm(node包管理工具) / gulp(工程化工具) / webpack(与 gulp 类似)等工具……;
  • 注:以上这些在妙味 VIP 视频或 JS 实体班、周末班中都有讲到哦~

vue.js 的学前要求

最后一个,国内神人尤雨溪的大作:vue.js,它的学前基础与 react 完全一致(这回不复制了,大家对照上面的看就行),相比较 react 而言,它的语法结构更容易上手,我们不妨从简单的两段代码来看看它们的差异:

- react -

// HTML
<div id="app">div>

// JS (pre-transpilation)
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        button>
      div>
    )
  }
}
ReactDOM.render(App, document.getElementById('app'));
- vue -

// HTML
<div id="app">
  <p>{{ message }}p>
  <button v-on:click="reverseMessage">Reverse Messagebutton>
div>

// JS
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

上面两段代码实现了同一个东西,你能感受到它俩的差异吗?什么?你竟然说你感受不出来?好吧,简单来说:

  • 如果你计划构建一个大型应用程序,请使用 React.js
  • 如果你的应用需要尽可能的小和快,请使用 Vue.js

上述的大,特指:数据量大、访问量大、业务逻辑庞大等,至于大到何种量级会导致在选择 vue 还是 react 中间犯难?如果你一定要一个权威而又精准的答案?这就需要详细了解二者底层的实现了。另外大家可以围观 vue 作者尤雨溪知乎帖:


尤雨溪

这个问题,我前不久刚在 Quora 答了个几乎一模一样的,不想再翻译一遍了,真想看就当学英文吧:https://www.quora.com/Which-should-I-learn-Mithril-Vue-or-Angular/answer/Evan-You-3 概括一下就是,想要只学一个一劳永逸,那是不可能的。好好打基础,然后多尝试不同风格的框架,因为只有尝试过后才能理解比如
@徐飞 提到的各种权衡,也只有尝试过后才能知道哪个能真正提升自己的开发效率。说没精力,那是借口。

如果你不是专业前端,那就用 Vue 吧!哈哈哈


其实最后一句是亮点唷:“如果你不是专业前端,那就用 Vue 吧!……” ^_^

原文链接:https://www.zhihu.com/question/39943474


综上所述,你们是否对自己的技术基础有了一个清晰认识?是要根据自己的追求去找寻答案?还是先去打牢 JavaScript 基础?欢迎在帖子下面留言、各抒己见吧!!!


妙味 “全日制、周末班” 报名通道:

  • QQ:2852509866、2852509867、2852509868
  • TEL:010-57269690
  • 在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00

扫描二维码手机看视频学习:

妙味网友
请登录后留言,请登录注册