学习ES6的总结

模块化的基本语法：

总结：如果是export default导出，则import的时候直接引用；如果是export导出，import的时候则需要用大括号{}括起来引用。

Babel的环境配置流程：

1. 电脑上有node环境，运行npm init。自定义输入一些信息，会生成一个package.json文件
2. 安装一下包：babel-core babel-preset-es2015 bable-preset-latest
3. 安装成功后，在当前文件下创建.babelrc文件，并配置
4. 全局安装babel-cli ，npm install -global bable-cli（window需要打开管理员面板，mac用sudo）
5. 用babel –version 查看是否安装成功，成功的话就配置成功

Webpack打包配置流程：

1. 安装需要的包 npm install webpack babel-loader –save-dev
2. 配置webpack.config.js（可以参考webpack官网上的配置）
3. 配置package.json中的scripts，添加”start”:”webpack”
4. 运行npm start命令。根据webpack.config.js的output配置找到打包输出地址
5. 新建一个html文件，script中的src指向bundle中的文件。用http-server开一个服务就可以在浏览器看到输出的内容了

关于JS众多模块化的标准：

1. 语法：import export（注意有无default）
2. 环境：babel编译ES6语法，模块化用webpack和rollup
3. 扩展：模块化标准越统一越简单，使用起来越好

关于class和js构造函数的typeof：

 Class className{}
 Var c = new className()
 1. typeof className                                    //’function’
 2. className.prototype.construtor====className         //true
 3. c.__proto__ ===className.protoType                  //true

关于class和js构造函数的区别：

1. class的语法糖更加贴合面向对象的写法
2. class在实现继承上更加易读、易理解
3. 更易于java等后端语言的使用
4. 本质还是语法糖，使用prototype

异步加载图片并挂载到页面中：

 <div id="root"></div>
  <script>
    function loadImg(src, callback, fail) {
      var img = document.createElement('img')
      img.onload = function () {
        callback(img)
      }
      img.onerror = function () {
        fail()
      }
      img.src = src
    }
    var src = 'https://y.gtimg.cn/music/photo_new/T002R300x300M000004ASVsz1LwZfP.jpg?max_age=2592000'
    loadImg(src, function (img) {
      document.getElementById('root').appendChild(img)
      console.log("图片加载成功")
    }, function () {
      console.log("图片加载失败")
    })
  </script>

Promise语法改造图片加载：

 <script>
    // Promise封装异步加载图片
    function loadImg(src) {
      const promise = new Promise((resolve, reject) => {
        var img = document.createElement('img')
        img.onload = function () {
          resolve(img)
        }
        img.onerror = function () {
          reject()
        }
        img.src = src
        document.getElementById("root").appendChild(img)
      })
      return promise
    }
    var src = 'https://y.gtimg.cn/music/photo_new/T002R300x300M000004ASVsz1LwZfP.jpg?max_age=2592000'
    loadImg(src).then((img) => {
      console.log("图片加载成功la")
    }, () => {
      console.log("图片加载失败")
    })
  </script>

使用总结：

1. new Promise实例，要return
2. new Promise时要传入函数，函数有resolve reject两个参数
3. 成功时执行resolve（） 失败时执行reject（）
4. 用then监听结果

总结ES6的其他功能：

1. let/const
2. 多行字符串/
3. 解构赋值
4. 块级作用域
5. 函数默认参数
6. 箭头函数（this的指向问题）

 function fn() {
      console.log('使用call调用的this指：' + this) //指{a:100}
      var arr = [1, 2, 3]
      arr.map(function (item) {
        console.log('普通js的this指：' + this) // window
      })
      arr.map(item => {
        console.log('箭头js的this指：' + this) //指{a:100}
      })
    }
    fn.call({ a: 100 }) 

学而转，第一次上路写...