1.（ECMAScript）基本介绍及环境搭建

1. 重点提炼

• ES新特性与旧语法对比说明，理解新特性优势
• 新语法的应用场景
• ES开发脚手架，开箱即用

2. 引言

学会框架 $\ne$ 掌握前端

无论使用哪种方式（框架）写代码（盖房子），es实际就是砖头，在项目中必不可少。

ES每年都会出一个版本。 => es新特性，及语法的升级。

3. es环境

es新特性兼容性可能不是太好。

通过转译 =>

配置了脚手架工具直接生成转译后的代码 => es5

4. 环境搭建

首先需要安装node，需要npm来安装包。

npm安装较慢 => NRM，可选择下载最快的源

nrm ls当前可下载的源

* 代表当前的源

nrm test => 测试哪个源快？

nrm use => 切换源

nrm current => 查看当前使用的源

也可增加自定义的源，如公司的源

增加定制源: nrm add custom01 http://192.168.1.100:6666

删除源：nrm del custom01

5. 构建开发环境

安装

首页

注意：这是小迪自己构建webpack环境，如有问题，大家可留有。

Windows：npm install xd-es-cli -g

Mac：sudo npm install xd-es-cli -g

初始化

cd进入到要初始化项目的文件夹

初始化命令：xd-es-cli init => 输入项目名称

初始化项目 => 英文

进入项目 cd es-demo

安装依赖：npm install

启动项目：npm run start

帮助查看命令列表 =>

static下的文件并不会被webpack进行打包编译，而是复制到我们的生成环境中。

通过几个案例，来对比ES6+语法新特性的魅力所在。

6. 案例1：可选链

读取一个被连接对象的深层次的属性的值 => ?.

const user = {
    address: {
        street: 'xx街道',
        getNum() {
            return '80号'
        }
    }
}

ES5语法：

const street = user && user.address && user.address.street
const num = user && user.address && user.address.getNum && user.address.getNum()

ES6+语法：

const street = user?.address?.street
const num = user?.address?.getNum?.()

7. 案例2：消除魔术字符串

魔术字符串指的是在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码，应该尽量消除魔术字符串，改由含义清晰的变量代替。

魔术字符串容易写错 => Symbol类型数据去解决

ES5语法：

function getArea(shape) {
    let area = 0
    switch (shape) {
        case 'Triangle':
            area = 1
            break
        case 'Circle':
            area = 2
            break
    }
    return area
}
getArea('Triangle')

ES6+语法：

const shapeType = {
    triangle: Symbol(),
    circle: Symbol()
}
function getArea(shape) {
    let area = 0
    switch (shape) {
        case shapeType.triangle:
            area = 1
            break
        case shapeType.circle:
            area = 2
            break
    }
    return area
}
getArea(shapeType.triangle)

8. 案例3：将类数组转化为数组

const arrayLike = document.querySelectorAll('.item')

ES5语法

Array.prototype.slice.call(arrayLike)

ES6+语法

Array.from(arrayLike)

9. 案例4：优雅的异步操作与解构赋值

ES5语法

如果回调层层依赖，就会变成回调地狱。

function getData (url) {
    ajax(url, function (res) {
        var data = res.data
        this.list = data
    })
}

ES6+语法

async function getData (url) {
    const { data } = await axios.get(url)
    this.list = data
}

（后续待补充）