Day5：ES6

ES6

模块化

export import

/* util1.js */
export default {
  a: 100
}
/* util2.js */
export function fn1(){
  alert('fn1')
}
export function fn2(){
  alert('fn1')
}

/* index.js*/
import util1 from './util1.js'
import { fn1, fn2} from './util2.js'

console.log(util1)
fn1()
fn2()

babel

1. npm init
2. 安装必要的安装包 npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
3. 创建.babelrc文件
4. npm install --global babel-cli
5. babel --version
6. 创建./src/index.js
7. 内容：[1,2,3].map(item => item+1)
8. 运行 babel ./src/index.js

webpack

1. npm install webpack babel-loader --save-dev
2. 配置webpack.config.js
3. 配置package.json中的scripts
4. 运行npm start

高级的打包工具 rollup

rollup功能单一，webpack功能强大，但是学习成本高
rollup打包后的js文件比较小，没有冗余的代码

关于JS众多模块化标准

• 没有模块化
• AMD成为标准，require.js
• 前端打包工具，使得node.js模块化可以被使用
• ES6出现，想统一现在所有模块化标准
• nodejs积极支持，浏览器尚未统一
• 你可以自造lib，但是不要自造标准！

class

class语法是构造函数的语法糖

构造函数的显示原型的constructer等于它本身
实例的隐式原型等于构造函数的显示原型

继承

class Animal {
  constructor(name){
    this.name = name
  }
  eat() {
    console.log(`${this.name} eat`)
  }
}

class Dog extends Animal {
  constructor(name){
    super(name)
    this.name = name
  }
  say() {
    console.log(`$(this.name) say`)
  }
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()

super代表把Animal的构造器执行一遍

promise

function loadImg(src) {
    const promise = new Promise(function(resolve, reject){
        var img = document.createElement('img')
        img.onload = function(){
            resolve(img)
        }
        img.onerror = function () {
            reject()
        }
        img.src = src
    })
    return promise
}

var src = 'http://xxx/xx.png'
var result = loadImg(src)

result.then(function(img){
    console.log(img.width)
}, function (){
    console.log('failed')
})

result.then(function(img){
    console.log(img.height)
})

ES6其他常用功能

let/const

多行字符串/模板变量

解构赋值

块级作用域

函数默认参数

箭头函数