Babel + ES6课程答疑

[GuoYongfeng]

Babel + ES6课程答疑

写在前面

这里统一回复，具体同学们反馈的有以下三个大方向的问题：

• 视频质量问题
• 课程快慢问题
• 内容粗细问题

课程内容答疑

1. decorator应用场景

修饰器（Decorator）是一个函数，用来修改类的行为（方法或属性），从而实现代码重用，了解Java的springmvc的同学可以类比注解这个概念。

2. 对操作命令困惑，对前期的准备工作困惑，不知道为啥建那么多js文件，为什么要建到那个位置，后来讲的内容到是还瞒不错的，受益匪浅

操作命令用的是一些常用的，而且在预习课讲过（请复习一下之前的课程或讲义），主要以下几块：

• 基本的shell命令
• 基本的git命令
• 基本的npm命令

3. babel的一个正常的流程还是不是很清晰，这儿一个那儿一个，各个之间的区别都不是很清楚。

其实课上的就是一个常用的使用流程：

• 命令行工具：babel-cli
• 核心模块：babel-core babel-polyfill babel-runtime ...
• 各种预设：babel-preset-es2015 babel-preset-react ...
• 各种插件：babel-plugin-transform-runtime ...
• 更多应用：如何封装自己的插件，和构建工具集成，测试，代码检查 ...

4. set, map以及各种es6新增内容的使用场景

基础部分在博客文章中列出，有时间的话，还是建议看一下阮一峰老师的《ES6入门》

5. es6使用不熟悉

这个不着急，慢慢来，先看这十几个基本常用的，并且知道新的语法特性解决了什么问题，这样能学的快一些。

6. requirejs cmd amd规范

只能在这里写一个大概的，更多关于规范的还得自己去学习。

// Requirejs -> AMD
define('module-id', ['module'], function(a){ // TODO });

// Seajs -> CMD
define(function(require, module, exports){ // TODO });

// Commonjs
var fs = require('fs');
module.exports = function(){ // TODO }

7. 新语法，新技术如何运用到项目中

新的东西需要去接触，去学习。但是应用到项目中又是另一个方面，不能为了新而新，一定是为了解决项目的问题，或是提高开发的效率，才去把新的技术元素加入到项目中的。比如ES6有很多非常优秀好用的新特性，那么学完这次课，你就可以试着把ES6加入到项目中，但是需要做好工具方面的支撑，比如babel和gulp或是webpack。

8. class里面，静态方法和实例方法具体怎么写？

class MyClass {
  // 类的实例属性
  myProp = 42;

  // 类的构造函数
  constructor() {
    console.log(this.myProp); // 42
  }

  // 静态方法
  static classMethod() {
    return 'hello';
  }

  // 取值函数
  get prop() {
    return 'getter';
  }

  // 存值函数
  set prop(value) {
    console.log('setter: '+value);
  }

  // 原型方法
  toString() {
    return this.color + ' ' + super.toString(); 
  }
}

// 静态属性
MyClass.prop = 1;

9. 目前做项目用不到，还是对这些知识感觉很迷茫，接下来自己先认真的学习和复习，遇到具体问题后再群里与大家沟通交流

那暂时就当是技术储备，需要用的话，你的技术储备就发挥价值了。

10. 细节讲太多，应该多讲一些react的相关的技术栈以及怎么联系到一起使用，本来这个是相对比较多概念的架构 基础概念还是留着课后自学吧

感谢反馈，这就是传说中的众口难调。暂时还是考虑讲一些细节吧，毕竟需要拉上一些基础不是很好的同学一起玩耍。

11. 增加一些课时，讲慢一点

目前阶段不会增加课时了，不过可以讲慢一点，抱歉。

12.可以深入讲解下promise， 和他的简单实现

好的，感谢反馈，这个后面我单独加一部分内容放到博客上，请到时关注。

13. 2小时的课程，像赶马车一样往前赶，代码好多都复制粘贴过来，连代码如何敲出来的都没看到，说这样能学好，我只能呵呵呵......#这个效果比自己看郭老师写的文档差太多了！

感谢你的反馈，如你所说，2个小时的课程内容比较赶，更多是需要大家做好课前预习，再结合课上讲解。总体还是应用加引导，在有限的时间内讲不全，后面会考虑课程的拆分。

14. 老师说话能不能清晰一点，大声一点，不然听起来真的很吃力。

好的，感谢反馈，我们下次课直接麦克风。

15. 希望下次课还是给讲一下函数化编程吧,进度在快点吧！

好的，这个会放在redux的时候讲一下，这次课程的2个小时时间讲不完。

16. ES6的知识点讲的太浅显，不明白为什么会有这些新特性相比较ES5到底好在哪儿，各特性的适用场景？语法糖和真正的新特性也没区分开！

这次课程的ES6知识属于快餐式的，做一个基本的介绍。

17. 多讲一些react技巧跟react相关技术栈怎么结合的问题，别讲着讲着讲到很基础的什么浏览器meta标签，git指令 这些介绍下，要求git必须会就行了， 跟react没什么关系吧 打算学react就应该对基础自学能力强，不然还学什么全栈，那得学多久？

同学，你好，感谢反馈，你的基础应该是不错的。不过这次课程的人数比较多，甚至当前讲的一些知识点也还没消化，所以这次的课程内容会多一些，主要是考虑大多数吧，抱歉。下一期考虑基础应用和高级实战分离，这样可以适用于不同基础的同学。

18. 建议老师在讲课时，照顾下后面的同学，录视频的时候看看能不能把正在操作的屏幕部分移动到屏幕靠上一些或做下放大处理效果（看视频时会方便些），谢谢

好的，感谢反馈，我们争取课后在视频上做一些优化处理。

[GuoYongfeng]

前排留坐，欢迎大家盖楼提问或是回答问题

[Jasenpan1987]

老师，我看到有个教程里说，generator对于异步来说比promise更好，希望您可以给我们普及一下generator的内容。

另外，您的es6-demo的example里面，第30行是不是应该是
console.log(Object.getPrototypeOf(Today) === func2);

[GuoYongfeng]

@Jasenpan1987

感谢提问，分两个部分内容回答。

1. 关于generator

这里简单说一下，Generator函数是ES6提供的一种异步编程解决方案，他的语法有点特殊，是你之前没见过的函数定义方式。

• 从语法上，Generator函数是一个状态机，封装了多个内部状态。
• 从形式上，Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句（yield -> 产出），定义不同的内部状态。

function* myFun() {
  yield 'guo';
  yield 'yongfeng';
  return 'over...';
}

var demo = myFunc();

demo.next(); // { value: 'guo', done: false }
demo.next(); // { value: 'yongfeng', done: false }
demo.next(); // { value: 'over...', done: true }
demo.next(); // { value: undefined, done: true }

1. es6-demo的example里面的代码错误

好的，感谢反馈，稍后修正。

[Jasenpan1987]

嗯 谢谢老师的解答

[pengchengCN]

老师 图片上传不了，发您QQ上了
图中html标签里面都会生成 data-reactid="0.0.$channel" 类似的怎么出来的，他们的作用是虚拟DOM吗？

[cn-yinlubin]

老师，别听他们的，讲什么promise讲什么es6啊，大概知道怎么用就行了，基础自己学好吗！！让他们自己学吧！讲一些自己不容易学到的东西，或者自己难理解的知识点，关键是含金量。

[happychong]

老师，webpack+react这种项目，
1：对老项目代码怎么整合？用到什么插件？什么思路？参考文献？
2：使用本地假数据用什么方案？用到什么插件？什么思路？参考文献？

[GuoYongfeng]

@happychong

1. 需要明确你的老项目是什么样的技术架构，才能确定怎么整合，并考虑最适合的方式
2. 本地假数据可以通过proxy代理的方式实现，在本地用node起一个server，发送的接口请求proxy到本地的json文件，这样就可以模拟数据进行测试。

[SanShiSir]

webpack-dev-server怎么实现实时刷新配置，在react课程里，怎么没有自动刷新