es6 知识点总结(模块化 异步)

问题:

什么是单线程和异步有什么关系?

什么是 event-loop

是否用过 jquery的deferred

promise的基本使用和原理

介绍一下 async/await(和Promise 的区别 联系)

 

 

 1 ES6 模块化如何使用,开发环境如何打包?
  1.1 模块化的基本语法
      (1) export 语法

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


      (2)引用方法: import 语法

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

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

  1.2 开发环境配置

 

1.3 关于JS众多模块化标准

2 Class和普通JS构造函数有何区别?

 2.1 JS构造函数

2.2 Class语法

class 其实是一个语法糖

m.__proto__ === MathHandle.prototype //true

JS 的继承

 

 

Class的继承

 

 

对class做typeof判断是 function,和constructor相等 说明是其语法糖。

Class 在语法上更加贴切面向对象的写法;

class 实现继承更加易读和理解;


3。Promise 的基本使用和原理?

 

callback hell(Promise解决异步操作 callback hell)

callback异步回调函数所有的复杂操作 要写在 console.log(img.width) 这里。

 promise的用法:

调用方式:

比callback hell 方便的是 一个 result.then 中干一件事 否则的话 所有的获取高度 宽度都要在callback的第一个函数中执行。


ES6 的其他常用功能

  1. let / const
  2. 多行字符串/模版变量
  3. 结构赋值
  4. 块级作用域
  5. 函数默认参数
  6. 箭头函数
     

多行字符串/模版变量

 结构赋值

 

 数组那个定义的三个变量 x y z 分别表示数组arr的前三项;

 

 块级作用域

 

es6中 在块级作用域中定义的item 在作用域外无法访问到的;

函数默认参数:

 

箭头函数

fn.call({a:100})    call表示 fn执行的时候 强制把this指向了参数 {a:100}

 箭头函数的this指向了 函数体外离得最近的 一个this,而不是像原来的 es5 中的默认指向了 window

 二  异步问题

什么是单线程,和异步有什么关系?

什么事event-loop

是否用过 Jquery 的 Deferred

Promise的基本使用和原理

介绍一下 async/await(和Promise的区别,联系)

总结一下当前的 JS解决异步方案

 

2.1。什么是单线程,和异步有什么关系?

单线程:只有一个线程,一个时间只能做一个事情;

原因: 避免 DOM 渲染的冲突

解决方案: 异步

为啥使用的是单线程:原因 避免 DOM 渲染冲突

解决方案:异步:

console.log('start');
setTimeout(function(){
    console.log('延时');  //即便是写的 延时0ms 也是在执行所有的代码之后 在去执行延时的代码
},0)
for(var i=0;i<1000;i++){
    console.log(i);
}
console.log('end');

2.2 什么事event-loop

事件轮询,JS 实现异步的具体解决方案;

同步代码,直接执行。

异步代码先放在异步队列中

待同步函数执行完毕后,轮询执行异步队列的函数

实例2:

事件轮询,一直循环监听异步队列中的事件,一旦监听到,就放在主进程中,执行

 

是否用过 Jquery 的 Deferred

示例(1)

 示例(2)

 

示例(3)

设计模式之一:开放封闭原则

例如 在示例(1)中,如果想打印 4。只能在原来的success代码中进行修改,也就是改动了原来的代码;

而示例(2)(3)中,只需要新增一个 done()或 then()函数,也就是和原来的代码没啥影响;

因此,这个设计模式就是说,要留下可以增加的入口,而不是改动之前的代码。

对比代码: 使用deferred之前:

使用deferred:

dta为deferred对象,它在wait函数中作为参数传入,然后在wait函数中 最后return(为了链式操作),中间在 task函数中 dta.resolve 执行完成任务,dtd.reject执行任务失败方法。

promise 捕获异常:

throw new Error 模拟的是程序中的语法等错误,如果是图片确实没有加载进来(类似于ajax中返回的信息有误)这种错误就会进到 reject()

如果有错误,则执行 reject 函数,reject('错误信息'), 则在catch 中的 ex参数中显示出来。

 

then只接受一个参数,最后统一用 catch 捕获异常,这样then中不用写两个参数了

 ==============================

多个promise串联操作,比如获取到第一个接口信息之后,再请求第二个接口:

 

 

async / await

promise 中的 then 只是将 callback 拆分了
async / await 是最直接的同步写法

 

其中 loadImg 还是和上面用 promise定义的,完整用法如下:

 

生成器Generator:

function *foo(x) {
  let y = 2 * (yield (x + 1))
  let z = yield (y / 3)
  return (x + y + z)
}
let it = foo(5)
console.log(it.next())   // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}
解析:
let it = foo(5) 并不会执行 yield,会返回一个Iterator实例, 然后再执行Iterator实例的next()方法
如果给next方法传参数, 那么这个参数将会作为上一次yield语句的返回值
所以 it.next() 时,会返回在 let y = 2 * (yield (x + 1))这句话的,yield (x + 1), foo传进来的参数 5 ,则
返回 5+1 = 6;
第二次执行 it.next(12);会从上一次暂停的位置开始 let y = 2 * (yield (x + 1))
且 传参12 等于yield (x + 1),所以 y = 2* 12 = 24;且返回第二个 yield处
yield (y / 3) == 24/3 == 8;
第三次 it.next(13) 会从上一次yield处开始let z = yield (y / 3);传入的参数等于 let z = yield (y / 3) =13;
综上所述 x=5;y=24;z=13;

 

posted @ 2019-05-19 11:24  小猪冒泡  阅读(683)  评论(0编辑  收藏  举报