什么基础才能学 nodeangularreactvue？

Posted 2021-04-26 H5前景

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

• 处理用户提交数据及后端传输的数据可有困难？

• 是否能够基于对象或面向对象进行程序开发？

• 对 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 部分，包括：

1、数据类型；
2、运算符；
3、类型转换；
4、流程控制；
5、函数、闭包、回调、原型链等；
6、事件机制；
7、对象编程；

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

1、文件系统（例如获取文件信息、创建文件、文件访问权限……，要是对此一头雾水的同学，请自行度娘：文件系统）；
2、网络系统/协议（tcp/udp/http……）；
3、操作系统（windows/Linux）；

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

1、cmd、Terminal（终端）工具；
2、ls(dir)、mkdir、rm、cd……等基础命令；
3、以后随着学习的深入，还需要根据实际需求，要了解诸如“图形图像、字符编码、数据库”等相关的知识。

对照你个人的知识结构，你知道自己要从哪里开始了吗？

---

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

AngularJS1.x 的学前要求

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

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

1、数据类型；
2、运算符；
3、类型转换；
4、流程控制；
5、基本数据结构与处理（如数组、字符串、日期、集合等）；

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

1、http；
2、ajax；
3、CORS；
4、jsonp；
5、Promise、await/async；
6、comet、SSE甚至是WebSocket；

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

1、对象；
2、面向对象；
3、组件等；

AngularJS2 的学习要求

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

1、TypeScript：这个不用说，ng2 的基础，TypeScript 是微软开发的 JavaSript 的超集语言，它借鉴了 C# 等高级语言的语法特性；
2、ES2015+：可以说这是学习 TypeScript 必备的基础了；
3、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 直接看到这段来了）：

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

1、数据类型；
2、运算符；
3、类型转换；
4、流程控制；
5、基本数据结构与处理（如数组、字符串、日期、集合等）；

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

1、http；
2、ajax；
3、CORS；
4、jsonp；
5、Promise、await/async；
6、comet、SSE甚至是WebSocket；

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

1、对象；
2、面向对象；
3、组件等；

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

1、ES2015+；
2、npm（node包管理工具） / gulp（工程化工具） / webpack（与 gulp 类似）等工具……；

---

vue.js 的学前要求

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

- react -

html 代码

// 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 作者尤雨溪知乎帖：

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