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

妙味课堂
妙味课堂 发布于 2017-03-08 16:54:16 浏览:2128 类型:原创 - 教程 分类:类库框架 - 技术分享 二维码: 作者原创 版权保护
什么基础才能学 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 部分,包括:
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 类似)等工具……;

注:以上这些在妙味 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 基础?欢迎在帖子下面留言、各抒己见吧!!!
z
给个赞 18 人点赞
收藏 25 人收藏
评论 已有 14 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
妙味课堂
妙味课堂2017-03-09 10:29:484F
早上好,我是 leo emoticon //@cangdu:请问您是妙味课堂的哪位老师?
举报 支持 (1) 回复 (1)
最新评论
妙味课堂
妙味课堂7 天前14F
前端路漫长,且行且珍惜…… //@dream_intheway:感觉路好长,还没上道。。。。。。。。。
举报 支持 (0) 回复 (0)
dream_intheway
dream_intheway2017-03-16 16:22:2813F
感觉路好长,还没上道。。。。。。。。。
举报 支持 (0) 回复 (1)
妙味课堂
妙味课堂2017-03-10 13:55:3312F
用原生打天下,功夫浓厚,照样难逢敌手~~emoticon //@豆角:我全都放弃了emoticon
举报 支持 (0) 回复 (0)
豆角
豆角2017-03-10 13:17:0711F
我全都放弃了emoticon
举报 支持 (0) 回复 (1)
妙味课堂
妙味课堂2017-03-09 18:37:1710F
如果对上文提到的相关知识的确是掌握扎实的话,可以先从 vue 入手。这些框架中,理解一个了,其他的大体都相通。 //@李小帅:好的谢谢,那我现在学了HTML和JS,JQ  下来先从哪个框架入手好点 //@妙味课堂:精通这个词相当诱惑人。先不谈精通,聊聊实际可能发生的事,一般的场景是这样:公司新项目开发前,框架选择问题上,大家纷纷发言(又或者只有前端架构师发言),从团队成员实际掌握技能情况和项目实际需求出发,横向对比各种框架优劣利弊得失,最终敲定了使用某框架,则该框架是团队中大多数人(或者只有架构师)最熟悉的了。不过实际情况往往是:并非该框架是最优选择,而是所选择的框架曾经踩的坑较多~~ //@李小帅:框架怎样才算精通?
举报 支持 (0) 回复 (0)
妙味课堂
妙味课堂2017-03-09 18:35:559F
所以还是先把原生的这些东东补扎实了,再去看那些框架吧~~加油!! //@杜塞尔多夫:表示就是对面向对象,原型什么的弄得不是很懂,然后最近在看vue就是云里雾里了!emoticon
举报 支持 (0) 回复 (0)
李小帅
李小帅2017-03-09 17:55:168F
好的谢谢,那我现在学了HTML和JS,JQ  下来先从哪个框架入手好点 //@妙味课堂:精通这个词相当诱惑人。先不谈精通,聊聊实际可能发生的事,一般的场景是这样:公司新项目开发前,框架选择问题上,大家纷纷发言(又或者只有前端架构师发言),从团队成员实际掌握技能情况和项目实际需求出发,横向对比各种框架优劣利弊得失,最终敲定了使用某框架,则该框架是团队中大多数人(或者只有架构师)最熟悉的了。不过实际情况往往是:并非该框架是最优选择,而是所选择的框架曾经踩的坑较多~~ //@李小帅:框架怎样才算精通?
举报 支持 (0) 回复 (1)
杜塞尔多夫
杜塞尔多夫2017-03-09 16:34:057F
表示就是对面向对象,原型什么的弄得不是很懂,然后最近在看vue就是云里雾里了!emoticon
举报 支持 (0) 回复 (1)
妙味课堂
妙味课堂2017-03-09 11:09:066F
客气了哈,我们课程对你有帮助就好~~emoticon //@cangdu:您好,我的前端入门指路人 //@妙味课堂:早上好,我是 leo emoticon //@cangdu:请问您是妙味课堂的哪位老师?
举报 支持 (0) 回复 (0)
cangdu
cangdu2017-03-09 11:08:005F
您好,我的前端入门指路人 //@妙味课堂:早上好,我是 leo emoticon //@cangdu:请问您是妙味课堂的哪位老师?
举报 支持 (0) 回复 (1)
妙味课堂
妙味课堂2017-03-09 10:29:484F
早上好,我是 leo emoticon //@cangdu:请问您是妙味课堂的哪位老师?
举报 支持 (1) 回复 (1)
cangdu
cangdu2017-03-09 10:13:553F
请问您是妙味课堂的哪位老师?
举报 支持 (0) 回复 (1)
妙味课堂
妙味课堂2017-03-09 09:28:592F
精通这个词相当诱惑人。先不谈精通,聊聊实际可能发生的事,一般的场景是这样:公司新项目开发前,框架选择问题上,大家纷纷发言(又或者只有前端架构师发言),从团队成员实际掌握技能情况和项目实际需求出发,横向对比各种框架优劣利弊得失,最终敲定了使用某框架,则该框架是团队中大多数人(或者只有架构师)最熟悉的了。不过实际情况往往是:并非该框架是最优选择,而是所选择的框架曾经踩的坑较多~~ //@李小帅:框架怎样才算精通?
举报 支持 (0) 回复 (1)
李小帅
李小帅2017-03-09 09:13:191F
框架怎样才算精通?
举报 支持 (0) 回复 (1)
妙味课堂 妙味课堂 作者

学习是兴趣驱动的,不是工资驱使的;你是自己的主人, 不是金钱的奴隶。- leo -

作者最新