ES6语法

Generator函数

Generator 函数是 ES6 提供的 一种异步编程解决方案，语法行为与传统函数完全不同 。
Generator函数有两个特征: 一是 function命令与函数名 之间有一个星号: 二是 函数体内部使用 yield语句定义不同的内部状态。
用法：

<script>
    function* hello () {
        yield "hello";
        yield "world";
        return "done";
    } 

    let h = hello();

    console.log(h.next()); //{value: "hello", done: false}
    console.log(h.next()); //{value: "world", done: false}
    console.log(h.next()); //{value: "done", done: true}
    console.log(h.next()); //{value: undefined, done: true}
</script>

可以看到，通过hello()返回的h对象，每调用一次next()方法返回一个对象，该对象包含了value值和done状态。直到遇到return关键字或者函数执行完毕，这个时候返回的状态为ture，表示已经执行结束了。

for…of循环

通过for…of可以循环遍历Generator函数返回的迭代器

<script>
    function* hello () {
        yield "hello";
        yield "world";
        return "done";
    } 

	let h = hello();

    for (let obj of h) {
    	console.log(obj);
    }
</script>
// 输出：
hello
world

修饰器(Decorator)

修饰器(Decorator)是一个函数， 用来修改类的行为。 ES2017 引入了这项功能， 目前 Babel 转码器己经支持

<script>
    @T //通过@符号进行引用该方法，类似java中的注解
    class User {
        constructor(name, age = 20){
            this.name = name;
            this.age = age;
        }
    } 
    function T(target) { //定义一个普通的方法
        console.log(target); //target对象为修饰的目标对象，这里是User对象
        target.country = "中国"; //为User类添加一个静态属性country
    } 
    console.log(User.country); //打印出country属性值
</script>

运行报错：

原因是，在ES6中，并没有支持该用法，在ES2017中才有，所以我们不能直接运行了，需要进行编码后再运行。
转码的意思是：将ES6或ES2017转为ES5执行。类似这样：

//转码前
input .map(item =>item + 1);
//转码后
input.map(function (item) {
	return item + 1;
})

转码器

• Babel (babeljs.io)是一个广为使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而 在浏览器或其他环境执行 。
• Google 公司的 Traceur 转码器 Cgithub.com/google/traceur-compiler)， 也可 以将 ES6 代码转为ES5的代
  码

了解UmiJS

官网：https://umijs.org/zh/

UmiJS 读音：（乌米）
特点：

• 插件化
  • umi 的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成，比如 pwa、按需加载、一键切换 preact、一键兼容 ie9 等等，都是由插件实现。
• 开箱即用
  • 你只需一个 umi 依赖就可启动开发，无需安装 react、preact、webpack、react-router、babel、jest 等
    等。
• 约定式路由
  • 类 next.js 的约定式路由，无需再维护一份冗余的路由配置，支持权限、动态路由、嵌套路由等等

部署安装

#首先，需要安装Node.js
#在资料中，找到node-v8.12.0-x64.msi，一路下一步安装
#安装完成后，通过node -v 命令查看其版本号
F:\code\itcast-es6>node -v
v8.12.0
#接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些
#可以把yarn看做了优化了的npm
npm i yarn tyarn -g #-g 是指全局安装
tyarn -v #进行测试，如果能够正常输出版本信息则说明安装成功了
#如果安装失败，是由于将yarn添加到环境变量中导致，参见
http://www.easysb.cn/index.php/2017/06/04/11/
#下面开始安装umi
tyarn global add umi
umi #进行测试

快速入门

#通过初始化命令将生成package.json文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。
tyarn init -y

#通过umi命令创建index.js文件
umi g page index #可以看到在pages下创建好了index.js和index.css文件

#将下面内存拷贝到index.js文件中进行测试
    @T //通过@符号进行引用该方法，类似java中的注解
    class User {
        constructor(name, age = 20){
            this.name = name;
            this.age = age;
        }
    } 

    function T(target) { //定义一个普通的方法
        console.log(target); //target对象为修饰的目标对象，这里是User对象
        target.country = "中国"; //为User类添加一个静态属性country
    } 

    console.log(User.country); //打印出country属性值

#通过命令行启动umi的后台服务,用于本地开发
umi dev
#通过浏览器进行访问：http://localhost:8000/，查看效果
#值得注意的是，这里访问的是umi的后台服务，不是idea提供的服务

查看编码后的js文件：

可以看到，将我们写的代码进行的编码。

模块化

什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。
而JS中没有包的概念，换来的是 模块。
模块功能主要由两个命令构成： export 和 import 。

• export 命令用于规定模块的对外接口
• import 命令用于导入其他模块提供的功能

export

比如我定义一个js文件:Util.js，里面有一个Util类 :

class Util {
	static sum = (a, b) => a + b;
} 
//导出该类
export default Util;

import

使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块。
例如我要使用上面导出的Util：

//Index.js
//导入Util类
import Util from './Util'
//使用Util中的sum方法
console.log(Util.sum(1, 2));

通过 http://localhost:8000/ 进行访问测试。